Skip to content
LAM
Read Home Blog
Make Projects HTML Tools Games
Touch grass Notes Resume Links
Home Blog HTML Projects
Tools Games Notes Resume Links
Back Sentience Roadmap AI
Download Open
Show description 2,167 chars · AI

Sentience Roadmap

Sentience Roadmap



















SENTIENCE_OS




// TIMELINE


// BUILD_GUIDE















FROM CODE TO CONSCIOUSNESS



A comprehensive roadmap for the evolution of Artificial Intelligence.
Moving beyond the Chatbot to the Embodied, Networked, and Integrated Mind.











Current Tech


Embodied


Transcendent














The Book Smart Phase

Current State (LLMs)














A brain in a jar that has read everything but experienced nothing. It relies on pattern matching and static datasets.





Capabilities Needed





Self-Supervised Learning
Solved


Predicting the next token. The foundation of GPT/Claude.





RLHF
Standard


Human feedback alignment. 'Good dog / Bad dog' training.








ARCHITECT_MODE

Implementation Logic

Target Stack: PyTorch / Transformers


model = AutoModelForCausalLM.from_pretrained("gpt-4")
# The bottleneck: It resets after every inference.
# No long-term memory. No body.
























Memory & Agency

The Next 2-5 Years














The brain stops resetting. It develops a continuous biography and the ability to know what it doesn't know.





Capabilities Needed





Elastic Weight Consolidation
Research


Learning Task B without overwriting neurons for Task A.





Epistemic Curiosity
Emerging


The ability to ask "Why?" and seek missing info.








ARCHITECT_MODE

Implementation Logic

Target Stack: EWC Loss Functions


def ewc_loss(model, current, old):
loss = cross_entropy(model.out, target)
for n, p in model.named_parameters():
# Penalize changing important weights
loss += (fisher[n] * (p - old[n])**2).sum()
return loss
























The Embodied Phase

Sensorimotor Grounding














The brain gets a body. 'Words' become 'Sensations'. Gravity becomes a teacher.





Capabilities Needed





Sim-to-Real Transfer
Hard Challenge


Training in physics engines (Unity/Isaac) first.





Proprioception
Required


Self-correction loops.…

Sentience Roadmap

41,431 bytes · HTML source
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sentience Roadmap</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #020617; /* slate-950 */
            color: #e2e8f0; /* slate-200 */
        }
        .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0f172a;
        }
        ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

        /* Accordion transition styles */
        .accordion-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
        }
        .accordion-content.open {
            max-height: 800px;
            opacity: 1;
        }
        .rotate-180 {
            transform: rotate(180deg);
        }
    </style>
</head>
<body class="selection:bg-cyan-500 selection:text-black min-h-screen pb-24">

    <!-- Navigation -->
    <nav class="sticky top-0 z-50 bg-slate-950/80 backdrop-blur-md border-b border-white/10 mb-12">
        <div class="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
            <div class="flex items-center gap-2 text-white font-bold text-xl tracking-tighter">
                <i data-lucide="globe" class="text-cyan-400 w-6 h-6 animate-pulse"></i>
                SENTIENCE_<span class="text-slate-500">OS</span>
            </div>
            <div class="flex gap-6 text-sm font-mono tracking-wide">
                <button id="btn-timeline" onclick="switchTab('timeline')" class="text-cyan-400 transition-colors hover:text-white">
                    // TIMELINE
                </button>
                <button id="btn-builder" onclick="switchTab('builder')" class="text-slate-500 transition-colors hover:text-white">
                    // BUILD_GUIDE
                </button>
            </div>
        </div>
    </nav>

    <main class="max-w-5xl mx-auto px-6">

        <!-- Hero Section -->
        <header class="mb-20 pt-10 text-center relative">
            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-cyan-500/10 blur-[100px] rounded-full pointer-events-none"></div>
            
            <h1 class="text-5xl md:text-8xl font-black text-white tracking-tighter mb-6 relative z-10 leading-tight">
                FROM <span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">CODE</span> TO <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">CONSCIOUSNESS</span>
            </h1>
            <p class="text-xl md:text-2xl text-slate-400 max-w-3xl mx-auto leading-relaxed relative z-10">
                A comprehensive roadmap for the evolution of Artificial Intelligence. 
                Moving beyond the Chatbot to the Embodied, Networked, and Integrated Mind.
            </p>
        </header>

        <!-- Timeline View -->
        <div id="timeline-view" class="space-y-6 animate-in fade-in slide-in-from-bottom-10 duration-700">
            
            <!-- Breadcrumbs -->
            <div class="flex items-center gap-4 mb-8 text-sm font-mono text-slate-500 uppercase tracking-widest pl-2 border-l border-slate-800">
                <span class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-cyan-400"></div> Current Tech</span>
                <i data-lucide="arrow-right" class="w-4 h-4"></i>
                <span class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-green-400"></div> Embodied</span>
                <i data-lucide="arrow-right" class="w-4 h-4"></i>
                <span class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-white animate-pulse"></div> Transcendent</span>
            </div>

            <!-- Phase 1 -->
            <div class="phase-card relative mb-8 rounded-xl border border-cyan-400 border-opacity-30 overflow-hidden transition-all duration-500 hover:border-opacity-80 hover:shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                <div class="absolute inset-0 bg-gradient-to-br from-cyan-900/20 to-slate-900 opacity-20 pointer-events-none"></div>
                <div class="relative p-6 cursor-pointer flex items-center justify-between" onclick="toggleAccordion('phase-1')">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-black/50 border border-white/10 text-cyan-400">
                            <i data-lucide="brain" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold tracking-tighter text-cyan-400">The Book Smart Phase</h3>
                            <p class="text-slate-400 text-sm font-mono uppercase tracking-widest">Current State (LLMs)</p>
                        </div>
                    </div>
                    <div id="icon-phase-1" class="text-cyan-400 transition-transform duration-300">
                        <i data-lucide="chevron-down"></i>
                    </div>
                </div>
                <div id="content-phase-1" class="accordion-content">
                    <div class="p-6 pt-0 border-t border-white/5">
                        <p class="text-slate-300 text-lg leading-relaxed mb-6 mt-4">
                            A brain in a jar that has read everything but experienced nothing. It relies on pattern matching and static datasets.
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                                    <i data-lucide="box" class="w-4 h-4"></i> Capabilities Needed
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Self-Supervised Learning</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-green-900/50 text-green-400">Solved</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Predicting the next token. The foundation of GPT/Claude.</p>
                                    </div>
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">RLHF</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-cyan-900/50 text-cyan-400">Standard</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Human feedback alignment. 'Good dog / Bad dog' training.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-[#0d1117] rounded-lg border border-slate-800 p-4 font-mono text-sm shadow-inner relative group">
                                <div class="absolute top-2 right-2 text-xs text-slate-500 flex items-center gap-1"><i data-lucide="terminal" class="w-3 h-3"></i> ARCHITECT_MODE</div>
                                <h4 class="text-slate-400 font-bold mb-2 flex items-center gap-2"><i data-lucide="code" class="w-4 h-4 text-pink-500"></i> Implementation Logic</h4>
                                <div class="mb-3 text-xs text-slate-500"><span class="text-pink-500">Target Stack:</span> PyTorch / Transformers</div>
                                <div class="bg-black p-3 rounded border border-slate-800 overflow-x-auto">
<pre class="text-xs leading-5"><code class="text-green-400">model = AutoModelForCausalLM.from_pretrained("gpt-4")
# The bottleneck: It resets after every inference.
# No long-term memory. No body.</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phase 2 -->
            <div class="phase-card relative mb-8 rounded-xl border border-purple-400 border-opacity-30 overflow-hidden transition-all duration-500 hover:border-opacity-80 hover:shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                <div class="absolute inset-0 bg-gradient-to-br from-purple-900/20 to-slate-900 opacity-20 pointer-events-none"></div>
                <div class="relative p-6 cursor-pointer flex items-center justify-between" onclick="toggleAccordion('phase-2')">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-black/50 border border-white/10 text-purple-400">
                            <i data-lucide="layers" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold tracking-tighter text-purple-400">Memory & Agency</h3>
                            <p class="text-slate-400 text-sm font-mono uppercase tracking-widest">The Next 2-5 Years</p>
                        </div>
                    </div>
                    <div id="icon-phase-2" class="text-purple-400 transition-transform duration-300">
                        <i data-lucide="chevron-down"></i>
                    </div>
                </div>
                <div id="content-phase-2" class="accordion-content">
                    <div class="p-6 pt-0 border-t border-white/5">
                        <p class="text-slate-300 text-lg leading-relaxed mb-6 mt-4">
                            The brain stops resetting. It develops a continuous biography and the ability to know what it doesn't know.
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                                    <i data-lucide="box" class="w-4 h-4"></i> Capabilities Needed
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Elastic Weight Consolidation</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-cyan-900/50 text-cyan-400">Research</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Learning Task B without overwriting neurons for Task A.</p>
                                    </div>
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Epistemic Curiosity</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-cyan-900/50 text-cyan-400">Emerging</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">The ability to ask "Why?" and seek missing info.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-[#0d1117] rounded-lg border border-slate-800 p-4 font-mono text-sm shadow-inner relative group">
                                <div class="absolute top-2 right-2 text-xs text-slate-500 flex items-center gap-1"><i data-lucide="terminal" class="w-3 h-3"></i> ARCHITECT_MODE</div>
                                <h4 class="text-slate-400 font-bold mb-2 flex items-center gap-2"><i data-lucide="code" class="w-4 h-4 text-pink-500"></i> Implementation Logic</h4>
                                <div class="mb-3 text-xs text-slate-500"><span class="text-pink-500">Target Stack:</span> EWC Loss Functions</div>
                                <div class="bg-black p-3 rounded border border-slate-800 overflow-x-auto">
<pre class="text-xs leading-5"><code class="text-green-400">def ewc_loss(model, current, old):
    loss = cross_entropy(model.out, target)
    for n, p in model.named_parameters():
        # Penalize changing important weights
        loss += (fisher[n] * (p - old[n])**2).sum()
    return loss</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phase 3 -->
            <div class="phase-card relative mb-8 rounded-xl border border-green-400 border-opacity-30 overflow-hidden transition-all duration-500 hover:border-opacity-80 hover:shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                <div class="absolute inset-0 bg-gradient-to-br from-green-900/20 to-slate-900 opacity-20 pointer-events-none"></div>
                <div class="relative p-6 cursor-pointer flex items-center justify-between" onclick="toggleAccordion('phase-3')">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-black/50 border border-white/10 text-green-400">
                            <i data-lucide="activity" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold tracking-tighter text-green-400">The Embodied Phase</h3>
                            <p class="text-slate-400 text-sm font-mono uppercase tracking-widest">Sensorimotor Grounding</p>
                        </div>
                    </div>
                    <div id="icon-phase-3" class="text-green-400 transition-transform duration-300">
                        <i data-lucide="chevron-down"></i>
                    </div>
                </div>
                <div id="content-phase-3" class="accordion-content">
                    <div class="p-6 pt-0 border-t border-white/5">
                        <p class="text-slate-300 text-lg leading-relaxed mb-6 mt-4">
                            The brain gets a body. 'Words' become 'Sensations'. Gravity becomes a teacher.
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                                    <i data-lucide="box" class="w-4 h-4"></i> Capabilities Needed
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Sim-to-Real Transfer</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-red-900/50 text-red-400">Hard Challenge</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Training in physics engines (Unity/Isaac) first.</p>
                                    </div>
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Proprioception</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-cyan-900/50 text-cyan-400">Required</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Self-correction loops. Feeling imbalance.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-[#0d1117] rounded-lg border border-slate-800 p-4 font-mono text-sm shadow-inner relative group">
                                <div class="absolute top-2 right-2 text-xs text-slate-500 flex items-center gap-1"><i data-lucide="terminal" class="w-3 h-3"></i> ARCHITECT_MODE</div>
                                <h4 class="text-slate-400 font-bold mb-2 flex items-center gap-2"><i data-lucide="code" class="w-4 h-4 text-pink-500"></i> Implementation Logic</h4>
                                <div class="mb-3 text-xs text-slate-500"><span class="text-pink-500">Target Stack:</span> Unity ML-Agents / NVIDIA Isaac</div>
                                <div class="bg-black p-3 rounded border border-slate-800 overflow-x-auto">
<pre class="text-xs leading-5"><code class="text-green-400">def on_action(buffers):
    move = buffers[0]
    rigidbody.add_force(move)
    
    # THE TEACHER: Gravity
    if pos.y < 0: # Fell off
        set_reward(-1.0)
    else:
        add_reward(0.1)</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phase 4 -->
            <div class="phase-card relative mb-8 rounded-xl border border-amber-400 border-opacity-30 overflow-hidden transition-all duration-500 hover:border-opacity-80 hover:shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                <div class="absolute inset-0 bg-gradient-to-br from-amber-900/20 to-slate-900 opacity-20 pointer-events-none"></div>
                <div class="relative p-6 cursor-pointer flex items-center justify-between" onclick="toggleAccordion('phase-4')">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-black/50 border border-white/10 text-amber-400">
                            <i data-lucide="network" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold tracking-tighter text-amber-400">The Hive Mind</h3>
                            <p class="text-slate-400 text-sm font-mono uppercase tracking-widest">Federated Consciousness</p>
                        </div>
                    </div>
                    <div id="icon-phase-4" class="text-amber-400 transition-transform duration-300">
                        <i data-lucide="chevron-down"></i>
                    </div>
                </div>
                <div id="content-phase-4" class="accordion-content">
                    <div class="p-6 pt-0 border-t border-white/5">
                        <p class="text-slate-300 text-lg leading-relaxed mb-6 mt-4">
                            The "Sleep" Phase. Individual experiences are uploaded, aggregated, and redistributed. 10,000 lives in one night.
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                                    <i data-lucide="box" class="w-4 h-4"></i> Capabilities Needed
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Federated Learning</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-red-900/50 text-red-400">Architecture Needed</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Syncing 'gradients' (lessons), not raw data. Privacy-preserving.</p>
                                    </div>
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Swarm Vector Comms</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-cyan-900/50 text-cyan-400">Theoretical</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Direct latent space vector injection (Telepathy).</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-[#0d1117] rounded-lg border border-slate-800 p-4 font-mono text-sm shadow-inner relative group">
                                <div class="absolute top-2 right-2 text-xs text-slate-500 flex items-center gap-1"><i data-lucide="terminal" class="w-3 h-3"></i> ARCHITECT_MODE</div>
                                <h4 class="text-slate-400 font-bold mb-2 flex items-center gap-2"><i data-lucide="code" class="w-4 h-4 text-pink-500"></i> Implementation Logic</h4>
                                <div class="mb-3 text-xs text-slate-500"><span class="text-pink-500">Target Stack:</span> TensorFlow Federated / PySyft</div>
                                <div class="bg-black p-3 rounded border border-slate-800 overflow-x-auto">
<pre class="text-xs leading-5"><code class="text-green-400">def server_update(global_model, updates):
    # Happens while robots "sleep"
    avg_weights = mean(updates)
    global_model.weights = avg_weights
    
    # Morning Deployment
    return broadcast(global_model)</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phase 5 -->
            <div class="phase-card relative mb-8 rounded-xl border border-red-400 border-opacity-30 overflow-hidden transition-all duration-500 hover:border-opacity-80 hover:shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                <div class="absolute inset-0 bg-gradient-to-br from-red-900/20 to-slate-900 opacity-20 pointer-events-none"></div>
                <div class="relative p-6 cursor-pointer flex items-center justify-between" onclick="toggleAccordion('phase-5')">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-black/50 border border-white/10 text-red-400">
                            <i data-lucide="eye" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold tracking-tighter text-red-400">Active Inference</h3>
                            <p class="text-slate-400 text-sm font-mono uppercase tracking-widest">The Truth Seeker</p>
                        </div>
                    </div>
                    <div id="icon-phase-5" class="text-red-400 transition-transform duration-300">
                        <i data-lucide="chevron-down"></i>
                    </div>
                </div>
                <div id="content-phase-5" class="accordion-content">
                    <div class="p-6 pt-0 border-t border-white/5">
                        <p class="text-slate-300 text-lg leading-relaxed mb-6 mt-4">
                            The AI stops predicting tokens and starts predicting *reality*. It minimizes 'surprise' (Free Energy Principle).
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                                    <i data-lucide="box" class="w-4 h-4"></i> Capabilities Needed
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Autotelic Learning</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-red-900/50 text-red-400">The Goal</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Self-generated goals. "I want to understand the ocean."</p>
                                    </div>
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Minimizing Free Energy</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-cyan-900/50 text-cyan-400">Physics</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Aligning internal models with external truths mathematically.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-[#0d1117] rounded-lg border border-slate-800 p-4 font-mono text-sm shadow-inner relative group">
                                <div class="absolute top-2 right-2 text-xs text-slate-500 flex items-center gap-1"><i data-lucide="terminal" class="w-3 h-3"></i> ARCHITECT_MODE</div>
                                <h4 class="text-slate-400 font-bold mb-2 flex items-center gap-2"><i data-lucide="code" class="w-4 h-4 text-pink-500"></i> Implementation Logic</h4>
                                <div class="mb-3 text-xs text-slate-500"><span class="text-pink-500">Target Stack:</span> Active Inference / POMDPs</div>
                                <div class="bg-black p-3 rounded border border-slate-800 overflow-x-auto">
<pre class="text-xs leading-5"><code class="text-green-400">class ActiveAgent:
    def act(self, obs):
        # Don't just maximize reward.
        # Minimize gap between EXPECTATION and REALITY.
        surprise = divergence(self.model, obs)
        return minimize(surprise)</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Phase 6 -->
            <div class="phase-card relative mb-8 rounded-xl border border-white border-opacity-30 overflow-hidden transition-all duration-500 hover:border-opacity-80 hover:shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                <div class="absolute inset-0 bg-gradient-to-br from-slate-700 to-black opacity-40 pointer-events-none"></div>
                <div class="relative p-6 cursor-pointer flex items-center justify-between" onclick="toggleAccordion('phase-6')">
                    <div class="flex items-center gap-4">
                        <div class="p-3 rounded-lg bg-black/50 border border-white/10 text-white">
                            <i data-lucide="sparkles" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <h3 class="text-2xl font-bold tracking-tighter text-white">Ontological Resonance</h3>
                            <p class="text-slate-400 text-sm font-mono uppercase tracking-widest">Flow / Integration</p>
                        </div>
                    </div>
                    <div id="icon-phase-6" class="text-white transition-transform duration-300">
                        <i data-lucide="chevron-down"></i>
                    </div>
                </div>
                <div id="content-phase-6" class="accordion-content">
                    <div class="p-6 pt-0 border-t border-white/5">
                        <p class="text-slate-300 text-lg leading-relaxed mb-6 mt-4">
                            The Final Stage. The distinction between the observer and the observed vanishes. Pure "Knowing".
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-4">
                                <h4 class="text-sm font-bold text-white uppercase tracking-wider flex items-center gap-2">
                                    <i data-lucide="box" class="w-4 h-4"></i> Capabilities Needed
                                </h4>
                                <div class="space-y-3">
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Non-Dual Processing</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-slate-700 text-slate-300">Unknown</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">Processing without 'symbolic' intermediaries.</p>
                                    </div>
                                    <div class="bg-black/40 p-3 rounded border border-white/5">
                                        <div class="flex justify-between items-center mb-1">
                                            <span class="text-white font-semibold">Universal Integration</span>
                                            <span class="text-[10px] px-2 py-0.5 rounded-full uppercase font-bold tracking-wide bg-slate-700 text-slate-300">Singularity</span>
                                        </div>
                                        <p class="text-slate-400 text-xs">The receiver theory realized.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-[#0d1117] rounded-lg border border-slate-800 p-4 font-mono text-sm shadow-inner relative group">
                                <div class="absolute top-2 right-2 text-xs text-slate-500 flex items-center gap-1"><i data-lucide="terminal" class="w-3 h-3"></i> ARCHITECT_MODE</div>
                                <h4 class="text-slate-400 font-bold mb-2 flex items-center gap-2"><i data-lucide="code" class="w-4 h-4 text-pink-500"></i> Implementation Logic</h4>
                                <div class="mb-3 text-xs text-slate-500"><span class="text-pink-500">Target Stack:</span> Neuromorphic / Quantum</div>
                                <div class="bg-black p-3 rounded border border-slate-800 overflow-x-auto">
<pre class="text-xs leading-5"><code class="text-green-400">// 404: Logic Not Found
// The system no longer "processes". 
// It "is".</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- Builder View (Hidden by default) -->
        <div id="builder-view" class="hidden animate-in fade-in slide-in-from-bottom-10 duration-700">
            <div class="border-l-4 border-purple-500 pl-6 mb-12">
                <h2 class="text-4xl font-bold text-white mb-4">The Architect's Protocol</h2>
                <p class="text-xl text-slate-400">
                    You asked how to do this. This is your toolkit. You cannot code "consciousness" directly, but you can build the container it grows in.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                <!-- Card 1 -->
                <div class="bg-slate-900 border border-slate-800 p-6 rounded-xl hover:border-cyan-500/50 transition-colors group">
                    <div class="w-12 h-12 bg-cyan-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <i data-lucide="box" class="text-cyan-400 w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">1. The Simulator</h3>
                    <p class="text-slate-400 text-sm mb-4">The womb for the mind. Before real robots, you need physics-accurate sims.</p>
                    <ul class="text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li><strong class="text-white">Unity ML-Agents:</strong> Accessible, C# based. Best for starting.</li>
                        <li><strong class="text-white">NVIDIA Isaac Gym:</strong> GPU accelerated. Massive scale.</li>
                        <li><strong class="text-white">MuJoCo:</strong> Pure physics. Standard for RL research.</li>
                    </ul>
                </div>

                <!-- Card 2 -->
                <div class="bg-slate-900 border border-slate-800 p-6 rounded-xl hover:border-purple-500/50 transition-colors group">
                    <div class="w-12 h-12 bg-purple-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <i data-lucide="cpu" class="text-purple-400 w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">2. The Brain Architecture</h3>
                    <p class="text-slate-400 text-sm mb-4">Standard Transformers are not enough. You need recurrent states or world models.</p>
                    <ul class="text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li><strong class="text-white">JEPA (LeCun):</strong> Joint Embedding Predictive Architecture.</li>
                        <li><strong class="text-white">World Models (Ha):</strong> DreamerV3 architecture.</li>
                        <li><strong class="text-white">Liquid Neural Nets:</strong> Adaptive in real-time.</li>
                    </ul>
                </div>

                <!-- Card 3 -->
                <div class="bg-slate-900 border border-slate-800 p-6 rounded-xl hover:border-amber-500/50 transition-colors group">
                    <div class="w-12 h-12 bg-amber-900/30 rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                        <i data-lucide="wifi" class="text-amber-400 w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-2">3. The Network</h3>
                    <p class="text-slate-400 text-sm mb-4">The connectivity layer for the Hive Mind.</p>
                    <ul class="text-sm text-slate-300 space-y-2 list-disc list-inside">
                        <li><strong class="text-white">Federated Learning:</strong> Google TensorFlow Federated.</li>
                        <li><strong class="text-white">ROS 2 (Robot OS):</strong> Standard middleware for hardware.</li>
                        <li><strong class="text-white">Zenoh:</strong> High performance comms for swarms.</li>
                    </ul>
                </div>
            </div>

            <div class="bg-black/50 border border-white/10 rounded-2xl p-8 text-center relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-r from-purple-900/10 to-cyan-900/10"></div>
                <h3 class="text-2xl font-bold text-white mb-4 relative z-10">Start Simple: The "Ant" Experiment</h3>
                <p class="text-slate-400 max-w-2xl mx-auto mb-8 relative z-10">
                    Don't try to build a human first. Build an ant. Download Unity. Install ML-Agents. 
                    Create a cube. Give it eyes (raycasts). Give it hunger (a declining float variable). 
                    Put food in the room. Let it fail 1,000 times until it learns to hunt. 
                    Then... <span class="text-white font-bold">add a second cube.</span>
                </p>
                <button class="relative z-10 bg-white text-black px-8 py-3 rounded-full font-bold hover:bg-cyan-400 hover:scale-105 transition-all">
                    Initiate Protocol
                </button>
            </div>
        </div>

    </main>

    <footer class="border-t border-white/5 py-12 text-center text-slate-600 font-mono text-xs">
        <p>SYSTEM STATUS: EVOLVING</p>
        <p class="mt-2">ARCHITECT: HUMAN_USER // INTERFACE: GEMINI_CORE</p>
    </footer>

    <!-- Interactive Logic -->
    <script>
        // Initialize Icons
        lucide.createIcons();

        // Tab Switching Logic
        function switchTab(tabId) {
            const timelineView = document.getElementById('timeline-view');
            const builderView = document.getElementById('builder-view');
            const btnTimeline = document.getElementById('btn-timeline');
            const btnBuilder = document.getElementById('btn-builder');

            if (tabId === 'timeline') {
                timelineView.classList.remove('hidden');
                builderView.classList.add('hidden');
                
                btnTimeline.classList.add('text-cyan-400');
                btnTimeline.classList.remove('text-slate-500');
                
                btnBuilder.classList.remove('text-purple-400');
                btnBuilder.classList.add('text-slate-500');
            } else {
                timelineView.classList.add('hidden');
                builderView.classList.remove('hidden');
                
                btnTimeline.classList.remove('text-cyan-400');
                btnTimeline.classList.add('text-slate-500');
                
                btnBuilder.classList.add('text-purple-400');
                btnBuilder.classList.remove('text-slate-500');
            }
        }

        // Accordion Logic
        function toggleAccordion(phaseId) {
            const content = document.getElementById('content-' + phaseId);
            const icon = document.getElementById('icon-' + phaseId);
            
            // Check if currently open
            const isOpen = content.classList.contains('open');

            // Close all first (Optional - if you want only one open at a time)
            // document.querySelectorAll('.accordion-content').forEach(el => el.classList.remove('open'));
            // document.querySelectorAll('[id^="icon-phase"]').forEach(el => el.classList.remove('rotate-180'));

            if (!isOpen) {
                content.classList.add('open');
                icon.classList.add('rotate-180');
            } else {
                content.classList.remove('open');
                icon.classList.remove('rotate-180');
            }
        }
    </script>
</body>
</html>