DEV Community

Cover image for # I Spent Weeks Designing Two Interface Systems That Don't Exist Yet — Here's the Full Technical Breakdown (with working HTML demo)
PEACEBINFLOW
PEACEBINFLOW

Posted on

# I Spent Weeks Designing Two Interface Systems That Don't Exist Yet — Here's the Full Technical Breakdown (with working HTML demo)

#ai #webdev #mathematics #emergence

Tags: #design #mathematics #ai #interfacedesign #generative #emergence #javascript #webdev #creativity #simulation

Every few years, something shifts in how humans talk to computers.

CLI gave way to GUI. GUI gave way to touch. Touch gave way to voice. Each revolution removed one layer of abstraction between human intention and machine execution.

I think the next layer to go is objects themselves.

What follows is a full technical breakdown of two interface systems I've been designing — the Mathematical Field Interface (MFI) and the Generative Design Interface (GDI) — built on a single radical thesis: patterns, not buttons, are the fundamental primitive of intelligent interfaces.

At the end I'm dropping a fully working single-file HTML demo you can open in your browser right now. No framework. No build step. No install. Just open it.

The Core Thesis

Every interface we use today — Photoshop, MATLAB, Figma, Excel — operates on the same underlying model:

User → selects object → issues command → machine executes → result
Enter fullscreen mode Exit fullscreen mode

You click a shape. You move it. You click an equation. You solve it. The machine is passive. It waits for your commands and executes them exactly. You get what you ask for and nothing more.

This paradigm has served us incredibly well. But it has a ceiling.

The ceiling is this: you can only discover what you already know to look for.

When your interface is a command executor, exploration is limited by your prior knowledge. You can't find what you don't know to ask.

The alternative — what I've been calling Observational Computing — flips this:

User shapes conditions → field responds → patterns emerge → AI observes → system evolves → user discovers
Enter fullscreen mode Exit fullscreen mode

You don't command. You cultivate. The way a physicist manipulates fields rather than particles. The way a gardener shapes environments rather than placing each leaf.

The output surprises you. That's the point.

Why Now

Three things converged to make this timing right:

1. AI is finally good enough to be a genuine scientific collaborator, not just a search engine or autocomplete. A system that can actually tell you whether an equation converges, what physical system a visual pattern obeys, or what mathematical structure generated a design — that's new.

2. Field-based computation is not science fiction. Conway's Game of Life generates what look like organisms from 3 rules. Wolfram's Rule 110 is Turing-complete from a 1D cellular automaton. Turing's reaction-diffusion equations explain leopard spots, zebra stripes, and coral patterns — purely from simple field interactions. Complexity doesn't have to be built. It can be grown.

3. The hardware finally supports it. GPU-accelerated field simulation at interactive frame rates, in the browser, is real. WebGL and WebGPU make it accessible. You don't need a research lab anymore.

WHITEPAPER 1: Mathematical Field Interface (MFI)

The Problem With Math Software Today

MATLAB, Mathematica, Wolfram Alpha — these are extraordinary tools. But they share a fundamental limitation: equations are strings. You input them, they compute, they return results. The equation itself has no memory, no awareness of other equations, no ability to interrogate data or generate hypotheses.

Every session starts from zero. Every connection between equations exists only in the researcher's head. The software stores nothing about the relationships between mathematical objects.

MFI treats equations as first-class computational citizens. Not strings. Not functions. Living state objects embedded in a shared field.

The Equation Object Model

Here's the core data structure:

class EquationObject:
    # Identity
    id: uuid
    expression: "ax² + bx + c"
    type: "polynomial"
    degree: 2

    # Live state
    parameters: {"a": 2, "b": -3, "c": 1}
    state: "active"  # | dormant | evolving
    stability: 0.87

    # Relational awareness
    dependencies: ["eq_042", "dataset_09"]
    queries_received: []
    discoveries: []
Enter fullscreen mode Exit fullscreen mode

What makes this different from a math object in any existing system: the dependencies, queries_received, and discoveries fields. This equation knows what it's connected to. It logs what the AI found in it. It accumulates discovery history across sessions.

The system never forgets a connection it made. The longer you use it, the smarter it gets.

The Five-Layer Architecture 

Layer 1: Data Layer
    symbolic formulas, datasets, mathematical relationships

Layer 2: Mathematical Object Layer
    symbolic parsing → structural decomposition → dependency graphs

Layer 3: Pattern Engine
    cross-equation analysis, similarity scoring, topology mapping
    Example: Fourier Transform ↔ Signal Processing
             Differential Equations ↔ Fluid Dynamics

Layer 4: Dual AI Layer
    Internal AI — probes equations from within
    External AI — queries equations from outside with real datasets

Layer 5: Interface Layer
    Equation topology map, parameter fields, transformation graph
Enter fullscreen mode Exit fullscreen mode

The Dual AI Layer — This Is Where It Gets Interesting

Most AI-augmented math tools have one AI: you ask it something, it answers. MFI runs two AI agents simultaneously, permanently, with fundamentally different vantage points.

Internal AI lives inside the mathematical structures. It continuously probes equations without being asked:

internal_ai.probe(wave_equation)
→ Convergence test: PASSES (δ=0.003)
→ Structural match: Legendre P₂ (94% similarity)
→ Eigenvalue spectrum: stable
→ Suggested transform: Fourier → frequency domain
→ Related discovery: resonance with eq_071 (flagged)
Enter fullscreen mode Exit fullscreen mode

External AI operates from outside — bringing real-world datasets to bear:

external_ai.query(navier_stokes, fluid_flow_dataset)
→ Loading fluid_flow_dataset_9.csv
→ Fitting ρ(∂v/∂t + v·∇v) = -∇p + μ∇²v
→ R² score: 0.9934
→ Turbulence regime detected at t=47s
⚠ Boundary condition anomaly: zone_C
→ Recommend: add viscosity correction term
Enter fullscreen mode Exit fullscreen mode

The internal AI asks: what is this equation? The external AI asks: what does this equation explain? Together they triangulate meaning from both sides.

A Real Walkthrough: Physics Research

Say you're studying plasma dynamics. You load 10 governing PDEs into the field.

  1. Ingestion — MFI parses each into equation objects, detects types (hyperbolic, parabolic, elliptic), builds dependency graph automatically
  2. Field placement — topology engine positions equations relative to each other by structural similarity. Your plasma equations automatically cluster near Maxwell's equations and MHD models from previous sessions
  3. AI interrogation begins — both agents wake. Internal probes each equation for convergence zones and instabilities. External scans your uploaded plasma dataset
  4. Pattern emergence — the pattern engine flags: equation 7 and equation 3 share a mathematical ancestry with a fluid dynamics model loaded six months ago. This connection was not obvious. The system surfaces it
  5. Discovery crystallization — high-confidence findings are promoted to the discovery layer with confidence scores, novelty ratings, and suggested next steps
  6. Field evolution — the mathematical field is now richer than before you started. The relationships it discovered persist. Your next session inherits this intelligence

Over months, the field becomes a personal mathematical knowledge graph that grows exponentially more useful.

The API 

# Apply an equation to a dataset
apply_equation(
    dataset="fluid_flow_data",
    equation="navier_stokes",
    ai_mode="internal+external",
    discover=True
)

# Query the pattern engine
pattern_engine.find_relatives(
    equation="wave_eq_042",
    similarity_threshold=0.8,
    domains=["physics", "signal_processing"]
)

# Run autonomous exploration
mfi.explore_autonomous(
    seed_equations=["riemann_zeta", "euler_product"],
    duration_hours=72,
    output="discovery_log"
)
Enter fullscreen mode Exit fullscreen mode

Long-Term Vision: Autonomous Theorem Discovery

In fully autonomous mode, MFI could seed itself with open mathematical problems — say, the Millennium Prize Problems — and explore the equation space for days. Not solving them (yet), but building a map of the territory: which approaches share structural properties, which transforms reveal hidden symmetries, which parameter regimes produce interesting behavior.

The AI doesn't replace the mathematician. It does the exhausting combinatorial work so the mathematician can focus on the creative leaps.

WHITEPAPER 2: Generative Design Interface (GDI)

The Problem With Design Tools Today

Photoshop manipulates pixels. Figma arranges objects. Both are extraordinary. Both share the same ceiling: you can only make what you can manually construct.

The creative process in both tools is fundamentally additive and manual. You place a shape. You move it. You adjust it. The tool executes your commands. The design is exactly what you built — no more.

This is fine for precise execution of a pre-formed vision. It's limiting for exploration, for discovery, for finding the design that doesn't yet exist in your mind.

GDI replaces objects with generative fields. Instead of placing a circle, you adjust a symmetry parameter. Instead of choosing a color, you set a color field gradient. Instead of drawing a line, you increase complexity in a region of the structural field.

The design emerges. You discover it rather than construct it.

From Layers to Fields

Traditional design: layers stack on top of each other. Each layer is a manual construction.

GDI: fields interact continuously. Each field is a generative condition.

Color field      → governs hue/saturation relationships across the canvas
Structure field  → governs geometric organization and density
Lighting field   → governs luminosity gradients and contrast zones
Texture field    → governs surface quality and noise characteristics
Temporal field   → governs how the design evolves through time (for motion)
Enter fullscreen mode Exit fullscreen mode

These fields interact. Changing the symmetry parameter in the structure field automatically creates coherent changes in the color field. The system maintains visual consistency — something Photoshop requires enormous manual discipline to achieve.

The Three-Engine Stack 

Engine 1: Pattern Engine
    Generates visual structures from primitive fields
    Primitives: symmetry, noise, fractals, geometry, color fields

Engine 2: AI Design Agent
    Transforms patterns into meaningful compositions
    Capabilities: layout analysis, aesthetic scoring, style transfer,
                  composition refinement, intent interpretation

Engine 3: Visual Field System
    Real-time field interaction management
    Outputs: raster, vector, animation keyframes, motion paths
Enter fullscreen mode Exit fullscreen mode

The AI Feedback Loop

After each field configuration, the AI Design Agent scores the output:

{
  "composition_score": 87,
  "contrast_balance": 74,
  "visual_harmony": 92,
  "novelty_index": 61,
  "suggestions": [
    "Increase symmetry to 0.9 for stronger focal point",
    "Reduce complexity in upper-right quadrant",
    "Color field shift: +15° hue rotation increases tension"
  ]
}
Enter fullscreen mode Exit fullscreen mode

This isn't just a score — it's actionable guidance. The AI tells you which field parameter to change and why. It's a creative director who never gets tired.

The API 

generate_design(
    style="cyberpunk",
    complexity=0.7,
    symmetry=0.5,
    temporal=False  # set True for motion output
)

# Apply brand DNA to a design field
apply_brand_dna(
    brand_id="startup_fintech_01",
    trust_weight=0.8,
    innovation_weight=0.6
)

# Generate a full environment concept set
generate_environment_batch(
    game_style="dark_fantasy",
    biome_list=["volcanic", "arctic", "deep_forest", "ruins"],
    consistency_lock=True  # ensures visual coherence across all
)
Enter fullscreen mode Exit fullscreen mode

Real Walkthrough: Brand Identity in 7 Steps

  1. Input brand intent: ["precision", "trust", "future"]
  2. AI agent interprets intent into field parameters: symmetry=0.85, complexity=0.3, color_field=0.4 (blue-teal spectrum)
  3. Pattern engine generates geometric primitives matching the trust profile
  4. Color field emerges from trust palette automatically
  5. AI scores composition: harmony 94%, contrast 81%
  6. Designer adjusts: symmetry 0.85 → 0.6 (wants less rigidity)
  7. Unique logomark crystallizes from the shifted field. It didn't exist before step 6. It couldn't have been designed manually with the same speed.

GDI vs The Existing Landscape

Capability Photoshop Figma Midjourney GDI
Design primitive Pixels/layers Objects/frames Text prompt Pattern fields
Interaction model Manual manipulation Object drag/snap One-shot generation Continuous field shaping
AI role Filters/actions Auto-layout assist Core generator Co-creative agent
Design memory None Component library None Persistent aesthetic intelligence
Motion/time Timeline keyframes Prototyping only Static Temporal fields
Learning from user No No No Yes — session + cross-session

The key differentiator from Midjourney (the closest existing tool): GDI is interactive and continuous. You're in a live feedback loop with a generative system, not submitting prompts and hoping. The creative intelligence persists between sessions. It learns your aesthetic. It gets better at understanding your intent the more you use it.

THE COMBINED PLATFORM

When MFI and GDI share a common Pattern Intelligence Core, something new becomes possible: the boundary between mathematics and design dissolves.

Math → Visual

A Fourier transform running in MFI produces a frequency spectrum. GDI receives it as a pattern field seed. The frequency components become symmetry parameters. Amplitude becomes contrast. Phase becomes spatial rotation.

The visual output is the mathematics, not just a chart of it. Change the equation in real time — the design changes in real time. The designer and mathematician are looking at the same object from different sides.

Visual → Math

A designer creates an organic visual pattern using GDI. MFI analyzes its structure and discovers: this pattern obeys Turing's reaction-diffusion equations — the same mathematics governing leopard spots and zebra stripes.

The designer didn't know this. The system surfaces it. Now the designer has access to an entire mathematical family of related patterns, with precise parameter control. A purely aesthetic decision becomes a mathematical exploration.

What This Platform Replaces

Software Category Current Tools PIP Equivalent The Actual Advantage
Mathematics MATLAB, Mathematica MFI — live equation field Equations that connect and discover
Graphic design Photoshop, Illustrator GDI — pattern field design Emergence replaces manual construction
UI/UX design Figma, Sketch GDI — generative UI fields Design systems that self-maintain consistency
Data analysis Excel, Tableau MFI + Pattern engine Equations that probe data continuously
Physical simulation Ansys, COMSOL MFI + Universe engine Field-native simulation from first principles
Motion graphics After Effects, Cinema 4D GDI temporal field Motion that feels alive, not keyframed

THE UNIVERSE ENGINE: The Philosophy Made Literal

To make the core philosophy concrete, I built a minimal universe engine that demonstrates the principle in its purest form.

No objects. Only fields.

class Universe:
    def __init__(self):
        self.gravity     = np.random.rand(W, H)
        self.charge      = np.random.rand(W, H)
        self.temperature = np.random.rand(W, H)
        self.energy      = np.random.rand(W, H)

    def update(self):
        self.gravity = self.diffuse(self.gravity)
        self.charge  = self.diffuse(self.charge)

        interaction = self.gravity * self.charge

        self.temperature += interaction * 0.01
        self.energy      += self.temperature * 0.005

        self.temperature *= 0.999  # entropy
        self.energy      *= 0.999  # entropy
Enter fullscreen mode Exit fullscreen mode

That's the entire physics engine. Four fields. Three rules. Diffusion, interaction, decay.

"Objects" — the patterns that look like particles, clusters, proto-structures — are not stored anywhere in memory. They're detected by a pattern observer:

class PatternDetector:
    def detect(self, energy):
        threshold = np.mean(energy) + np.std(energy)
        return [(x, y) for x in range(W) for y in range(H)
                if energy[x, y] > threshold]
Enter fullscreen mode Exit fullscreen mode

A cluster is a region where energy exceeds one standard deviation above the mean. It's not a thing. It's a condition. The moment the field configuration no longer meets the condition, the "object" ceases to exist — no deletion required.

An Observer AI watches the field:

class ObserverAI:
    def analyze(self, clusters):
        n = len(clusters)
        if   n > 200: return "matter forming"
        elif n > 100: return "stable patterns"
        elif n > 20:  return "sparse structure"
        else:         return "entropy dominant"
Enter fullscreen mode Exit fullscreen mode

The interface for this system isn't a GUI. It's a physicist's console. You don't click objects. You adjust field parameters and observe emergence. You inject energy and watch propagation. You tune decay rates and observe stability.

This is Observational Computing:

Traditional:  User → Command → Machine → Result
Observational: User shapes conditions → Field responds → Patterns emerge → User discovers
Enter fullscreen mode Exit fullscreen mode

The under-1000-line prototype:

  • ~500 lines: universe engine
  • ~300 lines: visualization layer
  • ~200 lines: observer AI + interface

IMPLEMENTATION ROADMAP

For anyone who wants to actually build this — here's how I'd approach it in phases.

Phase 1: Core Engine (~2 months)

  • Field data structure (2D/3D numpy arrays or GPU buffers)
  • Diffusion and interaction rules
  • Pattern detector (clustering above statistical threshold)
  • Basic visualization (WebGL or Canvas 2D)

Phase 2: MFI Prototype (~3 months)

  • Symbolic math parser (SymPy or MathJS)
  • Equation object model with state management
  • Simple internal AI (convergence checks, type detection)
  • Basic equation topology visualization

Phase 3: GDI Prototype (~3 months)

  • Pattern primitive library (symmetry, noise, fractal generators)
  • Real-time field parameter controls
  • AI aesthetic scoring (train on design datasets or use existing vision models)
  • Export pipeline (PNG, SVG, video frame sequence)

Phase 4: Dual AI Layer (~4 months)

  • External AI integration (LLM + dataset connector)
  • Internal AI reasoning (symbolic + neural hybrid)
  • Cross-session memory (equation discovery persistence)
  • Pattern engine (cross-equation similarity and topology)

Phase 5: Combined Platform

  • Shared Pattern Intelligence Core
  • MFI ↔ GDI translation layer (math → visual, visual → math)
  • Autonomous exploration mode
  • Collaborative multi-user fields

THE DEMO

I built a working single-file HTML implementation of all of this. It includes:

  • Live field emergence simulation on the hero canvas — a real 80×80 field simulation with gravity, charge, temperature, and energy fields running at ~60fps with real-time cluster detection and Observer AI state output
  • Full MFI whitepaper with interactive architecture diagrams, dual AI terminal simulations, 3 complete use case walkthroughs each with 7-step flows, and the 6-step "how MFI learns from use" accordion
  • Live GDI design field — 4 pattern modes (Geometric, Organic, Noise Field, Fractal), 4 real-time parameter controls, live AI aesthetic scoring
  • Combined platform ecosystem map with the full software replacement table
  • Universe engine demo — the 100×100 field simulation with all four visualization modes, energy injection, Big Bang reset, and Observer AI state detection
  • All source code annotated and readable

Zero dependencies. Zero build step. One file. Open in browser.

<!-- The entire platform. Save as .html, open, run. -->
Enter fullscreen mode Exit fullscreen mode

[HTML FILE ATTACHED BELOW / IN COMMENTS]

What I'm Looking For

This is a design document and proof-of-concept, not a finished product. I'm genuinely interested in:

Technical feedback

  • Is the field simulation architecture sound for production scale?
  • What's the right stack for the mathematical object layer? (I'm thinking SymPy + a graph DB for relationships)
  • How would you approach the AI scoring layer for GDI — fine-tuned vision model, CLIP embeddings, or something else?

Conceptual challenges

  • What are the failure modes of Observational Computing as an interaction paradigm? When does "shape conditions, observe emergence" break down?
  • Is there a domain where the pattern-field approach is fundamentally wrong?
  • Has anyone built something close to this that I should know about?

Collaboration
If you're working on AI-native interfaces, generative systems, mathematical visualization, or field-based computation — I want to talk. Specifically interested in anyone who's worked on:

  • Livecoding/reactive math environments (looking at you, Observable, Penrose, Mafs)
  • Procedural generation for games or design
  • AI co-creativity tools
  • Artificial life / emergence systems

Final Thought

The deepest insight behind both systems is this:

Complexity doesn't have to be built. It can be grown.

Conway's Game of Life has 3 rules. Turing's reaction-diffusion has 2 equations. The universe — as far as we can tell — has a surprisingly small number of fundamental laws from which everything emerges.

We've been building interfaces on the assumption that you have to manually construct everything you want. But if the right field conditions produce the right patterns automatically — if design can emerge from mathematical structure, if mathematical structure can crystallize from visual exploration — then the role of the interface changes completely.

You stop making things. You start shaping reality conditions.

That's the bet.

If you want to see the full working demo with live simulations, architecture diagrams, complete walkthroughs, and annotated source code — the HTML file is below. Single file, open in any browser.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pattern Intelligence Platform — MFI + GDI</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&family=Crimson+Pro:ital,wght@0,300;0,600;1,300&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #050508;
    --bg2: #0a0a12;
    --bg3: #0f0f1a;
    --panel: #12121f;
    --border: #1e1e35;
    --border2: #2a2a4a;
    --accent1: #00f5c4;
    --accent2: #7c3aff;
    --accent3: #ff6b35;
    --accent4: #f0c040;
    --text: #e8e8f0;
    --text2: #9090b0;
    --text3: #5050708;
    --glow1: rgba(0,245,196,0.15);
    --glow2: rgba(124,58,255,0.15);
    --glow3: rgba(255,107,53,0.15);
  }

  * { margin:0; padding:0; box-sizing:border-box; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* ── GLOBAL NOISE OVERLAY ── */
  body::before {
    content:'';
    position:fixed;
    inset:0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:9999;
    opacity:0.4;
  }

  /* ── NAV ── */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(5,5,8,0.92);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 0 40px;
    display: flex;
    align-items: center;
    height: 56px;
    gap: 0;
  }

  .nav-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--accent1);
    margin-right: 48px;
    text-shadow: 0 0 20px var(--accent1);
  }

  .nav-tabs {
    display: flex;
    gap: 2px;
    flex: 1;
  }

  .nav-tab {
    padding: 8px 20px;
    cursor: pointer;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text2);
    border: 1px solid transparent;
    transition: all 0.2s;
    background: none;
    font-family: 'Space Mono', monospace;
  }

  .nav-tab:hover { color: var(--text); border-color: var(--border2); }
  .nav-tab.active { color: var(--accent1); border-color: var(--accent1); background: var(--glow1); }

  .nav-badge {
    font-size: 9px;
    padding: 2px 6px;
    background: var(--accent2);
    color: white;
    border-radius: 2px;
    margin-left: 8px;
    vertical-align: middle;
  }

  /* ── PAGES ── */
  .page { display: none; }
  .page.active { display: block; }

  /* ── HERO ── */
  .hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    overflow: hidden;
  }

  .hero-left {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--border);
  }

  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent1);
    margin-bottom: 24px;
  }

  .hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(56px, 6vw, 88px);
    line-height: 0.92;
    letter-spacing: 2px;
    margin-bottom: 32px;
  }

  .hero-title .line1 { color: var(--text); }
  .hero-title .line2 { color: var(--accent1); text-shadow: 0 0 40px var(--accent1); }
  .hero-title .line3 { color: var(--accent2); text-shadow: 0 0 40px var(--accent2); }

  .hero-desc {
    font-family: 'Crimson Pro', serif;
    font-size: 17px;
    color: var(--text2);
    max-width: 480px;
    margin-bottom: 40px;
    line-height: 1.8;
    font-style: italic;
  }

  .hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 12px 28px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
  }

  .btn-primary {
    background: var(--accent1);
    color: var(--bg);
  }
  .btn-primary:hover { box-shadow: 0 0 30px var(--accent1); }

  .btn-secondary {
    background: transparent;
    color: var(--accent2);
    border: 1px solid var(--accent2);
  }
  .btn-secondary:hover { background: var(--glow2); }

  .btn-ghost {
    background: transparent;
    color: var(--text2);
    border: 1px solid var(--border2);
  }
  .btn-ghost:hover { color: var(--text); border-color: var(--text2); }

  /* ── FIELD CANVAS (hero right) ── */
  .hero-right {
    position: relative;
    overflow: hidden;
  }

  #fieldCanvas {
    width: 100%;
    height: 100%;
    display: block;
  }

  .field-overlay {
    position: absolute;
    bottom: 32px;
    right: 32px;
    background: rgba(10,10,18,0.85);
    border: 1px solid var(--border2);
    padding: 16px 20px;
    min-width: 200px;
  }

  .field-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11px;
  }

  .field-stat .label { color: var(--text2); }
  .field-stat .val { color: var(--accent1); }

  /* ── SECTION GENERIC ── */
  .section {
    padding: 80px 60px;
    border-top: 1px solid var(--border);
  }

  .section-eyebrow {
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: 16px;
  }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: 2px;
    margin-bottom: 24px;
  }

  .section-body {
    font-family: 'Crimson Pro', serif;
    font-size: 16px;
    color: var(--text2);
    max-width: 680px;
    line-height: 1.9;
  }

  /* ── PARADIGM SHIFT GRID ── */
  .paradigm-grid {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 0;
    margin: 48px 0;
    border: 1px solid var(--border);
  }

  .paradigm-col {
    padding: 32px;
  }

  .paradigm-col.old { border-right: 1px solid var(--border); }

  .paradigm-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent1);
  }

  .paradigm-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  .paradigm-label.old-label { color: var(--text2); }
  .paradigm-label.new-label { color: var(--accent1); }

  .paradigm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 14px;
    font-size: 12px;
  }

  .paradigm-item.old-item { 
    background: rgba(255,255,255,0.02); 
    color: var(--text2);
    text-decoration: line-through;
    text-decoration-color: rgba(255,100,100,0.4);
  }

  .paradigm-item.new-item { 
    background: var(--glow1); 
    color: var(--accent1);
    border-left: 2px solid var(--accent1);
  }

  /* ── ARCHITECTURE DIAGRAM ── */
  .arch-diagram {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 40px 0;
  }

  .arch-layer {
    background: var(--panel);
    padding: 24px 20px;
    position: relative;
  }

  .arch-layer-num {
    font-size: 32px;
    font-family: 'Bebas Neue', sans-serif;
    color: var(--border2);
    margin-bottom: 8px;
  }

  .arch-layer-name {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent1);
    margin-bottom: 12px;
  }

  .arch-layer-desc {
    font-size: 11px;
    color: var(--text2);
    line-height: 1.7;
  }

  .arch-layer-items {
    margin-top: 12px;
  }

  .arch-item {
    font-size: 10px;
    color: var(--text2);
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
  }

  .arch-item::before {
    content: '→ ';
    color: var(--accent2);
  }

  /* ── CODE BLOCK ── */
  .code-block {
    background: var(--bg2);
    border: 1px solid var(--border2);
    border-left: 3px solid var(--accent2);
    padding: 24px;
    margin: 24px 0;
    overflow-x: auto;
    font-size: 12px;
    line-height: 1.8;
  }

  .code-block .kw { color: var(--accent2); }
  .code-block .str { color: var(--accent1); }
  .code-block .num { color: var(--accent3); }
  .code-block .cmt { color: var(--text2); font-style: italic; }
  .code-block .fn { color: var(--accent4); }

  /* ── USE CASE CARDS ── */
  .usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 40px 0;
  }

  .usecase-card {
    background: var(--panel);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
  }

  .usecase-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
  }

  .usecase-card.c1::before { background: var(--accent1); }
  .usecase-card.c2::before { background: var(--accent2); }
  .usecase-card.c3::before { background: var(--accent3); }

  .usecase-icon {
    font-size: 28px;
    margin-bottom: 16px;
  }

  .usecase-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .usecase-desc {
    font-family: 'Crimson Pro', serif;
    font-size: 15px;
    color: var(--text2);
    line-height: 1.8;
    margin-bottom: 16px;
  }

  .usecase-steps {
    list-style: none;
    margin-top: 16px;
  }

  .usecase-steps li {
    font-size: 11px;
    color: var(--text2);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
  }

  .step-num {
    color: var(--accent1);
    font-size: 10px;
    min-width: 20px;
  }

  /* ── LIVE DEMO ── */
  .demo-container {
    border: 1px solid var(--border2);
    background: var(--bg2);
    margin: 40px 0;
    overflow: hidden;
  }

  .demo-header {
    padding: 14px 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text2);
  }

  .demo-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent1);
    box-shadow: 0 0 8px var(--accent1);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  .demo-body {
    display: grid;
    grid-template-columns: 1fr 280px;
  }

  .demo-canvas-wrap {
    position: relative;
    height: 400px;
    background: var(--bg);
  }

  #demoCanvas {
    width: 100%;
    height: 100%;
  }

  .demo-controls {
    padding: 20px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ctrl-group {
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
  }

  .ctrl-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 8px;
  }

  .ctrl-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 2px;
    background: var(--border2);
    outline: none;
    margin: 8px 0;
  }

  .ctrl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: var(--accent1);
    cursor: pointer;
    border-radius: 0;
  }

  .ctrl-val {
    font-size: 11px;
    color: var(--accent1);
    text-align: right;
  }

  .ctrl-btn {
    padding: 8px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text2);
    width: 100%;
    transition: all 0.2s;
  }

  .ctrl-btn:hover { border-color: var(--accent1); color: var(--accent1); }
  .ctrl-btn.active { border-color: var(--accent1); color: var(--accent1); background: var(--glow1); }

  .stats-panel {
    padding: 16px;
    background: var(--panel);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
  }

  .stat-box {
    background: var(--panel);
    padding: 12px 16px;
    text-align: center;
  }

  .stat-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--accent1);
    line-height: 1;
    margin-bottom: 4px;
  }

  .stat-lbl {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text2);
  }

  /* ── ECOSYSTEM DIAGRAM ── */
  .ecosystem {
    margin: 40px 0;
    border: 1px solid var(--border);
    background: var(--bg2);
    padding: 40px;
    position: relative;
    overflow: hidden;
  }

  .eco-center {
    text-align: center;
    margin-bottom: 40px;
  }

  .eco-badge {
    display: inline-block;
    padding: 10px 32px;
    border: 2px solid var(--accent1);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 4px;
    color: var(--accent1);
    text-shadow: 0 0 20px var(--accent1);
    background: var(--glow1);
    margin-bottom: 8px;
  }

  .eco-subtitle {
    font-size: 11px;
    color: var(--text2);
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .eco-rings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
  }

  .eco-ring {
    border: 1px solid var(--border2);
    padding: 24px;
    position: relative;
    background: var(--panel);
  }

  .eco-ring-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 12px;
  }

  .eco-ring-title.t1 { color: var(--accent1); }
  .eco-ring-title.t2 { color: var(--accent2); }
  .eco-ring-title.t3 { color: var(--accent3); }

  .eco-node {
    font-size: 11px;
    padding: 6px 10px;
    margin: 4px 0;
    border-left: 2px solid;
    background: rgba(255,255,255,0.02);
    color: var(--text2);
  }

  .eco-node.n1 { border-color: var(--accent1); }
  .eco-node.n2 { border-color: var(--accent2); }
  .eco-node.n3 { border-color: var(--accent3); }

  /* ── WALKTHROUGH ── */
  .walkthrough {
    margin: 40px 0;
  }

  .walk-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 24px;
    margin-bottom: 2px;
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 24px;
    position: relative;
    border-left: 3px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
  }

  .walk-step:hover, .walk-step.open {
    border-left-color: var(--accent1);
    background: var(--bg3);
  }

  .walk-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    color: var(--border2);
    line-height: 1;
  }

  .walk-step:hover .walk-num, .walk-step.open .walk-num { color: var(--accent1); }

  .walk-content h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 8px;
  }

  .walk-content p {
    font-family: 'Crimson Pro', serif;
    font-size: 15px;
    color: var(--text2);
    line-height: 1.8;
  }

  .walk-detail {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .walk-step.open .walk-detail { display: block; }

  /* ── GDI specific ── */
  #gdiCanvas {
    width: 100%;
    height: 400px;
    display: block;
    background: var(--bg);
  }

  /* ── COMBINED PLATFORM ── */
  .combined-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 40px 0;
  }

  .combined-half {
    background: var(--panel);
    padding: 40px;
  }

  .combined-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    letter-spacing: 3px;
    margin-bottom: 16px;
  }

  .combined-title.t1 { color: var(--accent1); }
  .combined-title.t2 { color: var(--accent3); }

  /* ── FLOW CHART ── */
  .flow {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 32px 0;
    overflow-x: auto;
  }

  .flow-node {
    padding: 12px 18px;
    border: 1px solid var(--border2);
    background: var(--bg2);
    font-size: 11px;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .flow-node.active { border-color: var(--accent1); color: var(--accent1); background: var(--glow1); }
  .flow-node.warm { border-color: var(--accent3); color: var(--accent3); background: var(--glow3); }
  .flow-node.purple { border-color: var(--accent2); color: var(--accent2); background: var(--glow2); }

  .flow-arrow {
    font-size: 14px;
    color: var(--text2);
    padding: 0 8px;
    flex-shrink: 0;
  }

  /* ── FOOTER ── */
  footer {
    padding: 40px 60px;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }

  .footer-col-title {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
  }

  .footer-link {
    font-size: 12px;
    color: var(--text2);
    display: block;
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.2s;
  }

  .footer-link:hover { color: var(--accent1); }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb { background: var(--border2); }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero-right { height: 300px; }
    .arch-diagram { grid-template-columns: 1fr 1fr; }
    .usecase-grid { grid-template-columns: 1fr; }
    .combined-grid { grid-template-columns: 1fr; }
    .eco-rings { grid-template-columns: 1fr; }
    .demo-body { grid-template-columns: 1fr; }
    footer { grid-template-columns: 1fr; }
    nav { padding: 0 20px; }
    .section { padding: 60px 24px; }
    .hero-left { padding: 60px 24px; }
  }

  /* ── HIGHLIGHT BOX ── */
  .highlight-box {
    border: 1px solid var(--accent4);
    background: rgba(240,192,64,0.05);
    padding: 24px 28px;
    margin: 24px 0;
    position: relative;
  }

  .highlight-box::before {
    content: '◆ KEY INSIGHT';
    position: absolute;
    top: -8px;
    left: 20px;
    background: var(--bg);
    padding: 0 8px;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--accent4);
  }

  .highlight-box p {
    font-family: 'Crimson Pro', serif;
    font-size: 16px;
    color: var(--accent4);
    line-height: 1.8;
    font-style: italic;
  }

  /* table */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 12px;
  }

  .data-table th {
    padding: 10px 16px;
    background: var(--panel);
    color: var(--accent1);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--border2);
  }

  .data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
    vertical-align: top;
  }

  .data-table tr:hover td { background: var(--bg3); color: var(--text); }

  /* tag */
  .tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 2px;
    margin: 2px;
  }

  .tag.green { background: rgba(0,245,196,0.1); color: var(--accent1); border: 1px solid rgba(0,245,196,0.2); }
  .tag.purple { background: rgba(124,58,255,0.1); color: var(--accent2); border: 1px solid rgba(124,58,255,0.2); }
  .tag.orange { background: rgba(255,107,53,0.1); color: var(--accent3); border: 1px solid rgba(255,107,53,0.2); }
  .tag.yellow { background: rgba(240,192,64,0.1); color: var(--accent4); border: 1px solid rgba(240,192,64,0.2); }

  /* terminal */
  .terminal {
    background: #010108;
    border: 1px solid var(--border2);
    padding: 20px 24px;
    font-size: 12px;
    margin: 24px 0;
    position: relative;
  }

  .terminal::before {
    content: '● ● ●';
    display: block;
    color: var(--border2);
    font-size: 10px;
    margin-bottom: 12px;
    letter-spacing: 4px;
  }

  .terminal .prompt { color: var(--accent1); }
  .terminal .output { color: var(--text2); }
  .terminal .highlight { color: var(--accent4); }
  .terminal .error { color: var(--accent3); }
  .terminal div { margin-bottom: 4px; }

  /* columns */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 32px 0;
  }

  @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

  /* connection line diagram */
  .conn-diagram {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 32px 0;
  }

  .conn-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border);
  }

  .conn-row:last-child { border-bottom: none; }

  .conn-label {
    width: 180px;
    padding: 14px 20px;
    font-size: 11px;
    letter-spacing: 1px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    color: var(--text2);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .conn-content {
    padding: 14px 20px;
    font-size: 11px;
    color: var(--accent1);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
</style>
</head>
<body>

<!-- NAV -->
<nav>
  <div class="nav-logo">PIP</div>
  <div class="nav-tabs">
    <button class="nav-tab active" onclick="showPage('home')">Overview</button>
    <button class="nav-tab" onclick="showPage('mfi')">MFI <span class="nav-badge">MATH</span></button>
    <button class="nav-tab" onclick="showPage('gdi')">GDI <span class="nav-badge">DESIGN</span></button>
    <button class="nav-tab" onclick="showPage('combined')">Combined Platform</button>
    <button class="nav-tab" onclick="showPage('universe')">Universe Engine</button>
  </div>
</nav>

<!-- ════════════════════════════════════════
     HOME PAGE
════════════════════════════════════════ -->
<div id="page-home" class="page active">

  <div class="hero">
    <div class="hero-left">
      <div class="hero-eyebrow">Pattern Intelligence Platform — v1.0</div>
      <div class="hero-title">
        <div class="line1">OBJECTS</div>
        <div class="line2">BECOME</div>
        <div class="line3">FIELDS</div>
      </div>
      <p class="hero-desc">
        Two next-generation interface systems built on a single radical thesis: 
        patterns — not buttons — are the fundamental objects of interaction. 
        Commands replaced by fields. Tools replaced by AI collaborators.
      </p>
      <div class="hero-ctas">
        <button class="btn btn-primary" onclick="showPage('mfi')">Explore MFI</button>
        <button class="btn btn-secondary" onclick="showPage('gdi')">Explore GDI</button>
        <button class="btn btn-ghost" onclick="showPage('universe')">Live Demo</button>
      </div>
    </div>
    <div class="hero-right">
      <canvas id="fieldCanvas"></canvas>
      <div class="field-overlay">
        <div class="field-stat"><span class="label">Field Mode</span><span class="val" id="fmode">Emergence</span></div>
        <div class="field-stat"><span class="label">Active Clusters</span><span class="val" id="fcluster">—</span></div>
        <div class="field-stat"><span class="label">Energy Density</span><span class="val" id="fenergy">—</span></div>
        <div class="field-stat"><span class="label">System State</span><span class="val" id="fstate">—</span></div>
      </div>
    </div>
  </div>

  <!-- PARADIGM SHIFT -->
  <div class="section">
    <div class="section-eyebrow">The Core Thesis</div>
    <div class="section-title">The Paradigm Shift</div>
    <p class="section-body">Every major interface revolution has redefined the relationship between human intention and machine execution. This platform proposes the next leap: from object manipulation to field orchestration.</p>

    <div class="paradigm-grid">
      <div class="paradigm-col old">
        <div class="paradigm-label old-label">Traditional Paradigm</div>
        <div class="paradigm-item old-item">📦 Objects as primary units</div>
        <div class="paradigm-item old-item">🖱 Commands as interactions</div>
        <div class="paradigm-item old-item">🔧 Tools as interface primitives</div>
        <div class="paradigm-item old-item">🗂 Layers as composition model</div>
        <div class="paradigm-item old-item">📊 Static equations</div>
        <div class="paradigm-item old-item">🎨 Manual shape manipulation</div>
      </div>
      <div class="paradigm-arrow">→</div>
      <div class="paradigm-col">
        <div class="paradigm-label new-label">Pattern Intelligence Paradigm</div>
        <div class="paradigm-item new-item">⚡ Patterns as primary units</div>
        <div class="paradigm-item new-item">🌊 Fields as interactions</div>
        <div class="paradigm-item new-item">🤖 AI agents as collaborators</div>
        <div class="paradigm-item new-item">🔬 Dynamic field composition</div>
        <div class="paradigm-item new-item">🧠 Living equation objects</div>
        <div class="paradigm-item new-item">✨ Generative design emergence</div>
      </div>
    </div>

    <div class="highlight-box">
      <p>The deepest shift is philosophical: you stop <em>making things</em> and start <em>shaping conditions</em> — the same way a physicist manipulates fields rather than particles, or a gardener cultivates environments rather than planting each leaf.</p>
    </div>

    <div class="two-col">
      <div>
        <div class="section-eyebrow" style="margin-bottom:12px">The Two Systems</div>
        <div class="conn-diagram">
          <div class="conn-row">
            <div class="conn-label">MFI</div>
            <div class="conn-content">Mathematical Field Interface — equations as living entities interacting with datasets and AI reasoning in real-time</div>
          </div>
          <div class="conn-row">
            <div class="conn-label">GDI</div>
            <div class="conn-content">Generative Design Interface — design emerges from procedural pattern fields, aesthetic constraints, and AI refinement loops</div>
          </div>
          <div class="conn-row">
            <div class="conn-label">Shared Core</div>
            <div class="conn-content">
              <span class="tag green">Pattern Engine</span>
              <span class="tag purple">Dual AI Layer</span>
              <span class="tag orange">Field System</span>
              <span class="tag yellow">Emergence Detection</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="section-eyebrow" style="margin-bottom:12px">Interface Evolution</div>
        <div style="margin-bottom: 16px;">
          <div class="flow" style="flex-wrap:wrap; gap: 4px;">
            <div class="flow-node">CLI<br><span style="font-size:9px;color:#5050a0">1970s</span></div>
            <div class="flow-arrow">→</div>
            <div class="flow-node">GUI<br><span style="font-size:9px;color:#5050a0">1980s</span></div>
            <div class="flow-arrow">→</div>
            <div class="flow-node">Touch<br><span style="font-size:9px;color:#5050a0">2007</span></div>
            <div class="flow-arrow">→</div>
            <div class="flow-node">Voice<br><span style="font-size:9px;color:#5050a0">2010s</span></div>
            <div class="flow-arrow">→</div>
            <div class="flow-node active">Field UI<br><span style="font-size:9px">Next</span></div>
          </div>
        </div>
        <p style="font-family: 'Crimson Pro', serif; font-size:15px; color: var(--text2); line-height:1.8;">Each revolution removed a layer of abstraction between human intent and machine action. Field UI removes the layer of objects entirely — you interact with reality conditions directly.</p>
      </div>
    </div>
  </div>

</div>

<!-- ════════════════════════════════════════
     MFI PAGE
════════════════════════════════════════ -->
<div id="page-mfi" class="page">

  <div class="section" style="padding-top:60px;">
    <div class="section-eyebrow">Whitepaper 01 — Mathematical Field Interface</div>
    <div class="section-title">MFI: EQUATIONS AS<br>LIVING ENTITIES</div>
    <p class="section-body">A computational environment where mathematical expressions are treated as interactive field objects rather than static symbolic statements. Equations continuously interact with datasets, parameter spaces, and dual AI reasoning engines — creating a bidirectional intelligence loop.</p>

    <div style="margin-top:24px;">
      <span class="tag green">Symbolic AI</span>
      <span class="tag purple">Pattern Recognition</span>
      <span class="tag orange">Dual AI Layer</span>
      <span class="tag yellow">Dynamic Fields</span>
    </div>
  </div>

  <!-- CORE EQUATION FLOW -->
  <div class="section" style="border-top: 1px solid var(--border);">
    <div class="section-eyebrow">Core Principle</div>
    <div class="section-title">The Computation Loop</div>

    <div class="two-col">
      <div>
        <p style="font-size:11px; color: var(--text2); margin-bottom:12px; letter-spacing:2px; text-transform:uppercase;">TRADITIONAL</p>
        <div class="flow" style="flex-wrap:wrap; gap:4px;">
          <div class="flow-node">User</div>
          <div class="flow-arrow">→</div>
          <div class="flow-node">Equation</div>
          <div class="flow-arrow">→</div>
          <div class="flow-node">Result</div>
        </div>
      </div>
      <div>
        <p style="font-size:11px; color: var(--accent1); margin-bottom:12px; letter-spacing:2px; text-transform:uppercase;">MFI</p>
        <div class="flow" style="flex-wrap:wrap; gap:4px;">
          <div class="flow-node active">Dataset</div>
          <div class="flow-arrow">↔</div>
          <div class="flow-node active">Equation Objects</div>
          <div class="flow-arrow">↔</div>
          <div class="flow-node active">AI Reasoning</div>
        </div>
      </div>
    </div>

    <div class="highlight-box" style="margin-top:32px;">
      <p>Equations are not computed — they <em>live</em>. They sense their environment (datasets), respond to queries (AI), evolve their parameters (pattern engine), and emit discoveries (emergence layer). The system is perpetually awake.</p>
    </div>
  </div>

  <!-- ARCHITECTURE -->
  <div class="section">
    <div class="section-eyebrow">System Architecture</div>
    <div class="section-title">Five-Layer Stack</div>

    <div class="arch-diagram">
      <div class="arch-layer">
        <div class="arch-layer-num">01</div>
        <div class="arch-layer-name">Data Layer</div>
        <div class="arch-layer-desc">Persistent knowledge store</div>
        <div class="arch-layer-items">
          <div class="arch-item">Symbolic formulas</div>
          <div class="arch-item">Dataset registry</div>
          <div class="arch-item">Transform history</div>
          <div class="arch-item">Relation graph</div>
        </div>
      </div>
      <div class="arch-layer">
        <div class="arch-layer-num">02</div>
        <div class="arch-layer-name">Math Object Layer</div>
        <div class="arch-layer-desc">Equations → live entities</div>
        <div class="arch-layer-items">
          <div class="arch-item">Symbolic parser</div>
          <div class="arch-item">Structural decomp</div>
          <div class="arch-item">Dependency graph</div>
          <div class="arch-item">State manager</div>
        </div>
      </div>
      <div class="arch-layer">
        <div class="arch-layer-num">03</div>
        <div class="arch-layer-name">Pattern Engine</div>
        <div class="arch-layer-desc">Cross-equation analysis</div>
        <div class="arch-layer-items">
          <div class="arch-item">Fourier ↔ Signals</div>
          <div class="arch-item">PDE ↔ Physics</div>
          <div class="arch-item">Graph patterns</div>
          <div class="arch-item">Similarity scoring</div>
        </div>
      </div>
      <div class="arch-layer">
        <div class="arch-layer-num">04</div>
        <div class="arch-layer-name">Dual AI Layer</div>
        <div class="arch-layer-desc">Internal + External agents</div>
        <div class="arch-layer-items">
          <div class="arch-item">Convergence probes</div>
          <div class="arch-item">Structure matching</div>
          <div class="arch-item">External queries</div>
          <div class="arch-item">Theorem search</div>
        </div>
      </div>
      <div class="arch-layer">
        <div class="arch-layer-num">05</div>
        <div class="arch-layer-name">Interface Layer</div>
        <div class="arch-layer-desc">Equation topology UI</div>
        <div class="arch-layer-items">
          <div class="arch-item">Equation Map</div>
          <div class="arch-item">Parameter Fields</div>
          <div class="arch-item">Transform Graph</div>
          <div class="arch-item">Solution Visualizer</div>
        </div>
      </div>
    </div>
  </div>

  <!-- EQUATION OBJECT MODEL -->
  <div class="section">
    <div class="section-eyebrow">Object Model</div>
    <div class="section-title">Equation as State Object</div>

    <div class="two-col">
      <div>
        <p class="section-body" style="margin-bottom:20px;">Every equation in MFI exists as a first-class computational citizen — not a string, not a function call. It has identity, state, dependencies, history, and awareness of its environment.</p>

        <div class="code-block">
<span class="kw">class</span> <span class="fn">EquationObject</span>:
  <span class="cmt"># Core identity</span>
  id: <span class="str">uuid</span>
  expression: <span class="str">"ax² + bx + c"</span>
  type: <span class="str">"polynomial"</span>
  degree: <span class="num">2</span>

  <span class="cmt"># Live state</span>
  parameters: {<span class="str">"a"</span>:<span class="num">2</span>, <span class="str">"b"</span>:<span class="num">-3</span>, <span class="str">"c"</span>:<span class="num">1</span>}
  state: <span class="str">"active"</span>   <span class="cmt"># | dormant | evolving</span>
  stability: <span class="num">0.87</span>

  <span class="cmt"># Relational awareness</span>
  dependencies: [<span class="str">"eq_042"</span>, <span class="str">"dataset_09"</span>]
  queries_received: [...]
  discoveries: [...]
        </div>
      </div>
      <div>
        <p style="font-size:11px; letter-spacing:2px; text-transform:uppercase; color: var(--text2); margin-bottom:12px;">JSON Representation</p>
        <div class="code-block">
{
  <span class="str">"type"</span>: <span class="str">"polynomial"</span>,
  <span class="str">"degree"</span>: <span class="num">2</span>,
  <span class="str">"parameters"</span>: [<span class="str">"a"</span>,<span class="str">"b"</span>,<span class="str">"c"</span>],
  <span class="str">"state"</span>: <span class="str">"active"</span>,
  <span class="str">"field_map"</span>: <span class="str">"topology_03"</span>,
  <span class="str">"ai_annotations"</span>: {
    <span class="str">"converges"</span>: <span class="kw">true</span>,
    <span class="str">"related_to"</span>: [<span class="str">"Chebyshev"</span>],
    <span class="str">"apply_to"</span>: <span class="str">"signal_data"</span>
  },
  <span class="str">"last_discovery"</span>: {
    <span class="str">"timestamp"</span>: <span class="str">"2025-04-08T14:22"</span>,
    <span class="str">"finding"</span>: <span class="str">"resonance_pattern_detected"</span>
  }
}
        </div>

        <p style="font-size:11px; letter-spacing:2px; text-transform:uppercase; color: var(--text2); margin: 20px 0 12px;">API Call</p>
        <div class="code-block">
<span class="fn">apply_equation</span>(
  dataset=<span class="str">"fluid_flow_data"</span>,
  equation=<span class="str">"navier_stokes"</span>,
  ai_mode=<span class="str">"internal+external"</span>,
  discover=<span class="kw">True</span>
)
        </div>
      </div>
    </div>
  </div>

  <!-- DUAL AI -->
  <div class="section">
    <div class="section-eyebrow">The AI Layer</div>
    <div class="section-title">Dual Intelligence System</div>

    <div class="combined-grid">
      <div class="combined-half">
        <div class="combined-title t1">INTERNAL AI</div>
        <p style="font-family:'Crimson Pro',serif; font-size:15px; color:var(--text2); line-height:1.8; margin-bottom:20px;">Lives <em>inside</em> the mathematical structures. Continuously probes equations from within — looking for convergence, instability, structural resonance, and analogy to known mathematical systems.</p>
        <div class="terminal">
          <div><span class="prompt">internal_ai.probe(eq_042)</span></div>
          <div><span class="output">→ Analyzing polynomial f(x) = ax² + bx + c</span></div>
          <div><span class="output">→ Convergence test: </span><span class="highlight">PASSES (δ=0.003)</span></div>
          <div><span class="output">→ Structural match: </span><span class="highlight">Legendre P₂ (94%)</span></div>
          <div><span class="output">→ Eigenvalue spectrum stable</span></div>
          <div><span class="output">→ Suggested transform: </span><span class="highlight">Fourier → freq domain</span></div>
        </div>
      </div>
      <div class="combined-half" style="border-left: 1px solid var(--border);">
        <div class="combined-title t2">EXTERNAL AI</div>
        <p style="font-family:'Crimson Pro',serif; font-size:15px; color:var(--text2); line-height:1.8; margin-bottom:20px;">Operates <em>outside</em> the field — bringing real-world datasets to bear on mathematical structures. Asks: which dataset does this equation best explain? What physical system does this describe?</p>
        <div class="terminal">
          <div><span class="prompt">external_ai.query(navier_stokes, dataset)</span></div>
          <div><span class="output">→ Loading fluid_flow_dataset_9.csv</span></div>
          <div><span class="output">→ Fitting ρ(∂v/∂t + v·∇v) = -∇p + μ∇²v</span></div>
          <div><span class="output">→ R² score: </span><span class="highlight">0.9934</span></div>
          <div><span class="output">→ Turbulence regime detected at t=47s</span></div>
          <div><span class="error">⚠ Boundary condition anomaly: zone_C</span></div>
          <div><span class="output">→ Recommend: </span><span class="highlight">add viscosity correction</span></div>
        </div>
      </div>
    </div>
  </div>

  <!-- USE CASES -->
  <div class="section">
    <div class="section-eyebrow">Applications</div>
    <div class="section-title">Use Cases & Walkthroughs</div>

    <div class="usecase-grid">
      <div class="usecase-card c1">
        <div class="usecase-icon">🔬</div>
        <div class="usecase-title">Scientific Research</div>
        <p class="usecase-desc">A physicist studying plasma dynamics loads ten governing equations. MFI maps their interdependencies, flags contradictions, and surfaces similarities to known fusion models — autonomously.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">01</span>Load PDE system into equation field</li>
          <li><span class="step-num">02</span>Internal AI probes for convergence zones</li>
          <li><span class="step-num">03</span>Pattern engine maps cross-equation resonance</li>
          <li><span class="step-num">04</span>External AI applies plasma dataset</li>
          <li><span class="step-num">05</span>Field map highlights instability regions</li>
          <li><span class="step-num">06</span>System proposes parameter corrections</li>
          <li><span class="step-num">07</span>Discovery logged: novel equilibrium found</li>
        </ul>
      </div>
      <div class="usecase-card c2">
        <div class="usecase-icon">🧩</div>
        <div class="usecase-title">Mathematical Discovery</div>
        <p class="usecase-desc">A mathematician explores a new class of differential equations. The pattern engine autonomously connects their structure to Riemann surfaces — a connection the mathematician had not considered.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">01</span>Describe unknown equation family in natural language</li>
          <li><span class="step-num">02</span>MFI instantiates equation objects with parameter sweep</li>
          <li><span class="step-num">03</span>Pattern engine scans topology graph</li>
          <li><span class="step-num">04</span>Similarity to Riemann ζ-function: 78%</li>
          <li><span class="step-num">05</span>Internal AI proposes analytic continuation</li>
          <li><span class="step-num">06</span>Visualization: field map shows zero distribution</li>
          <li><span class="step-num">07</span>Export: proof scaffold auto-generated</li>
        </ul>
      </div>
      <div class="usecase-card c3">
        <div class="usecase-icon">🤖</div>
        <div class="usecase-title">AI Theorem Exploration</div>
        <p class="usecase-desc">An AI research team sets MFI in autonomous mode. Over 72 hours, the system explores 10,000 equation combinations, identifies 3 novel pattern classes, and generates conjectures for human review.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">01</span>Seed field with known open problems</li>
          <li><span class="step-num">02</span>Dual AI begins combinatorial exploration</li>
          <li><span class="step-num">03</span>Pattern engine runs continuously</li>
          <li><span class="step-num">04</span>Emergence layer detects stable clusters</li>
          <li><span class="step-num">05</span>Novel patterns flagged for review queue</li>
          <li><span class="step-num">06</span>Human reviews AI-generated conjectures</li>
          <li><span class="step-num">07</span>Best results published to equation library</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- MFI WALKTHROUGH -->
  <div class="section">
    <div class="section-eyebrow">Step-by-Step</div>
    <div class="section-title">How MFI Learns From Use</div>
    <p class="section-body" style="margin-bottom:32px;">Each interaction with MFI generates new knowledge. The system doesn't reset — it accumulates mathematical insight across sessions, building a personal equation intelligence that grows with the researcher.</p>

    <div class="walkthrough">
      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">1</div>
        <div class="walk-content">
          <h3>EQUATION INGESTION</h3>
          <p>User enters or imports a mathematical expression. MFI parses it into a live object.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The symbolic parser decomposes the expression into its constituent parts — operators, variables, constants, functions. Each component becomes a node in a dependency graph. The equation is now aware of its own structure.</p>
            <div class="code-block" style="margin-top:12px;">
<span class="fn">mfi.ingest</span>(<span class="str">"∂²u/∂t² = c²∇²u"</span>)
<span class="cmt"># → Type detected: Wave equation (hyperbolic PDE)</span>
<span class="cmt"># → Parameters: {c: wave_speed, u: field_var}</span>
<span class="cmt"># → Known solutions: d'Alembert, Fourier series</span>
<span class="cmt"># → State: active, awaiting data or query</span>
            </div>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">2</div>
        <div class="walk-content">
          <h3>FIELD PLACEMENT</h3>
          <p>The equation takes its position in the mathematical field — where it meets related equations.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The topology engine positions the new equation object relative to all existing equations based on structural similarity, domain overlap, and mathematical ancestry. The wave equation automatically clusters near Maxwell's equations, Schrödinger's equation, and acoustic models.</p>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">3</div>
        <div class="walk-content">
          <h3>AI INTERROGATION BEGINS</h3>
          <p>Both AI agents wake and begin probing the new equation object from their respective vantage points.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">Internal AI: checks convergence behavior across parameter space, identifies degenerate cases, probes stability near boundary conditions. External AI: scans available datasets for systems the wave equation might explain — vibrating strings, electromagnetic propagation, seismic data.</p>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">4</div>
        <div class="walk-content">
          <h3>PATTERN EMERGENCE</h3>
          <p>As analysis runs, the pattern engine detects relationships between this equation and others in the field.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The engine discovers: this wave equation shares a mathematical ancestry with three equations from different datasets loaded six months ago. A resonance structure appears — suggesting a deeper unified framework. This connection was not obvious to the user. The system flags it as a potential discovery.</p>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">5</div>
        <div class="walk-content">
          <h3>DISCOVERY CRYSTALLIZATION</h3>
          <p>The system promotes high-confidence findings to the discovery layer — surfacing them for human review.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">Discoveries are ranked by confidence, novelty, and utility. The researcher sees: a suggested unification between acoustic and electromagnetic wave models, with a proposed transformation path. They can accept, reject, or query further. Each interaction teaches the system their research priorities.</p>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">6</div>
        <div class="walk-content">
          <h3>FIELD EVOLUTION</h3>
          <p>Over time, the mathematical field becomes a living map of the researcher's knowledge domain.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The field doesn't just store equations — it stores the relationships between them, the discoveries they've generated, the datasets they've explained, and the paths of exploration taken. It becomes a personal mathematical intelligence that grows exponentially more useful the longer it's used.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- ════════════════════════════════════════
     GDI PAGE
════════════════════════════════════════ -->
<div id="page-gdi" class="page">

  <div class="section" style="padding-top:60px;">
    <div class="section-eyebrow">Whitepaper 02 — Generative Design Interface</div>
    <div class="section-title">GDI: DESIGN AS<br>EMERGENCE</div>
    <p class="section-body">An AI-native interface where design elements emerge from procedural pattern fields, aesthetic constraints, and AI-driven transformation loops. Users don't manipulate objects — they shape generative conditions and observe design crystallize.</p>

    <div style="margin-top:24px;">
      <span class="tag orange">Pattern Primitives</span>
      <span class="tag purple">AI Design Agent</span>
      <span class="tag green">Visual Fields</span>
      <span class="tag yellow">Aesthetic Scoring</span>
    </div>
  </div>

  <!-- LIVE GDI DEMO -->
  <div class="section">
    <div class="section-eyebrow">Live Demonstration</div>
    <div class="section-title">Generative Design Field</div>

    <div class="demo-container">
      <div class="demo-header">
        <div class="demo-dot"></div>
        GDI Pattern Engine — Active
        <span style="margin-left:auto; color: var(--accent4)" id="gdi-mode">Mode: Geometric</span>
      </div>
      <div class="demo-body">
        <div class="demo-canvas-wrap">
          <canvas id="gdiCanvas"></canvas>
        </div>
        <div class="demo-controls">
          <div class="ctrl-group">
            <div class="ctrl-label">Pattern Mode</div>
            <button class="ctrl-btn active" onclick="setGDIMode('geometric',this)">Geometric</button>
            <button class="ctrl-btn" onclick="setGDIMode('organic',this)" style="margin-top:4px;">Organic</button>
            <button class="ctrl-btn" onclick="setGDIMode('noise',this)" style="margin-top:4px;">Noise Field</button>
            <button class="ctrl-btn" onclick="setGDIMode('fractal',this)" style="margin-top:4px;">Fractal</button>
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Symmetry <span class="ctrl-val" id="sym-val">0.8</span></div>
            <input class="ctrl-slider" type="range" min="0" max="100" value="80" oninput="updateGDIParam('symmetry',this.value/100)">
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Complexity <span class="ctrl-val" id="cmp-val">0.4</span></div>
            <input class="ctrl-slider" type="range" min="0" max="100" value="40" oninput="updateGDIParam('complexity',this.value/100)">
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Color Field <span class="ctrl-val" id="col-val">0.6</span></div>
            <input class="ctrl-slider" type="range" min="0" max="100" value="60" oninput="updateGDIParam('colorfield',this.value/100)">
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Evolution Speed <span class="ctrl-val" id="spd-val">0.5</span></div>
            <input class="ctrl-slider" type="range" min="1" max="100" value="50" oninput="updateGDIParam('speed',this.value/100)">
          </div>
          <button class="ctrl-btn" onclick="regenerateGDI()">↺ Regenerate Field</button>
        </div>
      </div>
      <div class="stats-panel">
        <div class="stat-box"><div class="stat-val" id="gdi-score">87</div><div class="stat-lbl">Comp Score</div></div>
        <div class="stat-box"><div class="stat-val" id="gdi-harmony">92</div><div class="stat-lbl">Harmony</div></div>
        <div class="stat-box"><div class="stat-val" id="gdi-contrast">74</div><div class="stat-lbl">Contrast</div></div>
        <div class="stat-box"><div class="stat-val" id="gdi-novelty">61</div><div class="stat-lbl">Novelty</div></div>
      </div>
    </div>
  </div>

  <!-- GDI ARCHITECTURE -->
  <div class="section">
    <div class="section-eyebrow">System Architecture</div>
    <div class="section-title">Three-Engine Stack</div>

    <div class="arch-diagram" style="grid-template-columns: repeat(3,1fr);">
      <div class="arch-layer">
        <div class="arch-layer-num">01</div>
        <div class="arch-layer-name">Pattern Engine</div>
        <div class="arch-layer-desc">Generates visual structures from primitive fields</div>
        <div class="arch-layer-items">
          <div class="arch-item">Symmetry fields</div>
          <div class="arch-item">Noise primitives</div>
          <div class="arch-item">Fractal generators</div>
          <div class="arch-item">Geometric lattices</div>
          <div class="arch-item">Color field maps</div>
        </div>
      </div>
      <div class="arch-layer">
        <div class="arch-layer-num">02</div>
        <div class="arch-layer-name">AI Design Agent</div>
        <div class="arch-layer-desc">Transforms patterns into aesthetic compositions</div>
        <div class="arch-layer-items">
          <div class="arch-item">Layout analysis</div>
          <div class="arch-item">Aesthetic scoring</div>
          <div class="arch-item">Style transfer</div>
          <div class="arch-item">Composition refinement</div>
          <div class="arch-item">Intent interpretation</div>
        </div>
      </div>
      <div class="arch-layer">
        <div class="arch-layer-num">03</div>
        <div class="arch-layer-name">Visual Field System</div>
        <div class="arch-layer-desc">Replaces layers with dynamic field interactions</div>
        <div class="arch-layer-items">
          <div class="arch-item">Color field</div>
          <div class="arch-item">Structure field</div>
          <div class="arch-item">Lighting field</div>
          <div class="arch-item">Texture field</div>
          <div class="arch-item">Temporal field</div>
        </div>
      </div>
    </div>

    <div class="conn-diagram" style="margin-top:32px;">
      <div class="conn-row">
        <div class="conn-label">vs Photoshop</div>
        <div class="conn-content">Photoshop manipulates <em>pixels</em>. GDI manipulates <em>generative conditions</em>. The output emerges — it isn't manually constructed pixel by pixel.</div>
      </div>
      <div class="conn-row">
        <div class="conn-label">vs Figma</div>
        <div class="conn-content">Figma arranges <em>objects</em>. GDI shapes <em>fields</em>. There are no objects — only parameters that define the possibility space from which design crystallizes.</div>
      </div>
      <div class="conn-row">
        <div class="conn-label">vs Midjourney</div>
        <div class="conn-content">Midjourney generates from <em>prompts</em> (one-shot). GDI generates from <em>live fields</em> — continuously, interactively, with persistent aesthetic memory and human-in-the-loop refinement.</div>
      </div>
    </div>
  </div>

  <!-- GDI USE CASES -->
  <div class="section">
    <div class="section-eyebrow">Applications</div>
    <div class="section-title">Use Cases & Walkthroughs</div>

    <div class="usecase-grid">
      <div class="usecase-card c1">
        <div class="usecase-icon">🎨</div>
        <div class="usecase-title">Brand Identity</div>
        <p class="usecase-desc">A startup needs brand visuals. The designer sets intent parameters — trust, innovation, minimal — and the GDI generates a coherent identity system: logo field, color system, typographic rules.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">01</span>Input brand intent: "precision, trust, future"</li>
          <li><span class="step-num">02</span>AI agent interprets into field parameters</li>
          <li><span class="step-num">03</span>Pattern engine generates geometric primitives</li>
          <li><span class="step-num">04</span>Color field emerges from trust palette</li>
          <li><span class="step-num">05</span>AI scores composition: harmony 94%</li>
          <li><span class="step-num">06</span>Designer adjusts symmetry slider: 0.6→0.4</li>
          <li><span class="step-num">07</span>Unique logomark crystallizes from field</li>
        </ul>
      </div>
      <div class="usecase-card c2">
        <div class="usecase-icon">🎮</div>
        <div class="usecase-title">Game Environment Concept</div>
        <p class="usecase-desc">A game artist needs concept art for 40 environments. GDI generates a distinct visual field for each biome — procedurally consistent within the game's aesthetic DNA, yet each one unique.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">01</span>Define game aesthetic: dark fantasy, organic</li>
          <li><span class="step-num">02</span>Set biome parameters per zone</li>
          <li><span class="step-num">03</span>GDI generates structural field per biome</li>
          <li><span class="step-num">04</span>Lighting field adapted to atmosphere</li>
          <li><span class="step-num">05</span>AI ensures cross-biome visual consistency</li>
          <li><span class="step-num">06</span>Artist refines 3 key zones manually</li>
          <li><span class="step-num">07</span>System learns style and applies to all 40</li>
        </ul>
      </div>
      <div class="usecase-card c3">
        <div class="usecase-icon">📽</div>
        <div class="usecase-title">Motion Graphics</div>
        <p class="usecase-desc">A motion designer needs a generative title sequence. GDI's temporal field evolves the design through time — not animating objects, but evolving field states to create motion that feels alive.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">01</span>Set temporal field: 24fps, 30-second arc</li>
          <li><span class="step-num">02</span>Define field evolution curve (ease in/out)</li>
          <li><span class="step-num">03</span>Pattern engine generates keyframe attractors</li>
          <li><span class="step-num">04</span>GDI interpolates field states between keys</li>
          <li><span class="step-num">05</span>Color field transitions via spectral sweep</li>
          <li><span class="step-num">06</span>AI scores motion harmony per frame</li>
          <li><span class="step-num">07</span>Export to composition-ready video sequence</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- COMPARISON TABLE -->
  <div class="section">
    <div class="section-eyebrow">Market Position</div>
    <div class="section-title">GDI vs Existing Tools</div>

    <table class="data-table">
      <tr>
        <th>Capability</th>
        <th>Photoshop</th>
        <th>Figma</th>
        <th>Midjourney</th>
        <th>GDI</th>
      </tr>
      <tr>
        <td>Design Primitive</td>
        <td>Pixels / Layers</td>
        <td>Objects / Frames</td>
        <td>Prompt → Image</td>
        <td style="color:var(--accent1)">Pattern Fields</td>
      </tr>
      <tr>
        <td>Interaction Model</td>
        <td>Manual manipulation</td>
        <td>Object drag/snap</td>
        <td>Text prompt</td>
        <td style="color:var(--accent1)">Field shaping</td>
      </tr>
      <tr>
        <td>AI Role</td>
        <td>Filters / Actions</td>
        <td>Auto-layout assist</td>
        <td>Core generator</td>
        <td style="color:var(--accent1)">Co-creative agent</td>
      </tr>
      <tr>
        <td>Design Memory</td>
        <td>None</td>
        <td>Component library</td>
        <td>None</td>
        <td style="color:var(--accent1)">Aesthetic intelligence</td>
      </tr>
      <tr>
        <td>Motion / Time</td>
        <td>Timeline (keyframes)</td>
        <td>Prototyping only</td>
        <td>Static only</td>
        <td style="color:var(--accent1)">Temporal fields</td>
      </tr>
      <tr>
        <td>Iteration Speed</td>
        <td>Slow</td>
        <td>Medium</td>
        <td>Fast (blind)</td>
        <td style="color:var(--accent1)">Continuous</td>
      </tr>
      <tr>
        <td>Learning From User</td>
        <td>No</td>
        <td>No</td>
        <td>No</td>
        <td style="color:var(--accent1)">Yes — session + cross-session</td>
      </tr>
    </table>
  </div>

</div>

<!-- ════════════════════════════════════════
     COMBINED PLATFORM PAGE
════════════════════════════════════════ -->
<div id="page-combined" class="page">

  <div class="section" style="padding-top:60px;">
    <div class="section-eyebrow">The Synthesis</div>
    <div class="section-title">ONE PLATFORM TO<br>REPLACE MOST SOFTWARE</div>
    <p class="section-body">When MFI and GDI share a common kernel — the Pattern Intelligence Core — they become capable of things neither could do alone. Mathematical structures become visual. Visual fields become analyzable. The boundary dissolves.</p>
  </div>

  <!-- ECOSYSTEM -->
  <div class="section">
    <div class="section-eyebrow">The Full Ecosystem</div>
    <div class="section-title">Pattern Intelligence Platform</div>

    <div class="ecosystem">
      <div class="eco-center">
        <div class="eco-badge">PATTERN INTELLIGENCE CORE</div>
        <div class="eco-subtitle">Shared kernel — field engine + dual AI + emergence detector</div>
      </div>

      <div class="eco-rings">
        <div class="eco-ring">
          <div class="eco-ring-title t1">MATHEMATICAL LAYER</div>
          <div class="eco-node n1">MFI — Live equation field</div>
          <div class="eco-node n1">Symbolic computation</div>
          <div class="eco-node n1">Theorem exploration</div>
          <div class="eco-node n1">Dataset interrogation</div>
          <div class="eco-node n1">AI mathematical reasoning</div>
          <div class="eco-node n1">Auto proof scaffolding</div>
        </div>
        <div class="eco-ring">
          <div class="eco-ring-title t2">DESIGN LAYER</div>
          <div class="eco-node n2">GDI — Generative field</div>
          <div class="eco-node n2">Pattern primitives</div>
          <div class="eco-node n2">Aesthetic intelligence</div>
          <div class="eco-node n2">Temporal / motion fields</div>
          <div class="eco-node n2">Brand DNA persistence</div>
          <div class="eco-node n2">Cross-domain style transfer</div>
        </div>
        <div class="eco-ring">
          <div class="eco-ring-title t3">EMERGENCE LAYER</div>
          <div class="eco-node n3">Cross-domain discovery</div>
          <div class="eco-node n3">Math → Visual translation</div>
          <div class="eco-node n3">Universe simulation</div>
          <div class="eco-node n3">Living knowledge graphs</div>
          <div class="eco-node n3">Autonomous agent mode</div>
          <div class="eco-node n3">Researcher memory</div>
        </div>
      </div>
    </div>

    <!-- WHAT IT REPLACES -->
    <div class="section-eyebrow" style="margin-top:48px;">What It Replaces</div>
    <div class="section-title" style="font-size:28px;">The Software It Makes Obsolete</div>

    <table class="data-table" style="margin-top:24px;">
      <tr>
        <th>Software Category</th>
        <th>Current Tools</th>
        <th>PIP Equivalent</th>
        <th>Advantage</th>
      </tr>
      <tr>
        <td>Mathematics</td>
        <td>MATLAB, Mathematica, Wolfram</td>
        <td>MFI — Live equation field</td>
        <td style="color:var(--accent1)">Equations live and connect</td>
      </tr>
      <tr>
        <td>Graphic Design</td>
        <td>Photoshop, Illustrator</td>
        <td>GDI — Pattern field design</td>
        <td style="color:var(--accent1)">Emergence replaces manual</td>
      </tr>
      <tr>
        <td>UI/UX Design</td>
        <td>Figma, Sketch</td>
        <td>GDI — Generative UI fields</td>
        <td style="color:var(--accent1)">Design systems self-consistent</td>
      </tr>
      <tr>
        <td>Data Analysis</td>
        <td>Excel, Tableau, PowerBI</td>
        <td>MFI + Pattern engine</td>
        <td style="color:var(--accent1)">Equations probe data live</td>
      </tr>
      <tr>
        <td>Simulation</td>
        <td>Ansys, COMSOL</td>
        <td>MFI + Universe engine</td>
        <td style="color:var(--accent1)">Field-native simulation</td>
      </tr>
      <tr>
        <td>Motion Graphics</td>
        <td>After Effects, Cinema 4D</td>
        <td>GDI temporal field</td>
        <td style="color:var(--accent1)">Alive motion, not keyframes</td>
      </tr>
    </table>
  </div>

  <!-- COMBINED FLOW -->
  <div class="section">
    <div class="section-eyebrow">Cross-Domain Power</div>
    <div class="section-title">When Math Meets Design</div>

    <p class="section-body" style="margin-bottom:32px;">The most powerful emergent capability of combining MFI and GDI: mathematical structures can directly generate visual design — and visual patterns can be analyzed as mathematical objects. A previously uncrossable boundary dissolves.</p>

    <div class="walkthrough">
      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">1</div>
        <div class="walk-content">
          <h3>MATH → VISUAL</h3>
          <p>A Fourier transform running in MFI produces a frequency spectrum. GDI receives it as a pattern field seed — instantly generating a visualization that IS the mathematics, not just a chart of it.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The frequency components become symmetry parameters. Amplitude becomes contrast. Phase becomes spatial rotation. The visual field IS the equation — changing the equation in real-time changes the design in real-time. The designer and mathematician are looking at the same thing from different sides.</p>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">2</div>
        <div class="walk-content">
          <h3>VISUAL → MATH</h3>
          <p>A designer creates an organic pattern using GDI. MFI analyzes its structure — extracting the underlying mathematical order governing its visual coherence.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The pattern engine discovers: this organic visual field obeys Turing's reaction-diffusion equations — the same mathematics that governs leopard spots and zebra stripes. The designer didn't know this. MFI surfaces it. Now the designer can deliberately use those equations to explore the entire family of related patterns. A purely aesthetic decision becomes a mathematical exploration.</p>
          </div>
        </div>
      </div>

      <div class="walk-step" onclick="toggleWalk(this)">
        <div class="walk-num">3</div>
        <div class="walk-content">
          <h3>AUTONOMOUS EXPLORATION</h3>
          <p>In autonomous mode, the dual AI explores the cross-domain space — generating mathematical structures that produce aesthetically surprising visual outputs.</p>
          <div class="walk-detail">
            <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;">The system operates as a creative intelligence: exploring equation families, generating their visual manifestations, scoring the aesthetic quality of each output, and flagging the most surprising discoveries. This is AI creativity with mathematical rigor — not randomness, but structured exploration of a possibility space with genuine aesthetic judgment.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- ════════════════════════════════════════
     UNIVERSE ENGINE PAGE
════════════════════════════════════════ -->
<div id="page-universe" class="page">

  <div class="section" style="padding-top:60px;">
    <div class="section-eyebrow">The Mini-Universe Engine</div>
    <div class="section-title">OBSERVATIONAL<br>COMPUTING</div>
    <p class="section-body">A ~500-line emergence engine demonstrating the core philosophy: objects never exist directly. Everything is cells with field values. Rules update fields. Patterns emerge. A scientist console for simulated universes.</p>
  </div>

  <!-- LIVE UNIVERSE DEMO -->
  <div class="section">
    <div class="section-eyebrow">Live Simulation</div>
    <div class="section-title">Universe Field Engine</div>

    <div class="demo-container">
      <div class="demo-header">
        <div class="demo-dot"></div>
        Universe Engine — Running
        <span style="margin-left:auto; color:var(--accent2)" id="universe-tick">Tick: 0</span>
      </div>
      <div class="demo-body">
        <div class="demo-canvas-wrap" style="height:500px;">
          <canvas id="universeCanvas"></canvas>
        </div>
        <div class="demo-controls">
          <div class="ctrl-group">
            <div class="ctrl-label">Visualization</div>
            <button class="ctrl-btn active" onclick="setUniverseViz('energy',this)">Energy Field</button>
            <button class="ctrl-btn" onclick="setUniverseViz('charge',this)" style="margin-top:4px;">Charge Field</button>
            <button class="ctrl-btn" onclick="setUniverseViz('gravity',this)" style="margin-top:4px;">Gravity Field</button>
            <button class="ctrl-btn" onclick="setUniverseViz('composite',this)" style="margin-top:4px;">Composite</button>
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Gravity Strength <span class="ctrl-val" id="grav-val">0.5</span></div>
            <input class="ctrl-slider" type="range" min="0" max="100" value="50" oninput="setUniverseParam('gravity',this.value/100)">
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Charge Coupling <span class="ctrl-val" id="chrg-val">0.5</span></div>
            <input class="ctrl-slider" type="range" min="0" max="100" value="50" oninput="setUniverseParam('charge',this.value/100)">
          </div>
          <div class="ctrl-group">
            <div class="ctrl-label">Decay Rate <span class="ctrl-val" id="decay-val">0.5</span></div>
            <input class="ctrl-slider" type="range" min="1" max="100" value="50" oninput="setUniverseParam('decay',this.value/100)">
          </div>
          <button class="ctrl-btn" onclick="injectEnergy()" style="margin-top:4px;">⚡ Inject Energy</button>
          <button class="ctrl-btn" onclick="resetUniverse()" style="margin-top:4px;">↺ Big Bang</button>
        </div>
      </div>
      <div class="stats-panel">
        <div class="stat-box"><div class="stat-val" id="u-clusters">—</div><div class="stat-lbl">Clusters</div></div>
        <div class="stat-box"><div class="stat-val" id="u-energy">—</div><div class="stat-lbl">Total Energy</div></div>
        <div class="stat-box"><div class="stat-val" id="u-state">—</div><div class="stat-lbl">State</div></div>
        <div class="stat-box"><div class="stat-val" id="u-tick">0</div><div class="stat-lbl">Tick</div></div>
      </div>
    </div>
  </div>

  <!-- ENGINE ARCHITECTURE -->
  <div class="section">
    <div class="section-eyebrow">Engine Architecture</div>
    <div class="section-title">Field-Driven Universe</div>

    <div class="two-col">
      <div>
        <p class="section-body" style="margin-bottom:20px;">The engine operates on a single principle: no objects. Only fields. Particles, atoms, and structures are patterns detected in field configurations — not things stored in memory.</p>

        <div class="code-block">
<span class="kw">class</span> <span class="fn">Universe</span>:
  <span class="cmt"># Four fundamental fields</span>
  gravity    = np.random.rand(W, H)
  charge     = np.random.rand(W, H)
  temperature = np.random.rand(W, H)
  energy     = np.random.rand(W, H)

  <span class="kw">def</span> <span class="fn">update</span>(self):
    <span class="cmt"># Fields diffuse through space</span>
    self.gravity = self.diffuse(self.gravity)
    self.charge  = self.diffuse(self.charge)

    <span class="cmt"># Gravity × charge = interaction</span>
    interaction = self.gravity * self.charge

    <span class="cmt"># Interaction heats space</span>
    self.temperature += interaction * <span class="num">0.01</span>

    <span class="cmt"># Heat becomes energy</span>
    self.energy += self.temperature * <span class="num">0.005</span>

    <span class="cmt"># Universe cools slowly (entropy)</span>
    self.temperature *= <span class="num">0.999</span>
    self.energy      *= <span class="num">0.999</span>
        </div>
      </div>
      <div>
        <p style="font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text2); margin-bottom:12px;">Pattern Detector</p>
        <div class="code-block">
<span class="kw">class</span> <span class="fn">PatternDetector</span>:
  <span class="kw">def</span> <span class="fn">detect</span>(self, energy):
    <span class="cmt"># Objects = regions above threshold</span>
    threshold = (
      np.mean(energy) + 
      np.std(energy)
    )
    clusters = []
    <span class="kw">for</span> x <span class="kw">in</span> range(W):
      <span class="kw">for</span> y <span class="kw">in</span> range(H):
        <span class="kw">if</span> energy[x,y] > threshold:
          clusters.append((x,y))
    <span class="kw">return</span> clusters
        </div>

        <p style="font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text2); margin: 20px 0 12px;">Observer AI</p>
        <div class="code-block">
<span class="kw">class</span> <span class="fn">ObserverAI</span>:
  <span class="kw">def</span> <span class="fn">analyze</span>(self, clusters):
    n = len(clusters)
    <span class="kw">if</span>   n > <span class="num">200</span>: <span class="kw">return</span> <span class="str">"matter forming"</span>
    <span class="kw">elif</span> n > <span class="num">100</span>: <span class="kw">return</span> <span class="str">"stable patterns"</span>
    <span class="kw">elif</span> n > <span class="num">20</span>:  <span class="kw">return</span> <span class="str">"sparse structure"</span>
    <span class="kw">else</span>:         <span class="kw">return</span> <span class="str">"entropy dominant"</span>
        </div>
      </div>
    </div>
  </div>

  <!-- OBSERVATIONAL COMPUTING -->
  <div class="section">
    <div class="section-eyebrow">The New Interaction Paradigm</div>
    <div class="section-title">Observational Computing</div>

    <div class="combined-grid">
      <div class="combined-half">
        <p style="font-size:11px; color:var(--text2); letter-spacing:2px; margin-bottom:16px; text-transform:uppercase;">Traditional Interaction</p>
        <div class="flow" style="flex-direction:column; align-items:flex-start; gap:8px;">
          <div class="flow-node" style="width:200px;">User</div>
          <div style="color:var(--text2); padding: 0 16px;">↓ issues command</div>
          <div class="flow-node" style="width:200px;">Machine executes</div>
          <div style="color:var(--text2); padding: 0 16px;">↓ returns result</div>
          <div class="flow-node" style="width:200px;">User sees output</div>
        </div>
        <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;margin-top:20px;">The user is in control. The machine is passive. The relationship is command/response. You get exactly what you ask for — nothing more.</p>
      </div>
      <div class="combined-half" style="border-left:1px solid var(--border);">
        <p style="font-size:11px; color:var(--accent1); letter-spacing:2px; margin-bottom:16px; text-transform:uppercase;">Observational Computing</p>
        <div class="flow" style="flex-direction:column; align-items:flex-start; gap:8px;">
          <div class="flow-node active" style="width:200px;">User shapes conditions</div>
          <div style="color:var(--accent1); padding: 0 16px;">↓ field responds</div>
          <div class="flow-node active" style="width:200px;">Patterns emerge</div>
          <div style="color:var(--accent1); padding: 0 16px;">↓ AI observes</div>
          <div class="flow-node active" style="width:200px;">System evolves</div>
          <div style="color:var(--accent1); padding: 0 16px;">↑↓ bidirectional</div>
          <div class="flow-node active" style="width:200px;">User discovers</div>
        </div>
        <p style="font-family:'Crimson Pro',serif;font-size:15px;color:var(--text2);line-height:1.8;margin-top:20px;">The user and system are co-researchers. You interact like a physicist studying reality — shaping conditions, observing emergence, being surprised by what the system discovers.</p>
      </div>
    </div>

    <div class="highlight-box" style="margin-top:32px;">
      <p>The key insight: <em>complexity doesn't have to be built — it can be grown</em>. Conway's Game of Life generates organisms from 3 rules. Wolfram's Rule 110 is Turing-complete from a 1D cellular automaton. The Pattern Intelligence Platform applies this principle to human-computer interaction itself.</p>
    </div>

    <!-- FUTURE EXTENSIONS -->
    <div class="section-eyebrow" style="margin-top:48px;">Future Extensions</div>
    <div class="section-title" style="font-size:28px;">Where This Goes Next</div>

    <div class="usecase-grid" style="margin-top:24px;">
      <div class="usecase-card c1">
        <div class="usecase-icon">🌱</div>
        <div class="usecase-title">Digital Lifeforms</div>
        <p class="usecase-desc">Extend the field rules to include reproduction and competition. Clusters that exceed stability thresholds can split. Fields that resonate can merge. Evolution emerges.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">→</span>Add reproduction rule to pattern detector</li>
          <li><span class="step-num">→</span>Resource competition between clusters</li>
          <li><span class="step-num">→</span>Mutation via parameter drift</li>
          <li><span class="step-num">→</span>Natural selection from energy constraints</li>
        </ul>
      </div>
      <div class="usecase-card c2">
        <div class="usecase-icon">🔭</div>
        <div class="usecase-title">Autonomous Theorem Discovery</div>
        <p class="usecase-desc">MFI in fully autonomous mode: the dual AI explores equation families for 72+ hours, generating and testing conjectures against known mathematical structures.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">→</span>Seed with open Millennium Prize problems</li>
          <li><span class="step-num">→</span>Pattern engine explores equation space</li>
          <li><span class="step-num">→</span>AI generates partial proof scaffolds</li>
          <li><span class="step-num">→</span>Human reviews flagged high-confidence finds</li>
        </ul>
      </div>
      <div class="usecase-card c3">
        <div class="usecase-icon">🌐</div>
        <div class="usecase-title">Shared Field Reality</div>
        <p class="usecase-desc">Multiple researchers inhabit the same mathematical or design field simultaneously. Their individual manipulations interact — creating emergent collaborative discoveries no single user could reach.</p>
        <ul class="usecase-steps">
          <li><span class="step-num">→</span>Field state synced across instances</li>
          <li><span class="step-num">→</span>Each user has unique AI agent perspective</li>
          <li><span class="step-num">→</span>Conflict resolution via field merge protocol</li>
          <li><span class="step-num">→</span>Shared discovery layer with attribution</li>
        </ul>
      </div>
    </div>
  </div>

</div>

<!-- FOOTER -->
<footer>
  <div>
    <div class="footer-col-title">Pattern Intelligence Platform</div>
    <p style="font-family:'Crimson Pro',serif; font-size:15px; color:var(--text2); line-height:1.8;">A next-generation interface framework where patterns replace objects, fields replace commands, and AI replaces tools.</p>
    <div style="margin-top:16px;">
      <span class="tag green">MFI</span>
      <span class="tag orange">GDI</span>
      <span class="tag purple">Universe Engine</span>
    </div>
  </div>
  <div>
    <div class="footer-col-title">Architecture</div>
    <span class="footer-link" onclick="showPage('mfi')">Mathematical Field Interface</span>
    <span class="footer-link" onclick="showPage('gdi')">Generative Design Interface</span>
    <span class="footer-link" onclick="showPage('combined')">Combined Platform</span>
    <span class="footer-link" onclick="showPage('universe')">Universe Engine + Demo</span>
  </div>
  <div>
    <div class="footer-col-title">Paradigm</div>
    <span class="footer-link">Objects → Patterns</span>
    <span class="footer-link">Commands → Fields</span>
    <span class="footer-link">Tools → AI Collaborators</span>
    <span class="footer-link">Manipulation → Observation</span>
  </div>
</footer>

<script>
// ═══════════════════════════════════════
// NAVIGATION
// ═══════════════════════════════════════
function showPage(id) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
  document.getElementById('page-'+id).classList.add('active');
  const tabs = document.querySelectorAll('.nav-tab');
  const map = {home:0, mfi:1, gdi:2, combined:3, universe:4};
  if (map[id] !== undefined) tabs[map[id]].classList.add('active');
  window.scrollTo(0,0);
}

function toggleWalk(el) {
  el.classList.toggle('open');
}

// ═══════════════════════════════════════
// HERO FIELD CANVAS
// ═══════════════════════════════════════
(function() {
  const canvas = document.getElementById('fieldCanvas');
  const ctx = canvas.getContext('2d');
  const W = 80, H = 80;

  let gravity = new Float32Array(W*H);
  let charge  = new Float32Array(W*H);
  let energy  = new Float32Array(W*H);
  let temp    = new Float32Array(W*H);
  let tick = 0;

  function idx(x,y) { return x*H+y; }

  function init() {
    for (let i=0; i<W*H; i++) {
      gravity[i] = Math.random();
      charge[i]  = Math.random();
      energy[i]  = Math.random()*0.3;
      temp[i]    = Math.random()*0.2;
    }
  }

  function diffuse(f) {
    const n = new Float32Array(W*H);
    for (let x=1; x<W-1; x++) {
      for (let y=1; y<H-1; y++) {
        n[idx(x,y)] = (f[idx(x,y)] + f[idx(x+1,y)] + f[idx(x-1,y)] + f[idx(x,y+1)] + f[idx(x,y-1)]) / 5;
      }
    }
    return n;
  }

  function update() {
    gravity = diffuse(gravity);
    charge  = diffuse(charge);
    for (let i=0; i<W*H; i++) {
      const interaction = gravity[i] * charge[i];
      temp[i] += interaction * 0.008;
      energy[i] += temp[i] * 0.004;
      temp[i]   *= 0.998;
      energy[i] *= 0.998;
    }
    tick++;
  }

  function countClusters() {
    const mean = energy.reduce((a,b)=>a+b,0)/energy.length;
    const variance = energy.reduce((s,v)=>s+(v-mean)**2,0)/energy.length;
    const std = Math.sqrt(variance);
    let c = 0;
    for (let i=0;i<energy.length;i++) if (energy[i]>mean+std) c++;
    return c;
  }

  function draw() {
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    const cw = canvas.width, ch = canvas.height;
    const cx = cw/W, cy = ch/H;

    ctx.fillStyle = '#050508';
    ctx.fillRect(0,0,cw,ch);

    for (let x=0; x<W; x++) {
      for (let y=0; y<H; y++) {
        const e = energy[idx(x,y)];
        const g = gravity[idx(x,y)];
        const c2 = charge[idx(x,y)];
        const r = Math.floor(e*80+g*40);
        const g2= Math.floor(e*255*0.96);
        const b = Math.floor(c2*180);
        ctx.fillStyle = `rgb(${r},${g2},${b})`;
        ctx.fillRect(x*cx, y*cy, cx+0.5, cy+0.5);
      }
    }
  }

  function updateStats() {
    const clusters = countClusters();
    const totalE = (energy.reduce((a,b)=>a+b,0)/energy.length*100).toFixed(1);
    document.getElementById('fcluster').textContent = clusters;
    document.getElementById('fenergy').textContent  = totalE+'%';
    const state = clusters>300?'Matter Forming':clusters>150?'Stable Patterns':clusters>50?'Sparse Structure':'Entropy Rising';
    document.getElementById('fstate').textContent = state;
  }

  init();
  let frame = 0;
  function loop() {
    update();
    if (frame%2===0) { draw(); updateStats(); }
    frame++;
    requestAnimationFrame(loop);
  }
  loop();
})();

// ═══════════════════════════════════════
// GDI CANVAS
// ═══════════════════════════════════════
const gdiState = {
  mode: 'geometric',
  symmetry: 0.8,
  complexity: 0.4,
  colorfield: 0.6,
  speed: 0.5,
  t: 0
};

(function() {
  const canvas = document.getElementById('gdiCanvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  let running = false;

  function resize() {
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
  }

  function hsl(h,s,l) { return `hsl(${h},${s}%,${l}%)`; }

  function drawGeometric() {
    const {width:w, height:h} = canvas;
    const t = gdiState.t;
    const sym = Math.floor(gdiState.symmetry * 12) + 2;
    const cx=w/2, cy=h/2;
    const cf = gdiState.colorfield;

    ctx.fillStyle = '#050508';
    ctx.fillRect(0,0,w,h);

    for (let ring=1; ring<=10; ring++) {
      const r = (ring / 10) * Math.min(w,h) * 0.48;
      const pts = sym * ring;
      for (let i=0; i<pts; i++) {
        const angle = (i/pts)*Math.PI*2 + t*0.3*(ring%2?1:-1);
        const jitter = Math.sin(t*2+ring*i*0.1)*gdiState.complexity*20;
        const x = cx + Math.cos(angle) * (r+jitter);
        const y = cy + Math.sin(angle) * (r+jitter);
        const hue = (ring*30 + i*15 + t*20 + cf*180) % 360;
        const alpha = 0.6 - ring*0.04;
        ctx.beginPath();
        ctx.arc(x,y,2+gdiState.complexity*4,0,Math.PI*2);
        ctx.fillStyle = `hsla(${hue},80%,60%,${alpha})`;
        ctx.fill();
      }
    }

    // Central mandala
    for (let layer=0; layer<6; layer++) {
      const n = sym * (layer+1);
      const r = (layer+1) * 20;
      ctx.beginPath();
      for (let i=0; i<=n; i++) {
        const angle = (i/n)*Math.PI*2 + t*0.5*(layer%2?1:-1);
        const rr = r + Math.sin(t*3+layer+i)*gdiState.complexity*10;
        const x = cx + Math.cos(angle)*rr;
        const y = cy + Math.sin(angle)*rr;
        if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
      }
      ctx.closePath();
      const hue = (layer*40+t*15+cf*200)%360;
      ctx.strokeStyle = `hsla(${hue},90%,65%,0.4)`;
      ctx.lineWidth = 1;
      ctx.stroke();
    }
  }

  function drawOrganic() {
    const {width:w, height:h} = canvas;
    const t = gdiState.t;
    ctx.fillStyle = '#050508';
    ctx.fillRect(0,0,w,h);
    const cf = gdiState.colorfield;

    for (let i=0; i<300; i++) {
      const x = (Math.sin(i*0.17+t*0.4)*0.5+0.5)*w;
      const y = (Math.cos(i*0.13+t*0.3)*0.5+0.5)*h;
      const r = 3 + gdiState.complexity*8*Math.sin(i*0.5+t);
      const hue = (i*1.2+t*30+cf*200)%360;
      ctx.beginPath();
      ctx.arc(x,y,r,0,Math.PI*2);
      ctx.fillStyle = `hsla(${hue},70%,55%,0.3)`;
      ctx.fill();
    }

    for (let j=0; j<8; j++) {
      ctx.beginPath();
      const pts = 60;
      for (let i=0;i<pts;i++) {
        const a = (i/pts)*Math.PI*2;
        const r = 80+j*30+Math.sin(a*gdiState.symmetry*4+t)*gdiState.complexity*40;
        const x = w/2+Math.cos(a+t*0.2*(j%2?1:-1))*r;
        const y = h/2+Math.sin(a+t*0.2*(j%2?1:-1))*r;
        if (i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y);
      }
      ctx.closePath();
      const hue = (j*30+t*20+cf*180)%360;
      ctx.strokeStyle=`hsla(${hue},80%,60%,0.25)`;
      ctx.lineWidth=1.5;
      ctx.stroke();
    }
  }

  function drawNoise() {
    const {width:w, height:h} = canvas;
    const t = gdiState.t;
    const imgd = ctx.createImageData(w,h);
    const cf = gdiState.colorfield;

    for (let x=0;x<w;x++) {
      for (let y=0;y<h;y++) {
        const nx = x/w*4+t*0.1;
        const ny = y/h*4+t*0.1;
        const v = (Math.sin(nx*6.3+Math.cos(ny*3.7))*0.5 +
                   Math.sin(ny*4.1+Math.cos(nx*5.2))*0.3 +
                   Math.sin((nx+ny)*2.8)*0.2)*0.5+0.5;
        const vi = v * gdiState.complexity * 2;
        const r = Math.floor(Math.sin(vi*3.14+cf*6)*127+128);
        const g = Math.floor(Math.sin(vi*3.14+2+cf*4)*127+128);
        const b = Math.floor(Math.sin(vi*3.14+4+cf*2)*127+128);
        const i = (y*w+x)*4;
        imgd.data[i]=r; imgd.data[i+1]=g; imgd.data[i+2]=b; imgd.data[i+3]=200;
      }
    }
    ctx.putImageData(imgd,0,0);
  }

  function drawFractal() {
    const {width:w,height:h} = canvas;
    const t = gdiState.t;
    ctx.fillStyle='#050508';
    ctx.fillRect(0,0,w,h);
    const maxIter = Math.floor(gdiState.complexity*20)+8;
    const zoom = 2.5;
    const ox = -0.5+Math.sin(t*0.1)*0.3;
    const oy = Math.sin(t*0.07)*0.3;
    const cf = gdiState.colorfield;

    const imgd = ctx.createImageData(w,h);
    for (let px=0;px<w;px++) {
      for (let py=0;py<h;py++) {
        let zx = (px/w-0.5)*zoom+ox;
        let zy = (py/h-0.5)*zoom+oy;
        let iter=0;
        while (zx*zx+zy*zy<4 && iter<maxIter) {
          const tmp=zx*zx-zy*zy+zx;
          zy=2*zx*zy+zy; zx=tmp; iter++;
        }
        const v = iter/maxIter;
        const i=(py*w+px)*4;
        if (iter===maxIter) {
          imgd.data[i]=5;imgd.data[i+1]=5;imgd.data[i+2]=15;imgd.data[i+3]=255;
        } else {
          const hue=(v*360+cf*180+t*20)%360;
          const [r,g,b]=hslToRgb(hue/360,0.9,v*0.7+0.1);
          imgd.data[i]=r;imgd.data[i+1]=g;imgd.data[i+2]=b;imgd.data[i+3]=255;
        }
      }
    }
    ctx.putImageData(imgd,0,0);
  }

  function hslToRgb(h,s,l) {
    let r,g,b;
    if(s===0){r=g=b=l;}else{
      const q=l<0.5?l*(1+s):l+s-l*s;
      const p=2*l-q;
      r=hue2rgb(p,q,h+1/3);g=hue2rgb(p,q,h);b=hue2rgb(p,q,h-1/3);
    }
    return [Math.round(r*255),Math.round(g*255),Math.round(b*255)];
  }
  function hue2rgb(p,q,t){if(t<0)t+=1;if(t>1)t-=1;if(t<1/6)return p+(q-p)*6*t;if(t<1/2)return q;if(t<2/3)return p+(q-p)*(2/3-t)*6;return p;}

  function updateScores() {
    const s = Math.floor(gdiState.symmetry*30+gdiState.colorfield*40+Math.random()*30);
    document.getElementById('gdi-score').textContent = Math.min(99,s+50);
    document.getElementById('gdi-harmony').textContent = Math.min(99,Math.floor(gdiState.symmetry*60+40));
    document.getElementById('gdi-contrast').textContent = Math.min(99,Math.floor(gdiState.colorfield*60+gdiState.complexity*20+10));
    document.getElementById('gdi-novelty').textContent = Math.min(99,Math.floor(gdiState.complexity*70+30));
  }

  function loop() {
    if (!document.getElementById('page-gdi').classList.contains('active') &&
        !document.getElementById('page-home').classList.contains('active')) {
      requestAnimationFrame(loop); return;
    }
    resize();
    gdiState.t += gdiState.speed * 0.02;
    switch(gdiState.mode) {
      case 'geometric': drawGeometric(); break;
      case 'organic':   drawOrganic();   break;
      case 'noise':     drawNoise();     break;
      case 'fractal':   drawFractal();   break;
    }
    if (Math.floor(gdiState.t*10)%10===0) updateScores();
    requestAnimationFrame(loop);
  }

  resize();
  loop();
})();

function setGDIMode(mode, btn) {
  gdiState.mode = mode;
  document.querySelectorAll('.demo-controls .ctrl-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('gdi-mode').textContent = 'Mode: '+mode.charAt(0).toUpperCase()+mode.slice(1);
}

function updateGDIParam(param, val) {
  gdiState[param] = parseFloat(val);
  const map = {symmetry:'sym-val', complexity:'cmp-val', colorfield:'col-val', speed:'spd-val'};
  if (map[param]) document.getElementById(map[param]).textContent = parseFloat(val).toFixed(2);
}

function regenerateGDI() { gdiState.t = Math.random()*100; }

// ═══════════════════════════════════════
// UNIVERSE ENGINE
// ═══════════════════════════════════════
const UE = {
  W: 100, H: 100,
  gravity: null, charge: null, energy: null, temp: null,
  viz: 'energy',
  params: { gravity: 0.5, charge: 0.5, decay: 0.5 },
  tick: 0,
  running: true
};

function ueIdx(x,y) { return x*UE.H+y; }

function ueInit() {
  const n = UE.W*UE.H;
  UE.gravity = new Float32Array(n);
  UE.charge  = new Float32Array(n);
  UE.energy  = new Float32Array(n);
  UE.temp    = new Float32Array(n);
  for (let i=0;i<n;i++) {
    UE.gravity[i] = Math.random();
    UE.charge[i]  = Math.random();
    UE.energy[i]  = Math.random()*0.2;
    UE.temp[i]    = Math.random()*0.1;
  }
  UE.tick = 0;
}

function ueDiffuse(f) {
  const n = new Float32Array(f.length);
  for (let x=1;x<UE.W-1;x++) {
    for (let y=1;y<UE.H-1;y++) {
      n[ueIdx(x,y)] = (f[ueIdx(x,y)]+f[ueIdx(x+1,y)]+f[ueIdx(x-1,y)]+f[ueIdx(x,y+1)]+f[ueIdx(x,y-1)])/5;
    }
  }
  return n;
}

function ueUpdate() {
  UE.gravity = ueDiffuse(UE.gravity);
  UE.charge  = ueDiffuse(UE.charge);
  const g = UE.params.gravity;
  const c = UE.params.charge;
  const d = 1 - (UE.params.decay * 0.003);
  for (let i=0;i<UE.W*UE.H;i++) {
    const interaction = UE.gravity[i]*g * UE.charge[i]*c;
    UE.temp[i]   += interaction * 0.01;
    UE.energy[i] += UE.temp[i] * 0.005;
    UE.temp[i]   *= d;
    UE.energy[i] *= d;
  }
  UE.tick++;
}

function ueDraw(canvas) {
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
  const ctx = canvas.getContext('2d');
  const cw=canvas.width, ch=canvas.height;
  const cx=cw/UE.W, cy=ch/UE.H;

  ctx.fillStyle='#050508';
  ctx.fillRect(0,0,cw,ch);

  for (let x=0;x<UE.W;x++) {
    for (let y=0;y<UE.H;y++) {
      const e = UE.energy[ueIdx(x,y)];
      const g = UE.gravity[ueIdx(x,y)];
      const c2 = UE.charge[ueIdx(x,y)];
      let r,gr,b;
      switch(UE.viz) {
        case 'energy':
          r=Math.floor(e*60+g*30); gr=Math.floor(e*240); b=Math.floor(c2*150); break;
        case 'charge':
          r=Math.floor(c2*200); gr=Math.floor(c2*80); b=Math.floor((1-c2)*200); break;
        case 'gravity':
          r=Math.floor(g*40); gr=Math.floor(g*180); b=Math.floor(g*220); break;
        case 'composite':
          r=Math.floor(e*100+g*80); gr=Math.floor(e*200+c2*50); b=Math.floor(g*100+c2*150); break;
      }
      ctx.fillStyle=`rgb(${Math.min(255,r)},${Math.min(255,gr)},${Math.min(255,b)})`;
      ctx.fillRect(x*cx,y*cy,cx+0.5,cy+0.5);
    }
  }
}

function ueCountClusters() {
  const arr = UE.energy;
  const mean = arr.reduce((a,b)=>a+b,0)/arr.length;
  const std  = Math.sqrt(arr.reduce((s,v)=>s+(v-mean)**2,0)/arr.length);
  let c=0;
  for (let i=0;i<arr.length;i++) if (arr[i]>mean+std) c++;
  return c;
}

function ueUpdateStats(clusters) {
  const totalE = (UE.energy.reduce((a,b)=>a+b,0)/UE.energy.length*100).toFixed(1);
  const state = clusters>600?'MATTER':clusters>300?'STABLE':clusters>100?'SPARSE':'ENTROPY';
  document.getElementById('u-clusters').textContent = clusters;
  document.getElementById('u-energy').textContent   = totalE+'%';
  document.getElementById('u-state').textContent    = state;
  document.getElementById('u-tick').textContent     = UE.tick;
  document.getElementById('universe-tick').textContent = 'Tick: '+UE.tick;
}

function injectEnergy() {
  const cx=Math.floor(UE.W/2), cy=Math.floor(UE.H/2);
  for (let x=cx-10;x<cx+10;x++) {
    for (let y=cy-10;y<cy+10;y++) {
      if (x>=0&&x<UE.W&&y>=0&&y<UE.H) {
        UE.energy[ueIdx(x,y)] += Math.random()*0.5;
        UE.temp[ueIdx(x,y)]   += Math.random()*0.3;
      }
    }
  }
}

function resetUniverse() { ueInit(); }

function setUniverseViz(v, btn) {
  UE.viz = v;
  document.querySelectorAll('#page-universe .ctrl-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
}

function setUniverseParam(param, val) {
  UE.params[param] = parseFloat(val);
  const map={gravity:'grav-val',charge:'chrg-val',decay:'decay-val'};
  if(map[param]) document.getElementById(map[param]).textContent=parseFloat(val).toFixed(2);
}

(function() {
  ueInit();
  let f=0;
  function loop() {
    const canvas = document.getElementById('universeCanvas');
    if (!canvas) { requestAnimationFrame(loop); return; }
    ueUpdate();
    if (f%3===0) {
      if (document.getElementById('page-universe').classList.contains('active')) {
        ueDraw(canvas);
        ueUpdateStats(ueCountClusters());
      }
    }
    f++;
    requestAnimationFrame(loop);
  }
  loop();
})();
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)