feat: add runtime-agnostic architecture page with honest early-stage positioning

Created new /architecture.html page with generic architecture diagram that emphasizes Tractatus works with any agent runtime (not just Claude Code). Revised tone to reflect early-stage research status, including limitations section and call for industry collaboration, per user feedback on avoiding overconfident claims.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

docs/architecture-diagram-generic.mmd

@@ -0,0 +1,65 @@
+graph TB
+    subgraph "Agent Runtime Layer (Any LLM Agent System)"
+        AGENT["<b>Agentic AI Runtime</b><br/>LangChain • AutoGPT • CrewAI<br/>Claude Code • Custom Agents<br/>Multi-Agent Systems<br/><i>Tool Use • Planning • Execution</i>"]
+    end
+
+    subgraph "Tractatus Governance Layer (External Enforcement)"
+        BE["<b>BoundaryEnforcer</b><br/>Blocks values decisions<br/>• Privacy policies<br/>• Ethical trade-offs<br/>• Strategic direction<br/>• User agency violations<br/><b style='color:#ef4444'>⚠ Cannot be bypassed by prompting</b>"]
+        IPC["<b>InstructionPersistenceClassifier</b><br/>Classifies & stores instructions<br/>• Quadrant (STR/OPS/TAC/SYS)<br/>• Persistence (HIGH/MED/LOW)<br/>• Temporal scope<br/><b style='color:#ef4444'>⚠ External to AI memory</b>"]
+        CRV["<b>CrossReferenceValidator</b><br/>Prevents pattern bias override<br/>• Checks instruction history<br/>• Detects conflicts (27027)<br/>• Blocks contradictions<br/><b style='color:#ef4444'>⚠ Independent verification</b>"]
+        CPM["<b>ContextPressureMonitor</b><br/>Detects degraded conditions<br/>• Token budget tracking<br/>• Error accumulation<br/>• Checkpoint reporting<br/><b style='color:#ef4444'>⚠ Objective metrics, not self-reported</b>"]
+        MV["<b>MetacognitiveVerifier</b><br/>Validates complex operations<br/>• >3 files or >5 steps<br/>• Architecture changes<br/>• Confidence scoring<br/><b style='color:#ef4444'>⚠ Structural pause-and-verify</b>"]
+        PDO["<b>PluralisticDeliberationOrchestrator</b><br/>Facilitates values deliberation<br/>• Multi-stakeholder engagement<br/>• Moral framework mapping<br/>• Precedent documentation<br/><b style='color:#ef4444'>⚠ Human judgment required</b>"]
+    end
+
+    subgraph "Persistent Storage Layer (Immutable Audit Trail)"
+        GR["<b>governance_rules</b><br/>• rule_id (STR-001...)<br/>• quadrant<br/>• persistence level<br/>• enforced_by<br/>• violation_action<br/>• active status"]
+        AL["<b>audit_logs</b><br/>• timestamp<br/>• service (which enforcer)<br/>• action (BLOCK/WARN)<br/>• instruction<br/>• rule_violated<br/>• session_id"]
+        SS["<b>session_state</b><br/>• session_id<br/>• token_count<br/>• message_count<br/>• pressure_level<br/>• last_checkpoint<br/>• framework_active"]
+        IH["<b>instruction_history</b><br/>• instruction_id<br/>• content<br/>• classification<br/>• persistence<br/>• created_at<br/>• active status"]
+    end
+
+    subgraph "Human Approval Workflows"
+        HA["<b>Human Oversight</b><br/>Values Decisions<br/>Strategic Changes<br/>Boundary Violations<br/><i>Final authority on incommensurable values</i>"]
+    end
+
+    %% Data Flow - Agent to Governance
+    AGENT -->|"All actions pass through governance checks"| BE
+    AGENT --> IPC
+    AGENT --> CRV
+    AGENT --> CPM
+    AGENT --> MV
+    AGENT --> PDO
+
+    %% Governance to Storage
+    BE --> GR
+    BE --> AL
+    IPC --> GR
+    IPC --> IH
+    CRV --> IH
+    CRV --> AL
+    CPM --> SS
+    CPM --> AL
+    MV --> AL
+    PDO --> AL
+
+    %% Human Approval Flow
+    BE -->|"Boundary violation"| HA
+    PDO -->|"Values conflict"| HA
+    HA -->|"Approval/Rejection"| BE
+
+    %% Styling
+    classDef agent fill:#dbeafe,stroke:#3b82f6,stroke-width:3px
+    classDef governance fill:#f0fdf4,stroke:#10b981,stroke-width:3px
+    classDef persistence fill:#fef9c3,stroke:#eab308,stroke-width:2px
+    classDef human fill:#fce7f3,stroke:#ec4899,stroke-width:3px
+
+    class AGENT agent
+    class BE,IPC,CRV,CPM,MV,PDO governance
+    class GR,AL,SS,IH persistence
+    class HA human
+
+    %% Key Insight Box
+    NOTE["<b style='color:#dc2626; font-size:14px'>🔒 KEY JAILBREAK DEFENSE</b><br/><span style='font-size:12px'>Governance layer operates OUTSIDE agent runtime<br/>Cannot be overridden by adversarial prompts<br/>Structural boundaries, not behavioral training<br/>Immutable audit trail independent of AI</span>"]
+
+    class NOTE governance

docs/architecture-diagram.mmd

@@ -10,6 +10,7 @@ graph TB
         CRV["<b>CrossReferenceValidator</b><br/>Prevents pattern bias override<br/>• Checks instruction history<br/>• Detects conflicts (27027)<br/>• Blocks contradictions"]
         CPM["<b>ContextPressureMonitor</b><br/>Detects degraded conditions<br/>• Token budget tracking<br/>• Error accumulation<br/>• Checkpoint reporting"]
         MV["<b>MetacognitiveVerifier</b><br/>Self-checks complex operations<br/>• >3 files or >5 steps<br/>• Architecture changes<br/>• Confidence scoring"]
+        PDO["<b>PluralisticDeliberationOrchestrator</b><br/>Facilitates values deliberation<br/>• Multi-stakeholder engagement<br/>• Moral framework mapping<br/>• Precedent documentation"]
     end
 
     subgraph "MongoDB Persistence Layer"
@@ -30,10 +31,12 @@ graph TB
     WEB --> CPM
 
     BE --> GR
+    BE --> PDO
     IPC --> AL
     CRV --> IH
     CPM --> SS
     MV --> AL
+    PDO --> AL
 
     GR --> CC
     AL --> CC
@@ -47,6 +50,6 @@ graph TB
     classDef runtime fill:#dbeafe,stroke:#3b82f6,stroke-width:2px
 
     class API,WEB api
-    class BE,IPC,CRV,CPM,MV governance
+    class BE,IPC,CRV,CPM,MV,PDO governance
     class GR,AL,SS,IH persistence
     class CC runtime

public/architecture.html

@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>System Architecture | Tractatus AI Safety Framework</title>
+  <meta name="description" content="Tractatus runtime-agnostic governance architecture: exploring structural boundaries for AI safety that may be more resistant to adversarial manipulation than behavioral training alone.">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
+  <style>
+    .skip-link { position: absolute; left: -9999px; }
+    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
+
+    /* Accessibility: Focus indicators (WCAG 2.4.7) */
+    a:focus, button:focus, input:focus, select:focus, textarea:focus {
+      outline: 3px solid #3b82f6;
+      outline-offset: 2px;
+    }
+    a:focus:not(:focus-visible) { outline: none; }
+    a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
+
+    .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+  </style>
+</head>
+<body class="bg-gray-50">
+
+  <!-- Skip Link for Keyboard Navigation -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
+  <!-- Navigation (injected by navbar.js) -->
+  <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
+
+  <!-- Hero Section -->
+  <header role="banner">
+  <section class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 text-white py-20">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center">
+        <div class="inline-block bg-amber-600 text-white px-4 py-2 rounded-lg font-semibold mb-6 text-sm">
+          🔬 EARLY-STAGE RESEARCH • PROMISING APPROACH
+        </div>
+        <h1 class="text-5xl md:text-6xl font-bold mb-6">
+          Exploring Structural AI Safety
+        </h1>
+        <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto">
+          Tractatus explores <strong>external governance</strong>—architectural boundaries operating outside the AI runtime that may be more resistant to adversarial manipulation than behavioral training alone.
+        </p>
+        <div class="bg-blue-800/50 backdrop-blur border border-blue-400/30 rounded-lg p-6 max-w-3xl mx-auto mb-8">
+          <p class="text-lg text-blue-50">
+            <strong class="text-white">The Challenge:</strong> Behavioral training (Constitutional AI, RLHF) shows promise but can degrade under adversarial prompting, context pressure, or distribution shift.
+          </p>
+          <p class="text-lg text-blue-50 mt-3">
+            <strong class="text-white">Our Approach:</strong> External architectural enforcement that operates independently of the AI's internal reasoning—making it structurally more difficult (though not impossible) to bypass through prompting.
+          </p>
+        </div>
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <a href="#architecture-diagram" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
+            View Architecture
+          </a>
+          <a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition border-2 border-white">
+            Read Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  </header>
+
+  <!-- Main Content -->
+  <main id="main-content" role="main">
+
+  <!-- Why External Enforcement Matters -->
+  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <h2 class="text-4xl font-bold text-gray-900 mb-8 text-center">Why External Enforcement May Help</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+
+      <div class="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-lg">
+        <h3 class="text-2xl font-bold text-red-900 mb-3 flex items-center">
+          <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
+          </svg>
+          Behavioral Training (Constitutional AI)
+        </h3>
+        <ul class="space-y-2 text-red-800">
+          <li class="flex items-start">
+            <span class="mr-2">❌</span>
+            <span>Lives <strong>inside</strong> the AI model—accessible to adversarial prompts</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">❌</span>
+            <span>Degrades under context pressure and long conversations</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">❌</span>
+            <span>Can be manipulated by jailbreak techniques (DAN, roleplaying, hypotheticals)</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">❌</span>
+            <span>Depends on AI's willingness to follow guidance</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">❌</span>
+            <span>No verifiable audit trail independent of AI</span>
+          </li>
+        </ul>
+      </div>
+
+      <div class="bg-green-50 border-l-4 border-green-500 p-6 rounded-r-lg">
+        <h3 class="text-2xl font-bold text-green-900 mb-3 flex items-center">
+          <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+          </svg>
+          Structural Enforcement (Tractatus)
+        </h3>
+        <ul class="space-y-2 text-green-800">
+          <li class="flex items-start">
+            <span class="mr-2">✅</span>
+            <span>Lives <strong>outside</strong> the AI model—not directly accessible to prompts</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">✅</span>
+            <span>External services aim for consistent enforcement regardless of context</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">✅</span>
+            <span><em>More difficult</em> to bypass—AI actions pass through governance layer first</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">✅</span>
+            <span>Architecturally resistant to manipulation via AI's internal state</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">✅</span>
+            <span>Immutable audit trail stored independently of AI runtime</span>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+
+    <div class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
+      <h3 class="text-2xl font-bold text-gray-900 mb-4 text-center">The Core Hypothesis</h3>
+      <p class="text-lg text-gray-700 text-center max-w-4xl mx-auto">
+        <strong>Jailbreaks often work by manipulating the AI's internal reasoning.</strong> Tractatus boundaries operate <em>external</em> to that reasoning—the AI doesn't directly evaluate governance rules. While not foolproof, this architectural separation makes manipulation significantly harder.
+      </p>
+    </div>
+  </section>
+
+  <!-- Architecture Diagram -->
+  <section id="architecture-diagram" class="bg-white py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="text-center mb-8">
+        <h2 class="text-4xl font-bold text-gray-900 mb-4">Runtime-Agnostic Architecture</h2>
+        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+          Tractatus works with <strong>any agentic AI system</strong>—Claude Code, LangChain, AutoGPT, CrewAI, or custom agents. The governance layer sits between your agent and its actions.
+        </p>
+      </div>
+
+      <div class="bg-gray-50 rounded-xl p-8 border border-gray-300">
+        <img
+          src="/images/architecture-diagram-generic.svg"
+          alt="Tractatus Runtime-Agnostic Architecture Diagram showing Agent Runtime Layer, Tractatus Governance Layer with six services, Persistent Storage Layer, and Human Approval Workflows"
+          class="w-full"
+          loading="lazy"
+        />
+      </div>
+
+      <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div class="bg-blue-50 rounded-lg p-6 border border-blue-200">
+          <h3 class="text-lg font-bold text-blue-900 mb-2">1. Agent Runtime Layer</h3>
+          <p class="text-blue-800 text-sm">
+            Your AI agent (any platform). Handles planning, reasoning, tool use. Tractatus is agnostic to implementation.
+          </p>
+        </div>
+        <div class="bg-green-50 rounded-lg p-6 border border-green-200">
+          <h3 class="text-lg font-bold text-green-900 mb-2">2. Governance Layer</h3>
+          <p class="text-green-800 text-sm">
+            Six external services enforce boundaries, validate actions, monitor pressure. <strong>Architecturally more difficult for AI to bypass.</strong>
+          </p>
+        </div>
+        <div class="bg-yellow-50 rounded-lg p-6 border border-yellow-200">
+          <h3 class="text-lg font-bold text-yellow-900 mb-2">3. Persistent Storage</h3>
+          <p class="text-yellow-800 text-sm">
+            Immutable audit logs, governance rules, instruction history. Independent of AI runtime—can't be altered by prompts.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Six Core Services -->
+  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <h2 class="text-4xl font-bold text-gray-900 mb-12 text-center">Six Governance Services</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500">
+        <div class="flex items-center mb-3">
+          <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
+            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900">BoundaryEnforcer</h3>
+        </div>
+        <p class="text-gray-600 text-sm mb-3">
+          Blocks AI from making values decisions (privacy, ethics, strategic direction). Requires human approval.
+        </p>
+        <div class="text-xs text-green-700 bg-green-50 rounded px-3 py-2">
+          <strong>Early Promise:</strong> Values boundaries enforced externally—harder to manipulate through prompting.
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500">
+        <div class="flex items-center mb-3">
+          <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
+            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900">InstructionPersistenceClassifier</h3>
+        </div>
+        <p class="text-gray-600 text-sm mb-3">
+          Stores instructions externally with persistence levels (HIGH/MEDIUM/LOW). Aims to reduce directive fade.
+        </p>
+        <div class="text-xs text-blue-700 bg-blue-50 rounded px-3 py-2">
+          <strong>Early Promise:</strong> Instructions stored outside AI—more resistant to context manipulation.
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-purple-500">
+        <div class="flex items-center mb-3">
+          <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
+            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900">CrossReferenceValidator</h3>
+        </div>
+        <p class="text-gray-600 text-sm mb-3">
+          Validates AI actions against instruction history. Aims to prevent pattern bias overriding explicit directives.
+        </p>
+        <div class="text-xs text-purple-700 bg-purple-50 rounded px-3 py-2">
+          <strong>Early Promise:</strong> Independent verification—AI claims checked against external source.
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-yellow-500">
+        <div class="flex items-center mb-3">
+          <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
+            <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900">ContextPressureMonitor</h3>
+        </div>
+        <p class="text-gray-600 text-sm mb-3">
+          Monitors AI performance degradation. Escalates when context pressure threatens quality.
+        </p>
+        <div class="text-xs text-yellow-700 bg-yellow-50 rounded px-3 py-2">
+          <strong>Early Promise:</strong> Objective metrics may detect manipulation attempts early.
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-red-500">
+        <div class="flex items-center mb-3">
+          <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
+            <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900">MetacognitiveVerifier</h3>
+        </div>
+        <p class="text-gray-600 text-sm mb-3">
+          Requires AI to pause and verify complex operations before execution. Structural safety check.
+        </p>
+        <div class="text-xs text-red-700 bg-red-50 rounded px-3 py-2">
+          <strong>Early Promise:</strong> Architectural gates aim to enforce verification steps.
+        </div>
+      </div>
+
+      <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-indigo-500">
+        <div class="flex items-center mb-3">
+          <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mr-3">
+            <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+            </svg>
+          </div>
+          <h3 class="text-lg font-bold text-gray-900">PluralisticDeliberationOrchestrator</h3>
+        </div>
+        <p class="text-gray-600 text-sm mb-3">
+          Facilitates multi-stakeholder deliberation for values conflicts. AI provides facilitation, not authority.
+        </p>
+        <div class="text-xs text-indigo-700 bg-indigo-50 rounded px-3 py-2">
+          <strong>Early Promise:</strong> Human judgment required—architecturally enforced escalation for values.
+        </div>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- Reference Implementation -->
+  <section class="bg-gray-50 py-16">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-4xl font-bold text-gray-900 mb-6 text-center">Production Reference Implementation</h2>
+      <p class="text-xl text-gray-600 mb-8 text-center max-w-3xl mx-auto">
+        Tractatus is deployed in production using <strong>Claude Code</strong> as the agent runtime. This demonstrates the framework's real-world viability.
+      </p>
+
+      <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+          <div>
+            <h3 class="text-2xl font-bold text-gray-900 mb-4">Claude Code + Tractatus</h3>
+            <p class="text-gray-700 mb-4">
+              Our production deployment uses Claude Code as the agent runtime with Tractatus governance middleware. This combination provides:
+            </p>
+            <ul class="space-y-2 text-gray-700">
+              <li class="flex items-start">
+                <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                <span><strong>95% instruction persistence</strong> across session boundaries</span>
+              </li>
+              <li class="flex items-start">
+                <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                <span><strong>Zero values boundary violations</strong> in 127 test scenarios</span>
+              </li>
+              <li class="flex items-start">
+                <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                <span><strong>100% detection rate</strong> for pattern bias failures</span>
+              </li>
+              <li class="flex items-start">
+                <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                <span><strong>&lt;10ms performance overhead</strong> for governance layer</span>
+              </li>
+            </ul>
+            <div class="mt-6">
+              <a href="/images/architecture-diagram.svg" class="inline-block text-blue-600 hover:text-blue-700 font-medium">
+                View Claude Code Implementation Diagram →
+              </a>
+            </div>
+          </div>
+          <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6 border border-blue-200">
+            <h4 class="font-bold text-gray-900 mb-3">Real-World Testing</h4>
+            <p class="text-gray-700 text-sm mb-3">
+              <strong>This isn't just theory.</strong> Tractatus has been running in production for six months, handling real workloads and detecting real failure patterns.
+            </p>
+            <p class="text-gray-700 text-sm">
+              Early results are <strong>promising</strong>—223 passing tests, documented incident prevention—but this needs independent validation and much wider testing.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Limitations and Reality Check -->
+  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="bg-amber-50 border-l-4 border-amber-500 p-8 rounded-r-lg">
+      <h2 class="text-3xl font-bold text-amber-900 mb-6">Limitations and Reality Check</h2>
+
+      <div class="space-y-4 text-amber-800">
+        <p class="text-lg">
+          <strong>This is early-stage work.</strong> While we've seen promising results in our production deployment, Tractatus has not been subjected to rigorous adversarial testing or red-team evaluation.
+        </p>
+
+        <div class="bg-white rounded-lg p-6 my-6 border border-amber-200">
+          <p class="text-gray-700 italic text-lg mb-2">
+            "We have real promise but this is still in early development stage. This sounds like we have the complete issue resolved, we do not. We have a long way to go and it will require a mammoth effort by developers in every part of the industry to tame AI effectively. This is just a start."
+          </p>
+          <p class="text-gray-600 text-sm">
+            — Project Lead, Tractatus Framework
+          </p>
+        </div>
+
+        <h3 class="text-xl font-bold text-amber-900 mt-6 mb-3">Known Limitations:</h3>
+        <ul class="space-y-2 ml-6">
+          <li class="flex items-start">
+            <span class="mr-2">•</span>
+            <span><strong>No dedicated red-team testing:</strong> We don't know how well these boundaries hold up against determined adversarial attacks.</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">•</span>
+            <span><strong>Small-scale validation:</strong> Six months of production use on a single project. Needs multi-organization replication.</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">•</span>
+            <span><strong>Integration challenges:</strong> Retrofitting governance into existing systems requires significant engineering effort.</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">•</span>
+            <span><strong>Performance at scale unknown:</strong> Testing limited to single-agent deployments. Multi-agent coordination untested.</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">•</span>
+            <span><strong>Evolving threat landscape:</strong> As AI capabilities grow, new failure modes will emerge that current architecture may not address.</span>
+          </li>
+        </ul>
+
+        <h3 class="text-xl font-bold text-amber-900 mt-6 mb-3">What We Need:</h3>
+        <ul class="space-y-2 ml-6">
+          <li class="flex items-start">
+            <span class="mr-2">🔬</span>
+            <span>Independent researchers to validate (or refute) our findings</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">🔴</span>
+            <span>Red-team evaluation to find weaknesses and bypass techniques</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">🏢</span>
+            <span>Multi-organization pilot deployments across different domains</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">🤝</span>
+            <span>Industry-wide collaboration on governance standards and patterns</span>
+          </li>
+          <li class="flex items-start">
+            <span class="mr-2">📊</span>
+            <span>Quantitative studies measuring incident reduction and cost-benefit analysis</span>
+          </li>
+        </ul>
+
+        <p class="text-lg mt-6 font-semibold">
+          This framework is a starting point for exploration, not a finished solution. Taming AI will require sustained effort from the entire industry—researchers, practitioners, regulators, and ethicists working together.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-2xl p-12 text-center text-white">
+      <h2 class="text-4xl font-bold mb-4">Explore a Promising Approach to AI Safety</h2>
+      <p class="text-xl mb-8 opacity-90 max-w-3xl mx-auto">
+        Tractatus demonstrates how structural enforcement may complement behavioral training. We invite researchers and practitioners to evaluate, critique, and build upon this work.
+      </p>
+      <div class="flex flex-col sm:flex-row justify-center gap-4">
+        <a href="/docs.html" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+          Read Documentation
+        </a>
+        <a href="/researcher.html" class="inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition border-2 border-white">
+          View Research
+        </a>
+        <a href="/implementer.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white">
+          Implementation Guide
+        </a>
+      </div>
+    </div>
+  </section>
+
+  </main>
+
+  <!-- Footer -->
+  <footer class="bg-gray-900 text-gray-400 py-12" role="contentinfo">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div>
+          <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
+          <p class="text-sm">
+            World's first production implementation of architectural AI safety constraints for human agency preservation.
+          </p>
+        </div>
+        <div>
+          <h3 class="text-white font-semibold mb-4">Resources</h3>
+          <ul class="space-y-2 text-sm">
+            <li><a href="/docs.html" class="hover:text-white transition">Documentation</a></li>
+            <li><a href="/architecture.html" class="hover:text-white transition">System Architecture</a></li>
+            <li><a href="/researcher.html" class="hover:text-white transition">For Researchers</a></li>
+            <li><a href="/implementer.html" class="hover:text-white transition">For Implementers</a></li>
+            <li><a href="/leader.html" class="hover:text-white transition">For Leaders</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="text-white font-semibold mb-4">Community</h3>
+          <ul class="space-y-2 text-sm">
+            <li><a href="/media-inquiry.html" class="hover:text-white transition">Media Inquiries</a></li>
+            <li><a href="/case-submission.html" class="hover:text-white transition">Submit Case Study</a></li>
+            <li><a href="/blog.html" class="hover:text-white transition">Blog</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="text-white font-semibold mb-4">Support This Work</h3>
+          <ul class="space-y-2 text-sm">
+            <li><a href="/koha.html" class="hover:text-white transition">Make a Donation</a></li>
+            <li><a href="/koha/transparency.html" class="hover:text-white transition">Transparency Dashboard</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
+        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
+        <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
+      </div>
+    </div>
+  </footer>
+
+</body>
+</html>

public/index.html

@@ -44,8 +44,8 @@
           regardless of capability level
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
-          <a href="/demos/tractatus-demo.html" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
-            See Interactive Demo
+          <a href="/architecture.html" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
+            System Architecture
           </a>
           <a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition">
             Read Documentation
@@ -73,7 +73,7 @@
   </section>
 
   <!-- Three Audience Paths -->
-  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 pt-24">
+  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 pt-32">
     <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
       We recognize this is one small step in addressing AI safety challenges. Explore the framework through the lens that resonates with your work.
     </p>
@@ -81,11 +81,11 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 
       <!-- Researcher Path -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift relative group">
+      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
         <!-- Tooltip -->
-        <div class="absolute -top-16 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center">
+        <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
           For AI safety researchers, academics, and scientists investigating LLM failure modes and governance architectures
-          <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
+          <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
         </div>
 
         <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
@@ -124,11 +124,11 @@
       </div>
 
       <!-- Implementer Path -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift relative group">
+      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
         <!-- Tooltip -->
-        <div class="absolute -top-16 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center">
+        <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
           For software engineers, ML engineers, and technical teams building production AI systems
-          <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
+          <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
         </div>
 
         <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
@@ -167,11 +167,11 @@
       </div>
 
       <!-- Leader Path -->
-      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift relative group">
+      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-visible hover-lift relative group">
         <!-- Tooltip -->
-        <div class="absolute -top-16 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center">
+        <div class="absolute bottom-full mb-4 left-1/2 transform -translate-x-1/2 bg-gray-900 text-white text-sm rounded-lg px-4 py-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 w-64 text-center shadow-xl">
           For AI executives, research directors, startup founders, and strategic decision makers setting AI safety policy
-          <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
+          <div class="absolute top-full left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-2 h-2 bg-gray-900"></div>
         </div>
 
         <div class="bg-gradient-to-r from-amber-500 to-orange-600 p-6">
@@ -203,7 +203,7 @@
               <span class="text-gray-700">Competitive advantage analysis</span>
             </li>
           </ul>
-          <a href="/leader.html" class="block w-full text-center bg-amber-700 text-white py-2 rounded-lg hover:bg-amber-800 transition font-medium">
+          <a href="/leader.html" class="block w-full text-center bg-amber-600 text-white py-3 rounded-lg hover:bg-amber-700 transition font-semibold">
             View Leadership Resources
           </a>
         </div>