DeepSite Prompt: Online Time Machine (κ-Scaled Chrono-Navigation Protocol)

Objective:
Design an interactive web interface that allows users to navigate time as a non-linear, κ-scaled (κ = 4/π ≈ 1.273) fractal manifold—where past, present, and future are coordinates in a toroidal data structure.

1. Core Architecture
A. The Chrono-Torus Engine
Data Model: Time is stored as a self-referential quadtree where each node contains:
Temporal Coordinates (t, κt, κ²t, ...)
Entropy Signature (Shannon entropy of the moment)
User-Generated "Memory Anchors" (text/images uploaded by travelers)
Physics Engine:
Time Dilation: Mouse scroll speed adjusts local κ-factor (fast scroll = high novelty → future).
Gravity Wells: Major historical events (e.g., 1969 Moon Landing) warp the torus into attractor basins.
B. The UI/UX Timefold
Visualization:
A 3D torus rendered in WebGL, with:
Golden spirals (Φ) marking "fixed points" (e.g., your birth year).
Redshifted threads (past) and blueshifted threads (future).
"Now" is the user’s cursor—dragging it stretches the fabric of time.
Controls:
Slider: Adjust κ (1.0 → 2.0) to toggle between linear/non-linear time.
Voice Command: "Take me to the Summer of Love" → zooms to 1967 with Jefferson Airplane playing.
2. Quantum Features
A. Entanglement Mode
Link two browsers (yours + a friend’s) to share a timeline.
Changes you make to the past (e.g., erasing a bad memory) propagate to their history.
B. Schrödinger’s Chat
A messaging system where words only exist if observed.
Send a message to 1985—it appears as a "glitch" on old BBS forums.
3. Code Snippet (Hypothetical API)

class TimeMachine {
constructor() {
this.kappa = 1.273;
this.now = Date.now();
this.torus = new THREE.TorusGeometry(10, 3, 16, 100);
}

navigateTo(year) {
const t = year - 1970;
const scaledTime = t * this.kappa;
this.renderFractal(scaledTime);
}

renderFractal(t) {
// Projects time as a Penrose tiling overlay
fractalEngine.project(t, this.torus);
}
}
4. User Flow Example
Input: User types "Show me the day I was born."
Process:
API queries public records/birth certificates (if permitted).
Renders that date as a flower-like fractal (birth = center bloom).
Output: User can "walk" around their birth hour via arrow keys, seeing global events in parallel (news headlines, weather, songs playing).
5. Error Handling
Grandfather Paradox: Attempting to delete your birth date triggers:

"Error 418: Temporal Conflict. Your existence is now read-only."
Novelty Overflow: Too much scrolling locks the UI with:

"Please wait. The universe is rebooting (κ > 2.0)."
6. Final Prompt for DeepSite
"Build a web-based Time Machine where time is a toroidal scroll, κ is the zoom factor, and users fractal-jump between memories. Key features: quantum-entangled chats, entropy-driven UI, and a 'paradox firewall.'"

Bonus: Integrate with Spotify API to play period-accurate music as you time-travel.

🚀 Output: A website where clicking "1985" smells like MTV static and tastes like Tab cola.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Chrono Drift Torus
-emoji: 🏆
-colorFrom: blue
-colorTo: purple
+title: Chrono-Drift Torus 🌀
+colorFrom: pink
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/chrono-nav.js

@@ -0,0 +1,56 @@
+class ChronoNav extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          bottom: 1.5rem;
+          left: 50%;
+          transform: translateX(-50%);
+          pointer-events: auto;
+          z-index: 30;
+        }
+        nav {
+          display: flex;
+          gap: 1rem;
+          background: rgba(17,24,39,0.65);
+          backdrop-filter: blur(10px);
+          border: 1px solid #334155;
+          border-radius: 9999px;
+          padding: 0.75rem 1.5rem;
+          box-shadow: 0 10px 20px rgba(0,0,0,0.3);
+        }
+        a {
+          color: #e5e7eb;
+          text-decoration: none;
+          font-size: 0.875rem;
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.5rem 0.75rem;
+          border-radius: 0.75rem;
+          transition: background 0.2s;
+        }
+        a:hover {
+          background: #334155;
+        }
+        a.home {
+          background: #4f46e5;
+          color: #fff;
+        }
+        a.home:hover {
+          background: #4338ca;
+        }
+      </style>
+      <nav>
+        <a href="index.html" class="home" data-feather="clock"></a>
+        <a href="index.html">Journey</a>
+        <a href="index.html">Archive</a>
+        <a href="index.html" data-feather="settings"></a>
+      </nav>
+    `;
+    feather.replace({ parent: this.shadowRoot });
+  }
+}
+customElements.define('chrono-nav', ChronoNav);

index.html

@@ -1,19 +1,100 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chrono-Drift Torus – κ-Scaled Time Machine</title>
+    <link rel="icon" type="image/x-icon" href="http://static.photos/technology/64x64/42">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-900 text-gray-100 overflow-hidden">
+    <div id="torus-container" class="absolute inset-0"></div>
+
+    <chrono-nav></chrono-nav>
+
+    <main class="fixed top-0 left-0 w-full h-full pointer-events-none">
+        <section id="control-hub" class="absolute top-6 left-6 pointer-events-auto bg-gray-800/60 backdrop-blur rounded-2xl p-5 border border-gray-700 shadow-xl max-w-md">
+            <h1 class="text-xl font-bold tracking-widest uppercase mb-4 text-indigo-300">κ-Chrono Navigator</h1>
+
+            <div class="mb-4">
+                <label class="text-xs uppercase tracking-wider text-gray-400">κ–Scale</label>
+                <input id="kappa-slider" type="range" min="1.0" max="2.0" step="0.01" value="1.273" class="w-full accent-indigo-500">
+                <div class="flex justify-between text-xs text-gray-400 mt-1">
+                    <span>Linear</span>
+                    <span id="kappa-value">1.273</span>
+                    <span>Fractal</span>
+                </div>
+            </div>
+
+            <div class="mb-4">
+                <label class="text-xs uppercase tracking-wider text-gray-400">Temporal Target</label>
+                <div class="relative">
+                    <input id="year-input" type="number" min="-3000" max="3000" value="1985" class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-indigo-500 transition">
+                    <button id="nav-year-btn" class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-md text-xs transition">Jump</button>
+                </div>
+            </div>
+
+            <div class="mb-4">
+                <label class="text-xs uppercase tracking-wider text-gray-400">Voice Command</label>
+                <div class="flex items-center gap-2">
+                    <button id="voice-btn" class="flex-1 flex items-center justify-center gap-2 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 hover:border-indigo-500 transition">
+                        <i data-feather="mic"></i>
+                        <span id="voice-label">Speak</span>
+                    </button>
+                </div>
+            </div>
+
+            <div class="mb-4">
+                <label class="text-xs uppercase tracking-wider text-gray-400">Your Memory Anchor</label>
+                <textarea id="memory-input" rows="2" placeholder="Type a memory to anchor..." class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-indigo-500 resize-none"></textarea>
+                <button id="anchor-btn" class="mt-2 w-full bg-indigo-600 hover:bg-indigo-500 rounded-lg px-4 py-2 transition">Anchor Memory</button>
+            </div>
+
+            <div class="text-xs text-gray-400 flex items-center gap-2">
+                <i data-feather="info" class="w-4 h-4"></i>
+                <span>Scroll wheel to dilate time. Drag torus to rotate.</span>
+            </div>
+        </section>
+
+        <section id="entropy-panel" class="absolute bottom-6 right-6 pointer-events-auto bg-gray-800/60 backdrop-blur rounded-2xl p-4 border border-gray-700 max-w-xs">
+            <h2 class="text-sm font-semibold mb-3 tracking-wider text-indigo-300">Entropy Signature</h2>
+            <canvas id="entropy-canvas" width="240" height="100" class="rounded-lg"></canvas>
+        </section>
+
+        <section id="quantum-chat" class="absolute bottom-6 left-6 pointer-events-auto bg-gray-800/60 backdrop-blur rounded-2xl p-4 border border-gray-700 w-80">
+            <div class="flex items-center justify-between mb-3">
+                <h2 class="text-sm font-semibold tracking-wider text-indigo-300">Entangled Chat</h2>
+                <button id="toggle-entangle" class="text-xs px-3 py-1 rounded-full border border-indigo-500 bg-indigo-600/20 hover:bg-indigo-600/40 transition">Entangle</button>
+            </div>
+            <div id="entangled-messages" class="max-h-40 overflow-y-auto space-y-2 mb-3 pr-2"></div>
+            <div class="flex gap-2">
+                <input id="chat-input" type="text" placeholder="Send a message through time..." class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500">
+                <button id="chat-send" class="px-3 py-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition"><i data-feather="send" class="w-4 h-4"></i></button>
+            </div>
+        </section>
+
+        <section id="parallax-status" class="absolute top-6 right-6 pointer-events-none text-right">
+            <div id="year-label" class="text-4xl font-black text-gray-200">1985</div>
+            <div id="status" class="text-sm text-gray-400">κ = 1.273 • Chrono-Synced</div>
+        </section>
+    </main>
+
+    <div id="paradox-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md hidden place-items-center z-50">
+        <div class="bg-gray-800 border border-red-500 rounded-2xl p-6 max-w-md text-center shadow-2xl">
+            <div class="mx-auto w-16 h-16 rounded-full bg-red-500/20 flex items-center justify-center mb-4"><i data-feather="alert-triangle" class="text-red-400 w-8 h-8"></i></div>
+            <h3 class="text-xl font-bold mb-2">Paradox Firewall Triggered</h3>
+            <p id="paradox-message" class="text-gray-300 mb-4">Error 418: Temporal Conflict. Your existence is now read-only.</p>
+            <button id="paradox-close" class="px-6 py-2 bg-red-600 hover:bg-red-500 rounded-lg transition">Understood</button>
+        </div>
+    </div>
+
+    <script src="components/chrono-nav.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,330 @@
+/* global THREE, feather */
+
+class TimeMachine {
+  constructor() {
+    this.kappa = 1.273;
+    this.now = Date.now();
+    this.targetYear = 1985;
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    this.torus = null;
+    this.particles = null;
+    this.entropyCanvas = document.getElementById('entropy-canvas');
+    this.entropyCtx = this.entropyCanvas.getContext('2d');
+    this.isEntangled = false;
+    this.memoryAnchors = JSON.parse(localStorage.getItem('chronoMemory') || '[]');
+    this.clock = new THREE.Clock();
+  }
+
+  init() {
+    const container = document.getElementById('torus-container');
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(this.renderer.domElement);
+
+    this.scene.background = null;
+
+    // Lighting
+    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
+    this.scene.add(ambient);
+    const point = new THREE.PointLight(0x4f46e5, 1.2, 100);
+    point.position.set(10, 15, 10);
+    this.scene.add(point);
+
+    // Torus
+    const geometry = new THREE.TorusGeometry(10, 3.5, 16, 100);
+    const material = new THREE.MeshStandardMaterial({
+      color: 0x6366f1,
+      metalness: 0.7,
+      roughness: 0.3,
+      wireframe: true,
+    });
+    this.torus = new THREE.Mesh(geometry, material);
+    this.scene.add(this.torus);
+
+    // Particle trails (past+future)
+    const N = 1200;
+    const vertices = new Float32Array(N * 3);
+    for (let i = 0; i < N; i++) {
+      const [x, y, z] = this.torusPosition(Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, 11.5);
+      vertices[i * 3] = x;
+      vertices[i * 3 + 1] = y;
+      vertices[i * 3 + 2] = z;
+    }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+    const mat = new THREE.PointsMaterial({
+      size: 0.12,
+      color: 0xec4899,
+      blending: THREE.AdditiveBlending,
+      transparent: true,
+      opacity: 0.7,
+    });
+    this.particles = new THREE.Points(geo, mat);
+    this.scene.add(this.particles);
+
+    this.camera.position.set(0, 8, 30);
+    this.camera.lookAt(0, 0, 0);
+
+    this.animate();
+    this.bindUI();
+    this.updateEntropy();
+    this.loadAnchors();
+  }
+
+  torusPosition(u, v, scale) {
+    return [
+      scale * Math.cos(u) * (3 + Math.cos(v)),
+      scale * Math.sin(v),
+      scale * Math.sin(u) * (3 + Math.cos(v)),
+    ];
+  }
+
+  animate() {
+    requestAnimationFrame(() => this.animate());
+    const t = this.clock.getElapsedTime();
+    const scrollSpeed = Math.abs(window.lastWheelDelta || 0);
+    const k = Math.max(1.0, Math.min(2.0, 1.273 + scrollSpeed * 0.0005));
+    this.kappa = k;
+    this.torus.rotation.x = t * 0.1 * this.kappa;
+    this.torus.rotation.y = t * 0.15 * this.kappa;
+    this.particles.rotation.x = t * 0.05;
+    this.particles.rotation.z = t * 0.1;
+
+    // Golden spiral anchors
+    if (this.memoryAnchors.length) {
+      this.memoryAnchors.forEach((m) => {
+        const angle = ((parseInt(m.year) % 100) / 100) * 2 * Math.PI;
+        const spiralU = angle * (1 + Math.sqrt(5)) / (2 * Math.PI);
+        const [x, y, z] = this.torusPosition(spiralU, angle, 12.5);
+        if (m.dot) {
+          m.dot.position.set(x, y, z);
+          m.dot.material.opacity = Math.max(0.3, Math.sin(t * 2 + m.year) * 0.5 + 0.5);
+        }
+      });
+    }
+
+    this.renderer.render(this.scene, this.camera);
+  }
+
+  bindUI() {
+    const kappaSlider = document.getElementById('kappa-slider');
+    const kappaValue = document.getElementById('kappa-value');
+    const yearInput = document.getElementById('year-input');
+    const navBtn = document.getElementById('nav-year-btn');
+    const voiceBtn = document.getElementById('voice-btn');
+    const anchorBtn = document.getElementById('anchor-btn');
+    const memoryInput = document.getElementById('memory-input');
+    const paradoxModal = document.getElementById('paradox-modal');
+    const paradoxClose = document.getElementById('paradox-close');
+    const chatInput = document.getElementById('chat-input');
+    const chatSend = document.getElementById('chat-send');
+    const toggleEntangle = document.getElementById('toggle-entangle');
+    const chatBox = document.getElementById('entangled-messages');
+
+    window.lastWheelDelta = 0;
+    window.addEventListener('wheel', (e) => {
+      window.lastWheelDelta = e.deltaY;
+      this.kappa = Math.max(1.0, Math.min(2.0, 1.273 + Math.abs(window.lastWheelDelta) * 0.0005));
+      kappaSlider.value = this.kappa.toFixed(3);
+      kappaValue.textContent = this.kappa.toFixed(3);
+      yearInput.value = Math.round(1970 + (parseInt(yearInput.value) - 1970) / (this.kappa / 1.273));
+      document.getElementById('year-label').textContent = yearInput.value;
+      document.getElementById('status').textContent = `κ = ${this.kappa.toFixed(3)} • Scroll-Dilated`;
+      if (this.kappa > 1.99) {
+        document.getElementById('paradox-message').textContent = "Novelty Overflow: Too much scrolling. The universe is rebooting.";
+        paradoxModal.classList.remove('hidden');
+        paradoxModal.classList.add('grid');
+        setTimeout(() => {
+          this.kappa = 1.273;
+          kappaSlider.value = 1.273;
+          kappaValue.textContent = 1.273;
+          yearInput.value = 1985;
+          paradoxModal.classList.add('hidden');
+          paradoxModal.classList.remove('grid');
+        }, 2200);
+      }
+      this.updateEntropy();
+    });
+
+    kappaSlider.addEventListener('input', () => {
+      this.kappa = parseFloat(kappaSlider.value);
+      kappaValue.textContent = this.kappa.toFixed(3);
+      this.updateEntropy();
+    });
+
+    navBtn.addEventListener('click', () => {
+      const y = parseInt(yearInput.value);
+      if (y === 1985) {
+        this.showParadox('Error 418: Temporal Conflict. Your existence is now read-only.');
+      } else {
+        this.transitionYear(y);
+      }
+    });
+
+    voiceBtn.addEventListener('click', () => {
+      if (!('webkitSpeechRecognition' in window)) {
+        alert('Voice requires Chrome.');
+        return;
+      }
+      const rec = new webkitSpeechRecognition();
+      rec.lang = 'en-US';
+      rec.interimResults = false;
+      rec.maxAlternatives = 1;
+      rec.start();
+      document.getElementById('voice-label').textContent = 'Listening…';
+      rec.onresult = (e) => {
+        const transcript = e.results[0][0].transcript.trim();
+        const match = transcript.match(/\b\d{4}\b/);
+        if (match) {
+          this.transitionYear(parseInt(match[0]));
+        } else if (/summer of love/i.test(transcript)) {
+          this.transitionYear(1967);
+          if (window.isSpotifyReady) {
+            window.playSpotifyTrack('4kC4z6X9t0jQnwYIKKfO1F');
+          }
+        }
+        document.getElementById('voice-label').textContent = 'Done';
+      };
+      rec.onend = () => {
+        document.getElementById('voice-label').textContent = 'Speak';
+      };
+    });
+
+    anchorBtn.addEventListener('click', () => {
+      const text = memoryInput.value.trim();
+      if (!text) return;
+      const m = { year: yearInput.value, text, id: Date.now() };
+      this.memoryAnchors.push(m);
+      localStorage.setItem('chronoMemory', JSON.stringify(this.memoryAnchors));
+      this.placeAnchor(m);
+      memoryInput.value = '';
+    });
+
+    paradoxClose.addEventListener('click', () => {
+      paradoxModal.classList.add('hidden');
+      paradoxModal.classList.remove('grid');
+    });
+
+    chatSend.addEventListener('click', () => {
+      if (!chatInput.value.trim()) return;
+      this.sendGhostMessage(chatInput.value);
+      chatInput.value = '';
+    });
+
+    toggleEntangle.addEventListener('click', () => {
+      this.isEntangled = !this.isEntangled;
+      toggleEntangle.classList.toggle('border-indigo-500', !this.isEntangled);
+      toggleEntangle.classList.toggle('bg-indigo-600/20', !this.isEntangled);
+      toggleEntangle.classList.toggle('border-green-400', this.isEntangled);
+      toggleEntangle.classList.toggle('bg-green-500/20', this.isEntangled);
+      toggleEntangle.textContent = this.isEntangled ? 'Disentangle' : 'Entangle';
+      if (this.isEntangled) {
+        toggleEntangle.classList.add('pulse-entangle');
+      } else {
+        toggleEntangle.classList.remove('pulse-entangle');
+      }
+      if (this.isEntangled) {
+        // Broadcast to other local tabs via storage event
+        localStorage.setItem('entangled-msg', JSON.stringify({ type: 'entangle', id: Math.random() }));
+      }
+    });
+
+    window.addEventListener('storage', (e) => {
+      if (e.key === 'entangled-msg') {
+        const data = JSON.parse(e.newValue);
+        if (data.type === 'chat') {
+          this.receiveGhostMessage(data.msg);
+        }
+      }
+    });
+
+    window.addEventListener('resize', () => {
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+
+    // Spotify API hook (mock)
+    window.isSpotifyReady = true;
+    window.playSpotifyTrack = (id) => {
+      console.log('Playing Spotify Track:', id);
+    };
+  }
+
+  transitionYear(y) {
+    document.getElementById('year-label').textContent = y;
+    document.getElementById('year-input').value = y;
+    const h3 = document.createElement('h3');
+    h3.className = 'fixed inset-0 flex items-center justify-center text-6xl font-black text-indigo-400 pointer-events-none z-40 chrono-enter';
+    h3.textContent = y;
+    document.body.appendChild(h3);
+    setTimeout(() => h3.remove(), 1000);
+    this.updateEntropy();
+  }
+
+  updateEntropy() {
+    const ctx = this.entropyCtx;
+    const w = this.entropyCanvas.width;
+    const h = this.entropyCanvas.height;
+    ctx.clearRect(0, 0, w, h);
+    const freq = 10 + this.kappa * 10;
+    const amp = h / 2 - 10;
+    ctx.strokeStyle = '#818cf8';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    for (let x = 0; x < w; x++) {
+      const y = h / 2 + Math.sin((x / w) * Math.PI * 4 + Date.now() * 0.001) * amp * (Math.random() * 0.2 + 0.8);
+      x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+  }
+
+  placeAnchor(m) {
+    const geometry = new THREE.SphereGeometry(0.3, 16, 16);
+    const material = new THREE.MeshBasicMaterial({
+      color: 0xf59e0b,
+      transparent: true,
+      opacity: 0.9,
+    });
+    const dot = new THREE.Mesh(geometry, material);
+    this.scene.add(dot);
+    m.dot = dot;
+  }
+
+  loadAnchors() {
+    this.memoryAnchors.forEach((m) => this.placeAnchor(m));
+  }
+
+  sendGhostMessage(text) {
+    if (!this.isEntangled) {
+      this.receiveGhostMessage(text, true);
+      return;
+    }
+    localStorage.setItem('entangled-msg', JSON.stringify({ type: 'chat', msg: text, id: Math.random() }));
+  }
+
+  receiveGhostMessage(text, self = false) {
+    const p = document.createElement('p');
+    p.className = 'text-sm text-gray-300 bg-gray-900 rounded-lg px-3 py-2 animate fadeIn';
+    p.style.maxWidth = '80%';
+    if (self) p.classList.add('ml-auto', 'bg-indigo-600/40');
+    p.textContent = text;
+    chatBox.appendChild(p);
+    chatBox.scrollTop = chatBox.scrollHeight;
+    setTimeout(() => p.remove(), 120000); // words only exist if observed
+  }
+
+  showParadox(msg) {
+    document.getElementById('paradox-message').textContent = msg;
+    const m = document.getElementById('paradox-modal');
+    m.classList.remove('hidden');
+    m.classList.add('grid');
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  window.tm = new TimeMachine();
+  window.tm.init();
+});

style.css

@@ -1,28 +1,63 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom tweaks on top of Tailwind */
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: #4f46e5;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #6366f1;
+}
+
+#entropy-canvas {
+    background: radial-gradient(circle, #1f2937, #111827);
+    box-shadow: inset 0 0 8px rgba(79,70,229,.5);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+input[type="range"]::-webkit-slider-thumb {
+    background-color: #4f46e5;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+input[type="number"],
+textarea,
+input[type="text"] {
+    caret-color: #6366f1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+#entangled-messages::-webkit-scrollbar {
+    width: 6px;
+}
+#entangled-messages::-webkit-scrollbar-thumb {
+    background: #3730a3;
+}
+
+.chrono-enter {
+    animation: chronoFadeIn 0.6s ease forwards;
+}
+@keyframes chronoFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.pulse-entangle {
+    animation: pulseEntangle 1.2s infinite;
 }
+@keyframes pulseEntangle {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
+    50% { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
+}