Hugging Face's logo

Spaces:
Codfskitraceon
/
TRIGNUM-TQPE-Pipeline
Running

App Files Community
TRIGNUM-TQPE-Pipeline / index.html
Codfskitraceon's picture
Codfskitraceon
Update index.html
ee76658 verified
raw
history blame contribute delete
36.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TQPE β€” Building The Bridge</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Space+Mono&display=swap" rel="stylesheet">
<style>
:root {
 --bg: #010308;
 --bg2: #03080f;
 --blue: #00e5ff;
 --blue2: #0090b8;
 --red: #ff1744;
 --gold: #ffd600;
 --gold2: #ff9800;
 --green: #00e676;
 --purple: #d500f9;
 --text: #7090a0;
 --text-bright: #c0d8e8;
 --border: #0a1820;
 --quantum: #7c4dff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
 background: var(--bg);
 color: var(--text);
 font-family: 'Share Tech Mono', monospace;
 min-height: 100vh;
 overflow-x: hidden;
}
/* Star field */
#starfield {
 position: fixed;
 inset: 0;
 z-index: 0;
 pointer-events: none;
}
.star {
 position: absolute;
 border-radius: 50%;
 background: white;
 animation: twinkle var(--d, 3s) infinite var(--delay, 0s);
}
@keyframes twinkle {
 0%,100% { opacity: var(--min-op, 0.1); }
 50% { opacity: var(--max-op, 0.6); }
}
/* Scanlines */
body::after {
 content: '';
 position: fixed;
 inset: 0;
 background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px);
 pointer-events: none;
 z-index: 1000;
}
.page {
 position: relative;
 z-index: 1;
 max-width: 1000px;
 margin: 0 auto;
 padding: 40px 20px 80px;
}
/* ── HEADER ── */
.header {
 text-align: center;
 margin-bottom: 60px;
}
.lab-tag {
 font-size: 9px;
 letter-spacing: 8px;
 color: var(--blue);
 opacity: 0.5;
 margin-bottom: 16px;
}
.main-title {
 font-family: 'Orbitron', monospace;
 font-size: clamp(36px, 7vw, 72px);
 font-weight: 900;
 line-height: 1;
 margin-bottom: 8px;
 letter-spacing: 4px;
}
.main-title .tqpe { color: var(--blue); text-shadow: 0 0 30px var(--blue), 0 0 60px rgba(0,229,255,0.2); }
.main-title .bridge { color: var(--text-bright); }
.tagline {
 font-size: 11px;
 letter-spacing: 4px;
 color: var(--text);
 opacity: 0.4;
 margin-bottom: 24px;
}
.molecule-badge {
 display: inline-flex;
 align-items: center;
 gap: 12px;
 border: 1px solid var(--quantum);
 padding: 8px 20px;
 font-size: 10px;
 letter-spacing: 3px;
 color: var(--quantum);
 opacity: 0.7;
}
/* ── MOLECULE VISUALIZER ── */
.molecule-section {
 display: flex;
 justify-content: center;
 margin-bottom: 50px;
}
#molecule-canvas {
 border: 1px solid var(--border);
 border-radius: 2px;
 background: radial-gradient(ellipse at center, rgba(124,77,255,0.05) 0%, transparent 70%);
}
/* ── PIPELINE ── */
.pipeline-title {
 text-align: center;
 font-family: 'Orbitron', monospace;
 font-size: 10px;
 letter-spacing: 6px;
 color: var(--text);
 opacity: 0.3;
 margin-bottom: 30px;
 text-transform: uppercase;
}
.pipeline {
 display: flex;
 flex-direction: column;
 gap: 0;
 margin-bottom: 40px;
 position: relative;
}
/* Vertical connector line */
.pipeline::before {
 content: '';
 position: absolute;
 left: 28px;
 top: 40px;
 bottom: 40px;
 width: 1px;
 background: linear-gradient(to bottom, var(--blue-dim, #001a26), var(--quantum), var(--gold));
 opacity: 0.3;
}
.phase-card {
 display: flex;
 gap: 20px;
 padding: 20px;
 border: 1px solid var(--border);
 background: var(--bg2);
 margin-bottom: 8px;
 position: relative;
 transition: all 0.6s;
 overflow: hidden;
 cursor: default;
}
.phase-card::before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 3px;
 background: var(--border);
 transition: background 0.6s, box-shadow 0.6s;
}
.phase-card.active::before {
 background: var(--phase-color, var(--blue));
 box-shadow: 0 0 12px var(--phase-color, var(--blue));
}
.phase-card.complete::before {
 background: var(--green);
 box-shadow: 0 0 8px var(--green);
}
.phase-card.failed::before {
 background: var(--red);
 box-shadow: 0 0 8px var(--red);
 animation: pulse-red 0.5s infinite;
}
.phase-card.active {
 border-color: rgba(255,255,255,0.08);
 background: linear-gradient(90deg, rgba(0,229,255,0.03) 0%, transparent 100%);
}
/* Sweep animation */
.phase-card .sweep {
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.04) 50%, transparent 100%);
 transform: translateX(-100%);
 transition: none;
}
.phase-card.active .sweep {
 animation: sweep 1.5s ease-in-out infinite;
}
@keyframes sweep {
 0% { transform: translateX(-100%); }
 100% { transform: translateX(100%); }
}
.phase-number {
 font-family: 'Orbitron', monospace;
 font-size: 24px;
 font-weight: 900;
 color: var(--border);
 width: 40px;
 flex-shrink: 0;
 transition: color 0.6s, text-shadow 0.6s;
 line-height: 1;
 padding-top: 2px;
}
.phase-card.active .phase-number,
.phase-card.complete .phase-number { color: var(--phase-color, var(--blue)); }
.phase-card.active .phase-number { text-shadow: 0 0 15px var(--phase-color, var(--blue)); }
.phase-body { flex: 1; min-width: 0; }
.phase-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 6px;
 flex-wrap: wrap;
 gap: 8px;
}
.phase-name {
 font-family: 'Orbitron', monospace;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 2px;
 color: var(--text);
 opacity: 0.4;
 transition: color 0.6s, opacity 0.6s;
}
.phase-card.active .phase-name,
.phase-card.complete .phase-name,
.phase-card.failed .phase-name { color: var(--text-bright); opacity: 1; }
.phase-badge {
 font-size: 9px;
 letter-spacing: 2px;
 padding: 3px 10px;
 border-radius: 2px;
 opacity: 0;
 transition: opacity 0.4s;
 white-space: nowrap;
}
.phase-card.active .phase-badge,
.phase-card.complete .phase-badge,
.phase-card.failed .phase-badge { opacity: 1; }
.badge-waiting { background: rgba(120,120,120,0.1); color: var(--text); border: 1px solid rgba(120,120,120,0.2); }
.badge-running { background: rgba(0,229,255,0.1); color: var(--blue); border: 1px solid rgba(0,229,255,0.3); animation: blink-badge 0.8s infinite; }
.badge-pass { background: rgba(0,230,118,0.1); color: var(--green); border: 1px solid rgba(0,230,118,0.3); }
.badge-fail { background: rgba(255,23,68,0.15); color: var(--red); border: 1px solid rgba(255,23,68,0.4); }
.badge-raw { background: rgba(124,77,255,0.1); color: var(--quantum); border: 1px solid rgba(124,77,255,0.3); }
.badge-integrated { background: rgba(0,229,255,0.1); color: var(--blue); border: 1px solid rgba(0,229,255,0.3); }
.badge-sovereign { background: rgba(255,214,0,0.1); color: var(--gold); border: 1px solid rgba(255,214,0,0.3); animation: blink-badge 1s infinite; }
.badge-committed { background: rgba(255,214,0,0.15); color: var(--gold); border: 1px solid rgba(255,214,0,0.4); }
@keyframes blink-badge { 0%,100%{opacity:1} 50%{opacity:0.5} }
.phase-desc {
 font-size: 11px;
 color: var(--text);
 opacity: 0.3;
 line-height: 1.6;
 transition: opacity 0.6s;
}
.phase-card.active .phase-desc,
.phase-card.complete .phase-desc,
.phase-card.failed .phase-desc { opacity: 0.7; }
.phase-data {
 margin-top: 10px;
 font-size: 11px;
 line-height: 1.8;
 display: none;
}
.phase-card.active .phase-data,
.phase-card.complete .phase-data,
.phase-card.failed .phase-data { display: block; }
.data-row {
 display: flex;
 gap: 10px;
 align-items: baseline;
}
.data-key { color: var(--text); opacity: 0.4; font-size: 9px; letter-spacing: 2px; min-width: 120px; }
.data-val { color: var(--text-bright); font-family: 'Space Mono', monospace; font-size: 12px; }
.data-val.good { color: var(--green); }
.data-val.warn { color: var(--gold); }
.data-val.bad { color: var(--red); }
.data-val.quantum { color: var(--quantum); }
.data-val.blue { color: var(--blue); }
/* ── QUANTUM PARTICLE CANVAS ── */
#quantum-canvas {
 display: block;
 margin: 0 auto 40px;
 border: 1px solid var(--border);
 background: transparent;
}
/* ── RESULT PANEL ── */
.result-panel {
 border: 1px solid var(--border);
 background: var(--bg2);
 padding: 32px;
 text-align: center;
 margin-bottom: 40px;
 position: relative;
 overflow: hidden;
 display: none;
}
.result-panel.visible { display: block; animation: fadeIn 0.8s ease; }
.result-glow {
 position: absolute;
 inset: 0;
 opacity: 0.05;
 pointer-events: none;
}
.result-state {
 font-family: 'Orbitron', monospace;
 font-size: clamp(18px, 4vw, 32px);
 font-weight: 900;
 letter-spacing: 4px;
 margin-bottom: 16px;
}
.result-numbers {
 display: flex;
 justify-content: center;
 gap: 40px;
 flex-wrap: wrap;
 margin: 24px 0;
}
.result-num {
 text-align: center;
}
.num-label {
 font-size: 8px;
 letter-spacing: 3px;
 opacity: 0.4;
 margin-bottom: 6px;
}
.num-value {
 font-family: 'Orbitron', monospace;
 font-size: 22px;
 font-weight: 700;
}
.result-quote {
 font-size: 12px;
 font-style: italic;
 opacity: 0.5;
 margin-top: 20px;
 line-height: 1.8;
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}
/* ── CONTROLS ── */
.controls {
 display: flex;
 justify-content: center;
 gap: 16px;
 margin-bottom: 50px;
 flex-wrap: wrap;
}
.btn {
 font-family: 'Orbitron', monospace;
 font-size: 10px;
 font-weight: 700;
 letter-spacing: 3px;
 padding: 12px 28px;
 cursor: pointer;
 border: 1px solid;
 background: transparent;
 position: relative;
 overflow: hidden;
 transition: all 0.3s;
 text-transform: uppercase;
}
.btn-primary { border-color: var(--blue); color: var(--blue); }
.btn-primary:hover { background: var(--blue); color: var(--bg); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--bg); }
.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-gold:hover { background: var(--gold); color: var(--bg); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: inherit; }
/* ── METRICS BAR ── */
.metrics-bar {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 gap: 12px;
 margin-bottom: 40px;
}
.metric-box {
 border: 1px solid var(--border);
 background: var(--bg2);
 padding: 16px;
 text-align: center;
}
.metric-label {
 font-size: 8px;
 letter-spacing: 3px;
 opacity: 0.3;
 margin-bottom: 8px;
 text-transform: uppercase;
}
.metric-value {
 font-family: 'Orbitron', monospace;
 font-size: 18px;
 font-weight: 700;
 color: var(--blue);
 transition: color 0.5s;
}
/* ── EPISTEMIC SCORE ── */
.score-arc-section {
 display: flex;
 justify-content: center;
 margin-bottom: 10px;
}
/* ── FOOTER ── */
.footer {
 text-align: center;
 border-top: 1px solid var(--border);
 padding-top: 30px;
 opacity: 0.25;
 font-size: 9px;
 letter-spacing: 3px;
 line-height: 2;
}
/* Animations */
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.6} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@media (max-width: 600px) {
 .pipeline::before { display: none; }
 .phase-card { flex-direction: column; gap: 10px; }
 .result-numbers { gap: 20px; }
}
</style>
</head>
<body>
<canvas id="starfield" style="position:fixed;inset:0;z-index:0;pointer-events:none"></canvas>
<div class="page">
<!-- Header -->
 <div class="header">
 <div class="lab-tag">βš› TRACE ON LAB β€” TRIGNUMENTALITY QUANTUM DIVISION</div>
 <div class="main-title">
 <span class="tqpe">TQPE</span><br>
 <span class="bridge" style="font-size:0.55em;letter-spacing:8px">BUILDING THE BRIDGE</span>
 </div>
 <div class="tagline">Trignumental Quantum Phase Estimation Β· Epistemic Authorization for Quantum Advantage</div>
 <div class="molecule-badge">βš› LIVE DEMO Β· Hβ‚‚ MOLECULE Β· STO-3G BASIS Β· R = 0.7414 Γ…</div>
 </div>
<!-- Molecule Canvas -->
 <div class="molecule-section">
 <canvas id="molecule-canvas" width="300" height="150"></canvas>
 </div>
<!-- Metrics -->
 <div class="metrics-bar">
 <div class="metric-box">
 <div class="metric-label">QUBITS</div>
 <div class="metric-value" id="met-qubits">2</div>
 </div>
 <div class="metric-box">
 <div class="metric-label">CIRCUIT DEPTH</div>
 <div class="metric-value" id="met-depth">8</div>
 </div>
 <div class="metric-box">
 <div class="metric-label">QPE ESTIMATE</div>
 <div class="metric-value" id="met-estimate" style="color:var(--quantum)">β€”</div>
 </div>
 <div class="metric-box">
 <div class="metric-label">EXACT FCI</div>
 <div class="metric-value" style="color:var(--text);opacity:0.5">-1.1373</div>
 </div>
 <div class="metric-box">
 <div class="metric-label">EPISTEMIC SCORE</div>
 <div class="metric-value" id="met-epistemic" style="color:var(--gold)">β€”</div>
 </div>
 <div class="metric-box">
 <div class="metric-label">T-CHIP STATE</div>
 <div class="metric-value" id="met-tchip" style="font-size:24px">β—ˆ</div>
 </div>
 </div>
<!-- Controls -->
 <div class="controls">
 <button class="btn btn-primary" id="btn-run" onclick="runPipeline()">β–Έ RUN TQPE PIPELINE</button>
 <button class="btn btn-danger" id="btn-reset" onclick="resetPipeline()">β†Ί RESET</button>
 <button class="btn btn-gold" id="btn-sovereign" onclick="sovereignDecide()" disabled>🟑 HUMAN DECISION</button>
 </div>
<!-- Pipeline title -->
 <div class="pipeline-title">β€” 5-Phase Trignumental Pipeline β€”</div>
<!-- Pipeline -->
 <div class="pipeline" id="pipeline">
<div class="phase-card" id="phase-1" style="--phase-color: var(--blue)">
 <div class="sweep"></div>
 <div class="phase-number">01</div>
 <div class="phase-body">
 <div class="phase-header">
 <div class="phase-name">TECHNICAL A PRIORI VALIDATION</div>
 <div class="phase-badge badge-waiting" id="badge-1">WAITING</div>
 </div>
 <div class="phase-desc">Principle 2 β€” Validate circuit before any quantum execution. Subtractive Filter applied to circuit structure.</div>
 <div class="phase-data" id="data-1">
 <div class="data-row"><div class="data-key">CIRCUIT HASH</div><div class="data-val blue" id="d1-hash">β€”</div></div>
 <div class="data-row"><div class="data-key">CONSERVATION LAWS</div><div class="data-val" id="d1-conservation">β€”</div></div>
 <div class="data-row"><div class="data-key">RESOURCE CHECK</div><div class="data-val" id="d1-resources">β€”</div></div>
 <div class="data-row"><div class="data-key">SUBTRACTIVE FILTER</div><div class="data-val" id="d1-filter">β€”</div></div>
 </div>
 </div>
 </div>
<div class="phase-card" id="phase-2" style="--phase-color: var(--quantum)">
 <div class="sweep"></div>
 <div class="phase-number">02</div>
 <div class="phase-body">
 <div class="phase-header">
 <div class="phase-name">QUANTUM EXECUTION β€” RAW MATERIAL</div>
 <div class="phase-badge badge-waiting" id="badge-2">WAITING</div>
 </div>
 <div class="phase-desc">Principle 1 β€” Execute validated circuit. Output is explicitly tagged as unvalidated raw material.</div>
 <div class="phase-data" id="data-2">
 <div class="data-row"><div class="data-key">QPE PHASE</div><div class="data-val quantum" id="d2-phase">β€”</div></div>
 <div class="data-row"><div class="data-key">ENERGY ESTIMATE</div><div class="data-val quantum" id="d2-energy">β€”</div></div>
 <div class="data-row"><div class="data-key">ERROR BARS</div><div class="data-val" id="d2-error">β€”</div></div>
 <div class="data-row"><div class="data-key">STATUS</div><div class="data-val warn" id="d2-status">β€”</div></div>
 </div>
 </div>
 </div>
<div class="phase-card" id="phase-3" style="--phase-color: var(--blue)">
 <div class="sweep"></div>
 <div class="phase-number">03</div>
 <div class="phase-body">
 <div class="phase-header">
 <div class="phase-name">EPISTEMIC INTEGRATION</div>
 <div class="phase-badge badge-waiting" id="badge-3">WAITING</div>
 </div>
 <div class="phase-desc">Principles 4 & 5 β€” Retrieve empirical evidence via TensorRAG. Compare with experimental measurements. Bayesian inference.</div>
 <div class="phase-data" id="data-3">
 <div class="data-row"><div class="data-key">PERUZZO 2014</div><div class="data-val" id="d3-peruzzo">β€”</div></div>
 <div class="data-row"><div class="data-key">VARIATIONAL BOUND</div><div class="data-val" id="d3-variational">β€”</div></div>
 <div class="data-row"><div class="data-key">CHEMICAL ACCURACY</div><div class="data-val" id="d3-accuracy">β€”</div></div>
 <div class="data-row"><div class="data-key">EPISTEMIC SCORE</div><div class="data-val" id="d3-score">β€”</div></div>
 </div>
 </div>
 </div>
<div class="phase-card" id="phase-4" style="--phase-color: var(--gold)">
 <div class="sweep"></div>
 <div class="phase-number">04</div>
 <div class="phase-body">
 <div class="phase-header">
 <div class="phase-name">HUMAN SOVEREIGNTY GATE</div>
 <div class="phase-badge badge-waiting" id="badge-4">WAITING</div>
 </div>
 <div class="phase-desc">Principle 3 β€” If confidence &lt; 99%, machine halts. Human is final judge. No override. No timeout.</div>
 <div class="phase-data" id="data-4">
 <div class="data-row"><div class="data-key">CONFIDENCE</div><div class="data-val warn" id="d4-confidence">β€”</div></div>
 <div class="data-row"><div class="data-key">THRESHOLD</div><div class="data-val" id="d4-threshold">β€”</div></div>
 <div class="data-row"><div class="data-key">DOMAIN</div><div class="data-val" id="d4-domain">β€”</div></div>
 <div class="data-row"><div class="data-key">VERDICT</div><div class="data-val warn" id="d4-verdict">β€”</div></div>
 </div>
 </div>
 </div>
<div class="phase-card" id="phase-5" style="--phase-color: var(--gold)">
 <div class="sweep"></div>
 <div class="phase-number">05</div>
 <div class="phase-body">
 <div class="phase-header">
 <div class="phase-name">ULTIMATE REFERENCE COMMITMENT</div>
 <div class="phase-badge badge-waiting" id="badge-5">WAITING</div>
 </div>
 <div class="phase-desc">Principle 5 β€” Commit to immutable ledger with full sensible-world references. Knowledge registered.</div>
 <div class="phase-data" id="data-5">
 <div class="data-row"><div class="data-key">FINAL ENERGY</div><div class="data-val good" id="d5-energy">β€”</div></div>
 <div class="data-row"><div class="data-key">DELTA FROM FCI</div><div class="data-val good" id="d5-delta">β€”</div></div>
 <div class="data-row"><div class="data-key">HASH CHAIN</div><div class="data-val blue" id="d5-hash">β€”</div></div>
 <div class="data-row"><div class="data-key">STATUS</div><div class="data-val" id="d5-status">β€”</div></div>
 </div>
 </div>
 </div>
</div>
<!-- Quantum particle canvas -->
 <canvas id="quantum-canvas" width="700" height="120" style="max-width:100%"></canvas>
<!-- Result Panel -->
 <div class="result-panel" id="result-panel">
 <div class="result-glow" id="result-glow"></div>
 <div class="result-state" id="result-state"></div>
 <div class="result-numbers">
 <div class="result-num">
 <div class="num-label">TQPE ESTIMATE</div>
 <div class="num-value" id="res-estimate" style="color:var(--quantum)">β€”</div>
 </div>
 <div class="result-num">
 <div class="num-label">EXACT FCI</div>
 <div class="num-value" style="color:var(--text-bright)">-1.1373 Ha</div>
 </div>
 <div class="result-num">
 <div class="num-label">ERROR</div>
 <div class="num-value" id="res-error" style="color:var(--green)">β€”</div>
 </div>
 <div class="result-num">
 <div class="num-label">EPISTEMIC SCORE</div>
 <div class="num-value" id="res-epistemic" style="color:var(--gold)">β€”</div>
 </div>
 </div>
 <div class="result-quote" id="result-quote"></div>
 </div>
<!-- Footer -->
 <div class="footer">
 <p>TQPE β€” TRIGNUMENTAL QUANTUM PHASE ESTIMATION</p>
 <p>BUILDING THE BRIDGE: EPISTEMIC AUTHORIZATION FOR QUANTUM ADVANTAGE</p>
 <p>Moez Abdessattar Β· Trace On Lab Β· DOI: 10.5281/zenodo.18751914</p>
 <p style="margin-top:8px;opacity:0.5">github.com/Codfski/Trignumentality Β· "Knowledge is what survives its own unknowns."</p>
 </div>
</div>
<script>
// ── Starfield ────────────────────────────────────────────────────────────────
const sf = document.getElementById('starfield');
const sfCtx = sf.getContext('2d');
sf.width = window.innerWidth; sf.height = window.innerHeight;
const stars = Array.from({length: 200}, () => ({
 x: Math.random()*sf.width, y: Math.random()*sf.height,
 r: Math.random()*1.2+0.2, op: Math.random(),
 speed: Math.random()*0.003+0.001
}));
function drawStars() {
 sfCtx.clearRect(0,0,sf.width,sf.height);
 stars.forEach(s => {
 s.op = (Math.sin(Date.now()*s.speed)+1)/2*0.5+0.05;
 sfCtx.beginPath(); sfCtx.arc(s.x,s.y,s.r,0,Math.PI*2);
 sfCtx.fillStyle = `rgba(180,210,255,${s.op})`; sfCtx.fill();
 });
 requestAnimationFrame(drawStars);
}
drawStars();
// ── H2 Molecule ──────────────────────────────────────────────────────────────
const molCanvas = document.getElementById('molecule-canvas');
const molCtx = molCanvas.getContext('2d');
let molAngle = 0;
function drawMolecule() {
 molCtx.clearRect(0,0,300,150);
 const cx = 150, cy = 75, r = 50;
 const x1 = cx - r + Math.sin(molAngle*0.3)*3;
 const x2 = cx + r + Math.sin(molAngle*0.3+Math.PI)*3;
// Bond
 const gradient = molCtx.createLinearGradient(x1,cy,x2,cy);
 gradient.addColorStop(0,'rgba(124,77,255,0.8)');
 gradient.addColorStop(0.5,'rgba(0,229,255,0.6)');
 gradient.addColorStop(1,'rgba(124,77,255,0.8)');
 molCtx.beginPath(); molCtx.moveTo(x1,cy); molCtx.lineTo(x2,cy);
 molCtx.strokeStyle = gradient; molCtx.lineWidth = 2; molCtx.stroke();
 // Electron cloud
 molCtx.save();
 molCtx.globalAlpha = 0.1 + Math.sin(molAngle)*0.05;
 const cloudGrad = molCtx.createRadialGradient(cx,cy,0,cx,cy,65);
 cloudGrad.addColorStop(0,'rgba(124,77,255,0.3)');
 cloudGrad.addColorStop(1,'rgba(124,77,255,0)');
 molCtx.fillStyle = cloudGrad;
 molCtx.ellipse(cx,cy,70,35,0,0,Math.PI*2); molCtx.fill();
 molCtx.restore();
 // Electrons orbiting
 for(let i=0;i<2;i++) {
 const ea = molAngle*2 + i*Math.PI;
 const ex = cx + Math.cos(ea)*40;
 const ey = cy + Math.sin(ea)*18;
 molCtx.beginPath(); molCtx.arc(ex,ey,4,0,Math.PI*2);
 molCtx.fillStyle = `rgba(0,229,255,${0.6+Math.sin(ea)*0.3})`; molCtx.fill();
 molCtx.beginPath(); molCtx.arc(ex,ey,8,0,Math.PI*2);
 molCtx.fillStyle = `rgba(0,229,255,0.15)`; molCtx.fill();
 }
 // Nuclei
 [x1,x2].forEach((x,i) => {
 const grd = molCtx.createRadialGradient(x,cy,0,x,cy,18);
 grd.addColorStop(0,'rgba(124,77,255,0.9)');
 grd.addColorStop(1,'rgba(124,77,255,0.1)');
 molCtx.beginPath(); molCtx.arc(x,cy,18,0,Math.PI*2);
 molCtx.fillStyle = grd; molCtx.fill();
 molCtx.beginPath(); molCtx.arc(x,cy,8,0,Math.PI*2);
 molCtx.fillStyle = 'rgba(200,180,255,0.9)'; molCtx.fill();
molCtx.font = '9px Orbitron'; molCtx.fillStyle = 'rgba(255,255,255,0.6)';
 molCtx.textAlign = 'center';
 molCtx.fillText('H', x, cy+3);
 molCtx.fillText('+1', x, cy+30);
// Energy glow
 molCtx.beginPath(); molCtx.arc(x,cy,22,0,Math.PI*2);
 molCtx.strokeStyle = `rgba(124,77,255,${0.2+Math.sin(molAngle+i)*0.1})`;
 molCtx.lineWidth = 1; molCtx.stroke();
 });
 molCtx.textAlign = 'center'; molCtx.font = '8px Share Tech Mono';
 molCtx.fillStyle = 'rgba(0,229,255,0.4)';
 molCtx.fillText('R = 0.7414 Γ…', cx, 135);
molAngle += 0.02;
 requestAnimationFrame(drawMolecule);
}
drawMolecule();
// ── Quantum Particle Canvas ───────────────────────────────────────────────────
const qCanvas = document.getElementById('quantum-canvas');
const qCtx = qCanvas.getContext('2d');
let particles = [];
let particlesActive = false;
function spawnParticle() {
 particles.push({
 x: 0, y: 60 + (Math.random()-0.5)*30,
 vx: 2 + Math.random()*3,
 vy: (Math.random()-0.5)*1.5,
 r: 2 + Math.random()*3,
 life: 1,
 decay: 0.008 + Math.random()*0.005,
 color: Math.random() > 0.5 ? '124,77,255' : '0,229,255',
 phase: Math.random()*Math.PI*2
 });
}
function drawQuantumCanvas() {
 qCtx.clearRect(0,0,700,120);
// Pipeline line
 qCtx.beginPath(); qCtx.moveTo(0,60); qCtx.lineTo(700,60);
 qCtx.strokeStyle = 'rgba(0,229,255,0.05)'; qCtx.lineWidth = 1; qCtx.stroke();
// Phase markers
 const phases = [0, 140, 280, 420, 560, 700];
 phases.forEach((x,i) => {
 if(i>0) {
 qCtx.beginPath(); qCtx.arc(x,60,4,0,Math.PI*2);
 qCtx.fillStyle = 'rgba(0,229,255,0.2)'; qCtx.fill();
 }
 });
 if(particlesActive) spawnParticle();
 particles = particles.filter(p => p.life > 0);
 particles.forEach(p => {
 p.x += p.vx; p.y += p.vy + Math.sin(p.phase + p.x*0.05)*0.3;
 p.life -= p.decay;
 p.phase += 0.1;
const alpha = p.life * 0.8;
 qCtx.beginPath(); qCtx.arc(p.x, p.y, p.r, 0, Math.PI*2);
 qCtx.fillStyle = `rgba(${p.color},${alpha})`; qCtx.fill();
// Trail
 qCtx.beginPath(); qCtx.arc(p.x-p.vx*2, p.y, p.r*0.5, 0, Math.PI*2);
 qCtx.fillStyle = `rgba(${p.color},${alpha*0.3})`; qCtx.fill();
 });
requestAnimationFrame(drawQuantumCanvas);
}
drawQuantumCanvas();
// ── Pipeline Logic ─────────────────────────────────────────────────────────
let pipelineRunning = false;
let awaitingSovereign = false;
function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
function setPhaseState(n, state) {
 const card = document.getElementById(`phase-${n}`);
 card.classList.remove('active','complete','failed');
 card.classList.add(state);
}
function setBadge(n, cls, text) {
 const b = document.getElementById(`badge-${n}`);
 b.className = `phase-badge ${cls}`;
 b.textContent = text;
}
function setMetric(id, value, color) {
 const el = document.getElementById(id);
 el.textContent = value;
 if(color) el.style.color = color;
}
function typeText(el, text, delay=20) {
 return new Promise(resolve => {
 let i = 0; el.textContent = '';
 const t = setInterval(() => {
 el.textContent += text[i++];
 if(i >= text.length) { clearInterval(t); resolve(); }
 }, delay);
 });
}
async function runPipeline() {
 if(pipelineRunning) return;
 pipelineRunning = true;
 document.getElementById('btn-run').disabled = true;
 document.getElementById('result-panel').classList.remove('visible');
 particlesActive = false;
 // ── PHASE 1 ──────────────────────────────────────────────────────────
 setPhaseState(1,'active'); setBadge(1,'badge-running','RUNNING');
 setMetric('met-tchip','β—ˆ','var(--blue)');
 await sleep(400);
 await typeText(document.getElementById('d1-hash'), '0x8f2a9c1d4e7b3a02...', 15);
 await sleep(300);
 document.getElementById('d1-conservation').textContent = 'βœ“ VERIFIED';
 document.getElementById('d1-conservation').className = 'data-val good';
 await sleep(300);
 document.getElementById('d1-resources').textContent = '2 QUBITS Β· DEPTH 8 Β· OK';
 document.getElementById('d1-resources').className = 'data-val good';
 await sleep(400);
 document.getElementById('d1-filter').textContent = 'NO ILLOGICS FOUND';
 document.getElementById('d1-filter').className = 'data-val good';
 await sleep(500);
setPhaseState(1,'complete'); setBadge(1,'badge-pass','βœ“ CLEARED');
 setMetric('met-tchip','πŸ”΅','var(--blue)');
 await sleep(600);
 // ── PHASE 2 ──────────────────────────────────────────────────────────
 setPhaseState(2,'active'); setBadge(2,'badge-running','EXECUTING');
 particlesActive = true;
 setMetric('met-tchip','βš›','var(--quantum)');
 await sleep(300);
 // Animate energy estimation
 let estimating = true;
 let count = 0;
 const energyEl = document.getElementById('d2-energy');
 const energyInterval = setInterval(() => {
 const fake = (-1.1 - Math.random()*0.08).toFixed(4);
 energyEl.textContent = fake + ' Ha';
 if(++count > 15) { clearInterval(energyInterval); estimating = false; }
 }, 120);
document.getElementById('d2-phase').textContent = 'Ο† = 0.1842Ο€ Β± 0.003';
 document.getElementById('d2-phase').className = 'data-val quantum';
 await sleep(2200);
energyEl.textContent = '-1.1384 Β± 0.0003 Ha';
 energyEl.className = 'data-val quantum';
 document.getElementById('d2-error').textContent = 'Β± 0.0003 Ha';
 document.getElementById('d2-error').className = 'data-val';
 document.getElementById('d2-status').textContent = '⚠ RAW MATERIAL β€” NOT YET KNOWLEDGE';
 document.getElementById('d2-status').className = 'data-val warn';
setMetric('met-estimate','-1.1384','var(--quantum)');
 setPhaseState(2,'complete'); setBadge(2,'badge-raw','RAW MATERIAL');
 particlesActive = false;
 await sleep(700);
 // ── PHASE 3 ──────────────────────────────────────────────────────────
 setPhaseState(3,'active'); setBadge(3,'badge-running','INTEGRATING');
 setMetric('met-tchip','β—ˆ','var(--blue)');
 await sleep(400);
 document.getElementById('d3-peruzzo').textContent = '-1.1371 Β± 0.0002 Ha βœ“ ALIGNED';
 document.getElementById('d3-peruzzo').className = 'data-val good';
 await sleep(400);
 document.getElementById('d3-variational').textContent = 'E β‰₯ Eβ‚€ Β· BOUND SATISFIED βœ“';
 document.getElementById('d3-variational').className = 'data-val good';
 await sleep(400);
 document.getElementById('d3-accuracy').textContent = 'Ξ” = 0.0011 Ha < 1.6 mHa βœ“ ACHIEVED';
 document.getElementById('d3-accuracy').className = 'data-val good';
 await sleep(500);
 // Animate epistemic score
 let score = 0;
 const scoreEl = document.getElementById('d3-score');
 const scoreInterval = setInterval(() => {
 score += 2;
 scoreEl.textContent = score + '%';
 scoreEl.className = score > 70 ? 'data-val warn' : 'data-val';
 if(score >= 82) { clearInterval(scoreInterval); scoreEl.textContent = '82.8%'; scoreEl.className = 'data-val warn'; }
 }, 40);
await sleep(2000);
 setMetric('met-epistemic','82.8%','var(--gold)');
 setPhaseState(3,'complete'); setBadge(3,'badge-integrated','82.8% CONFIDENCE');
 await sleep(700);
 // ── PHASE 4 ──────────────────────────────────────────────────────────
 setPhaseState(4,'active'); setBadge(4,'badge-sovereign','🟑 SOVEREIGN');
 setMetric('met-tchip','🟑','var(--gold)');
 await sleep(400);
 document.getElementById('d4-confidence').textContent = '82.8%';
 document.getElementById('d4-confidence').className = 'data-val warn';
 document.getElementById('d4-threshold').textContent = '99% REQUIRED FOR AUTO-APPROVAL';
 document.getElementById('d4-threshold').className = 'data-val';
 document.getElementById('d4-domain').textContent = 'MOLECULAR CHEMISTRY β€” CRITICAL';
 document.getElementById('d4-domain').className = 'data-val';
 await sleep(500);
 document.getElementById('d4-verdict').textContent = '⚠ HUMAN REVIEW REQUIRED β€” MACHINE HALTS';
 document.getElementById('d4-verdict').className = 'data-val warn';
// Enable sovereign button
 awaitingSovereign = true;
 document.getElementById('btn-sovereign').disabled = false;
 setBadge(4,'badge-sovereign','🟑 AWAITING HUMAN');
// Pulse the button
 const btn = document.getElementById('btn-sovereign');
 btn.style.animation = 'pulse-red 1s infinite';
}
async function sovereignDecide() {
 if(!awaitingSovereign) return;
 awaitingSovereign = false;
 document.getElementById('btn-sovereign').disabled = true;
 document.getElementById('btn-sovereign').style.animation = '';
 setPhaseState(4,'complete'); setBadge(4,'badge-committed','βœ“ HUMAN AUTHORIZED');
 setMetric('met-tchip','🟑','var(--gold)');
 await sleep(600);
 // ── PHASE 5 ──────────────────────────────────────────────────────────
 setPhaseState(5,'active'); setBadge(5,'badge-running','COMMITTING');
 await sleep(400);
 document.getElementById('d5-energy').textContent = '-1.1384 Ha (AUTHORIZED)';
 document.getElementById('d5-energy').className = 'data-val good';
 await sleep(400);
 document.getElementById('d5-delta').textContent = 'Ξ” = 0.0011 Ha Β· WITHIN CHEMICAL ACCURACY';
 document.getElementById('d5-delta').className = 'data-val good';
 await sleep(500);
 await typeText(document.getElementById('d5-hash'), 'SHA3: 7f4e2b1c9a8d3e6f...', 15);
 document.getElementById('d5-hash').className = 'data-val blue';
 await sleep(400);
 document.getElementById('d5-status').textContent = 'βœ“ KNOWLEDGE REGISTERED Β· IMMUTABLE LEDGER';
 document.getElementById('d5-status').className = 'data-val good';
 setPhaseState(5,'complete'); setBadge(5,'badge-committed','βœ“ GOLD COMPLETE');
 setMetric('met-tchip','✦','var(--gold)');
 await sleep(600);
 // ── RESULT ───────────────────────────────────────────────────────────
 const panel = document.getElementById('result-panel');
 panel.style.borderColor = 'var(--gold)';
 document.getElementById('result-glow').style.background = 'radial-gradient(ellipse at center, rgba(255,214,0,0.08) 0%, transparent 70%)';
 document.getElementById('result-state').textContent = '✦ EPISTEMICALLY AUTHORIZED · KNOWLEDGE COMMITTED';
 document.getElementById('result-state').style.color = 'var(--gold)';
 document.getElementById('res-estimate').textContent = '-1.1384 Ha';
 document.getElementById('res-error').textContent = '0.0011 Ha';
 document.getElementById('res-epistemic').textContent = '82.8%';
 document.getElementById('result-quote').innerHTML =
'"We do not claim to have solved quantum advantage.<br>We claim something else: <strong style="color:var(--blue)">We are building a bridge.</strong><br><br>' +
 'Knowledge is what survives its own unknowns."<br><br>' +
 '<span style="opacity:0.4;font-size:10px;letter-spacing:2px">β€” BUILDING THE BRIDGE Β· DOI: 10.5281/zenodo.18751914</span>';
panel.classList.add('visible');
 document.getElementById('btn-reset').style.display = 'inline-block';
 pipelineRunning = false;
}
function resetPipeline() {
 pipelineRunning = false;
 awaitingSovereign = false;
 particlesActive = false;
 particles = [];
 for(let i=1;i<=5;i++) {
 setPhaseState(i,'');
 setBadge(i,'badge-waiting','WAITING');
 const dataEl = document.getElementById(`data-${i}`);
 if(dataEl) dataEl.querySelectorAll('.data-val').forEach(el => { el.textContent='β€”'; el.className='data-val'; });
 }
 document.getElementById('result-panel').classList.remove('visible');
 document.getElementById('btn-run').disabled = false;
 document.getElementById('btn-sovereign').disabled = true;
 document.getElementById('btn-sovereign').style.animation = '';
setMetric('met-estimate','β€”','var(--quantum)');
 setMetric('met-epistemic','β€”','var(--gold)');
 setMetric('met-tchip','β—ˆ','var(--blue)');
}
</script>
</body>
</html>