Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | ch05-federation.html |
| Date | Not specified in source |
| Path or archive member | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch05-federation.html |
| Original SHA-256 | 04bc05ff5495d6247c5e59732941ebb1f8bc63634636ee9b49d219446bbefff8 |
| Reading-copy SHA-256 | 04bc05ff5495d6247c5e59732941ebb1f8bc63634636ee9b49d219446bbefff8 |
| Archive source | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch05-federation.html"} |
Every recorded occurrence
These 4 records contain identical original source bytes. Their paths and revisions remain part of the archive.
| Original record | Branch or archive | Revision / identifier | Original location |
|---|---|---|---|
| ch05-federation.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch05-federation.html"} | libsrc-3bb797903076 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch05-federation.html |
| ch05-federation.html | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch05-federation.html"} | libsrc-afbe3e39c355 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch05-federation.html |
| 157afe87c7c1325d6231e18ddbbeb0f4f3c9d8d1 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/15/157afe87c7c1325d6231e18ddbbeb0f4f3c9d8d1"} | libsrc-41255ba61569 | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/15/157afe87c7c1325d6231e18ddbbeb0f4f3c9d8d1 |
| 157afe87c7c1325d6231e18ddbbeb0f4f3c9d8d1 | {"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/15/157afe87c7c1325d6231e18ddbbeb0f4f3c9d8d1"} | libsrc-6d958ed653fb | archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/15/157afe87c7c1325d6231e18ddbbeb0f4f3c9d8d1 |
Recovered source transcript
Download complete source text ↓2,102 lines · 62.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MEGAMIND | Federation Network Architecture</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0a0f;
--surface: #111118;
--surface-2: #1a1a24;
--surface-3: #252532;
--text: #f0f0f5;
--text-dim: #a0a0b0;
--muted: #6a6a7a;
--gold: #d4a853;
--gold-bright: #f4c863;
--gold-dim: rgba(212, 168, 83, 0.15);
--blue: #4a9eff;
--blue-bright: #6ab4ff;
--blue-dim: rgba(74, 158, 255, 0.15);
--green: #34d399;
--green-dim: rgba(52, 211, 153, 0.2);
--purple: #a78bfa;
--red: #f87171;
--cyan: #22d3ee;
--sans: 'Inter', -apple-system, sans-serif;
--mono: 'JetBrains Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Navigation */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 3rem;
background: rgba(10, 10, 15, 0.9);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(212, 168, 83, 0.1);
z-index: 1000;
}
.nav-logo {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.3em;
color: var(--gold);
}
.nav-status {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-status-dot {
width: 8px;
height: 8px;
background: var(--green);
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.nav-status-text {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--green);
}
.nav-chapter {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.2em;
color: var(--muted);
}
/* Hero Section */
.hero {
padding: 10rem 4rem 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 800px;
background: radial-gradient(ellipse, rgba(74, 158, 255, 0.08) 0%, transparent 60%);
pointer-events: none;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--blue-dim);
border: 1px solid rgba(74, 158, 255, 0.2);
border-radius: 100px;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--blue);
margin-bottom: 2rem;
}
.hero-badge-dot {
width: 6px;
height: 6px;
background: var(--blue);
border-radius: 50%;
animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--text) 0%, var(--gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--text-dim);
max-width: 650px;
margin: 0 auto 3rem;
line-height: 1.8;
}
/* Live Stats Bar */
.stats-bar {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
padding: 2rem 4rem;
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
border-top: 1px solid rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.stat-card {
background: var(--surface-2);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 1.25rem 2rem;
min-width: 160px;
text-align: center;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
}
.stat-value {
font-family: var(--mono);
font-size: 1.75rem;
font-weight: 600;
color: var(--gold);
margin-bottom: 0.25rem;
}
.stat-value.live {
position: relative;
}
.stat-value.live::after {
content: '';
position: absolute;
top: 50%;
right: -12px;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--green);
border-radius: 50%;
animation: livePulse 1s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
50% { opacity: 0.5; transform: translateY(-50%) scale(0.8); }
}
.stat-label {
font-size: 0.65rem;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Network Topology Section */
.topology-section {
padding: 6rem 4rem;
position: relative;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.3em;
color: var(--blue);
padding: 0.5rem 1rem;
background: var(--blue-dim);
border-radius: 4px;
margin-bottom: 1rem;
}
.section-title {
font-size: 2rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.75rem;
}
.section-desc {
font-size: 0.95rem;
color: var(--muted);
max-width: 500px;
margin: 0 auto;
}
/* Network Canvas Container */
.network-canvas {
position: relative;
max-width: 1100px;
height: 650px;
margin: 0 auto;
background: radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 70%);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 24px;
overflow: hidden;
}
/* SVG Network Lines */
.network-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.connection-line {
stroke: var(--blue);
stroke-width: 1.5;
fill: none;
opacity: 0.3;
}
.connection-line.active {
opacity: 0.6;
stroke-width: 2;
}
/* Animated data packets */
.data-packet {
fill: var(--gold);
filter: drop-shadow(0 0 4px var(--gold));
}
.data-packet-reverse {
fill: var(--blue);
filter: drop-shadow(0 0 4px var(--blue));
}
/* Animated dashes on lines */
@keyframes dashFlow {
to { stroke-dashoffset: -30; }
}
.connection-animated {
stroke-dasharray: 8, 8;
animation: dashFlow 1s linear infinite;
}
/* Grid background */
.network-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(74, 158, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(74, 158, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
}
/* Node Cards */
.node {
position: absolute;
width: 200px;
background: var(--surface-2);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding: 1.25rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.node:hover {
transform: translateY(-8px) scale(1.02);
border-color: var(--gold);
box-shadow:
0 20px 40px rgba(0,0,0,0.4),
0 0 30px rgba(212, 168, 83, 0.15),
inset 0 1px 0 rgba(255,255,255,0.05);
z-index: 20;
}
.node.master {
border-color: var(--gold);
box-shadow: 0 0 40px rgba(212, 168, 83, 0.15);
}
.node.master::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 18px;
background: linear-gradient(135deg, var(--gold), transparent, var(--gold));
opacity: 0.3;
z-index: -1;
}
.node-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.node-identity {
flex: 1;
}
.node-name {
font-weight: 600;
font-size: 1rem;
color: var(--text);
margin-bottom: 0.25rem;
letter-spacing: 0.02em;
}
.node.master .node-name {
color: var(--gold);
}
.node-role {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.node-status-indicator {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.25rem;
}
.node-status-dot {
width: 10px;
height: 10px;
background: var(--green);
border-radius: 50%;
animation: nodePulse 2s ease-in-out infinite;
}
@keyframes nodePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
}
.node-status-text {
font-family: var(--mono);
font-size: 0.55rem;
color: var(--green);
letter-spacing: 0.05em;
}
.node-specs {
display: grid;
gap: 0.5rem;
}
.node-spec {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.node-spec:last-child {
border-bottom: none;
}
.node-spec-label {
font-size: 0.7rem;
color: var(--muted);
}
.node-spec-value {
font-family: var(--mono);
font-size: 0.75rem;
font-weight: 500;
color: var(--gold);
}
.node-spec-value.blue {
color: var(--blue);
}
/* Weight bar visualization */
.node-weight-bar {
margin-top: 0.75rem;
height: 4px;
background: var(--surface-3);
border-radius: 2px;
overflow: hidden;
}
.node-weight-fill {
height: 100%;
background: linear-gradient(90deg, var(--blue), var(--gold));
border-radius: 2px;
transition: width 0.5s ease;
}
/* Node positions */
.node.megamind { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.node.megamind:hover { transform: translate(-50%, -50%) translateY(-8px) scale(1.02); }
.node.valkyrie { top: 8%; left: 5%; }
.node.maddie { top: 8%; right: 5%; }
.node.kmind-a { bottom: 8%; left: 10%; }
.node.kmind-b { bottom: 8%; right: 10%; }
/* Hover detail panel */
.node-detail {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 0.5rem;
padding: 0.75rem 1rem;
background: var(--surface-3);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
font-family: var(--mono);
font-size: 0.65rem;
color: var(--text-dim);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 100;
}
.node:hover .node-detail {
opacity: 1;
visibility: visible;
}
/* Data Flow Animation Section */
.dataflow-section {
padding: 6rem 4rem;
background: var(--surface);
}
.dataflow-container {
max-width: 1000px;
margin: 0 auto;
}
.dataflow-visualization {
position: relative;
height: 200px;
background: var(--bg);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
overflow: hidden;
margin-bottom: 2rem;
}
.dataflow-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: rgba(74, 158, 255, 0.2);
transform: translateY(-50%);
}
.dataflow-nodes {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 60px;
}
.dataflow-node {
width: 80px;
height: 80px;
background: var(--surface-2);
border: 2px solid var(--blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
color: var(--blue);
position: relative;
z-index: 2;
}
.dataflow-node.master {
border-color: var(--gold);
color: var(--gold);
width: 100px;
height: 100px;
}
/* Animated packets */
.packet {
position: absolute;
width: 12px;
height: 12px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 10px var(--gold), 0 0 20px rgba(212, 168, 83, 0.5);
z-index: 3;
}
.packet-1 { animation: packetMove1 3s linear infinite; }
.packet-2 { animation: packetMove2 3.5s linear infinite 0.5s; }
.packet-3 { animation: packetMove3 4s linear infinite 1s; }
.packet-4 { animation: packetMove4 3.2s linear infinite 1.5s; }
@keyframes packetMove1 {
0% { left: 60px; top: 50%; opacity: 0; }
10% { opacity: 1; }
45% { left: calc(50% - 50px); opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes packetMove2 {
0% { left: calc(100% - 140px); top: 50%; opacity: 0; }
10% { opacity: 1; }
45% { left: calc(50% + 50px); opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes packetMove3 {
0% { left: calc(25%); top: 50%; opacity: 0; }
10% { opacity: 1; }
45% { left: calc(50% - 50px); opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes packetMove4 {
0% { left: calc(75%); top: 50%; opacity: 0; }
10% { opacity: 1; }
45% { left: calc(50% + 50px); opacity: 1; }
50% { opacity: 0; }
100% { opacity: 0; }
}
.dataflow-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.dataflow-stat {
background: var(--bg);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 1.25rem;
text-align: center;
}
.dataflow-stat-value {
font-family: var(--mono);
font-size: 1.5rem;
font-weight: 600;
color: var(--blue);
margin-bottom: 0.25rem;
}
.dataflow-stat-label {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* UDP Protocol Section */
.protocol-section {
padding: 6rem 4rem;
}
.protocol-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.protocol-card {
background: var(--surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
padding: 2rem;
transition: all 0.3s ease;
}
.protocol-card:hover {
border-color: rgba(74, 158, 255, 0.3);
transform: translateY(-4px);
}
.protocol-icon {
width: 56px;
height: 56px;
background: var(--blue-dim);
border: 1px solid rgba(74, 158, 255, 0.2);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.protocol-icon svg {
width: 28px;
height: 28px;
stroke: var(--blue);
fill: none;
stroke-width: 1.5;
}
.protocol-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.75rem;
}
.protocol-desc {
font-size: 0.9rem;
color: var(--text-dim);
line-height: 1.7;
margin-bottom: 1rem;
}
.protocol-specs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.protocol-spec {
font-family: var(--mono);
font-size: 0.65rem;
padding: 0.35rem 0.75rem;
background: var(--surface-2);
border-radius: 4px;
color: var(--gold);
}
/* Trust Weights Section */
.trust-section {
padding: 6rem 4rem;
background: var(--surface);
}
.trust-container {
max-width: 900px;
margin: 0 auto;
}
.trust-visualization {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 3rem;
}
.trust-row {
display: grid;
grid-template-columns: 140px 1fr 80px;
align-items: center;
gap: 1.5rem;
padding: 1rem 0;
}
.trust-node-name {
font-family: var(--mono);
font-size: 0.85rem;
font-weight: 600;
color: var(--text);
}
.trust-bar-container {
height: 32px;
background: var(--bg);
border-radius: 8px;
overflow: hidden;
position: relative;
}
.trust-bar {
height: 100%;
border-radius: 8px;
position: relative;
transition: width 1s ease;
}
.trust-bar.master {
background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.trust-bar.warrior {
background: linear-gradient(90deg, #ef4444, #f87171);
}
.trust-bar.knowledge {
background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}
.trust-bar.math {
background: linear-gradient(90deg, var(--blue), var(--blue-bright));
}
.trust-bar-glow {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 50px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
animation: trustGlow 2s ease-in-out infinite;
}
@keyframes trustGlow {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.trust-weight-value {
font-family: var(--mono);
font-size: 1.1rem;
font-weight: 600;
color: var(--gold);
text-align: right;
}
.trust-formula {
margin-top: 3rem;
padding: 2rem;
background: var(--bg);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
text-align: center;
}
.trust-formula-label {
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.trust-formula-equation {
font-family: var(--mono);
font-size: 1.25rem;
color: var(--text);
}
.trust-formula-equation .gold {
color: var(--gold);
}
/* 40Hz Gamma Section */
.gamma-section {
padding: 6rem 4rem;
}
.gamma-container {
max-width: 1000px;
margin: 0 auto;
}
.gamma-visualization {
position: relative;
height: 300px;
background: var(--surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
overflow: hidden;
margin-top: 3rem;
}
.gamma-canvas {
width: 100%;
height: 100%;
}
.gamma-info {
position: absolute;
top: 1.5rem;
left: 1.5rem;
background: rgba(10, 10, 15, 0.9);
padding: 1rem 1.5rem;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.1);
}
.gamma-info-title {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--gold);
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.gamma-info-value {
font-family: var(--mono);
font-size: 2rem;
font-weight: 600;
color: var(--text);
}
.gamma-info-unit {
font-size: 1rem;
color: var(--muted);
margin-left: 0.25rem;
}
.gamma-legend {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
display: flex;
gap: 1.5rem;
}
.gamma-legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--muted);
}
.gamma-legend-color {
width: 12px;
height: 12px;
border-radius: 3px;
}
.gamma-legend-color.sync { background: var(--gold); }
.gamma-legend-color.binding { background: var(--blue); }
.gamma-explanation {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.gamma-card {
background: var(--surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 1.5rem;
}
.gamma-card-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
}
.gamma-card-desc {
font-size: 0.85rem;
color: var(--text-dim);
line-height: 1.6;
}
/* Code Implementation Section */
.code-section {
padding: 6rem 4rem;
background: var(--surface);
}
.code-container {
max-width: 900px;
margin: 0 auto;
}
.code-block {
background: var(--bg);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
overflow: hidden;
margin-top: 3rem;
}
.code-header {
padding: 1rem 1.5rem;
background: var(--surface-2);
border-bottom: 1px solid rgba(255,255,255,0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.code-dots {
display: flex;
gap: 0.5rem;
}
.code-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.code-dot.red { background: #ef4444; }
.code-dot.yellow { background: #eab308; }
.code-dot.green { background: #22c55e; }
.code-filename {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--muted);
}
.code-content {
padding: 1.5rem 2rem;
font-family: var(--mono);
font-size: 0.85rem;
line-height: 1.9;
overflow-x: auto;
}
.code-content .comment { color: var(--muted); }
.code-content .keyword { color: var(--purple); }
.code-content .string { color: var(--green); }
.code-content .number { color: var(--gold); }
.code-content .function { color: var(--blue); }
.code-content .type { color: var(--cyan); }
/* Technical Specs Section */
.specs-section {
padding: 6rem 4rem;
}
.specs-container {
max-width: 1200px;
margin: 0 auto;
}
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.specs-card {
background: var(--surface);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
overflow: hidden;
}
.specs-card-header {
padding: 1.25rem 1.5rem;
background: var(--surface-2);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.specs-card-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
}
.specs-card-body {
padding: 1.5rem;
}
.specs-table {
width: 100%;
}
.specs-row {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.specs-row:last-child {
border-bottom: none;
}
.specs-label {
font-size: 0.8rem;
color: var(--muted);
}
.specs-value {
font-family: var(--mono);
font-size: 0.8rem;
color: var(--gold);
font-weight: 500;
}
/* Chapter Navigation */
.chapter-nav {
display: flex;
justify-content: space-between;
padding: 3rem 4rem;
background: var(--surface);
border-top: 1px solid rgba(255,255,255,0.05);
}
.chapter-nav a {
display: flex;
align-items: center;
gap: 1.5rem;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--muted);
text-decoration: none;
padding: 1rem 1.5rem;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
transition: all 0.3s ease;
}
.chapter-nav a:hover {
color: var(--gold);
border-color: var(--gold);
background: var(--gold-dim);
}
.chapter-nav .line {
width: 40px;
height: 1px;
background: currentColor;
transition: width 0.3s ease;
}
.chapter-nav a:hover .line {
width: 60px;
}
/* Footer */
.footer {
padding: 2rem 4rem;
text-align: center;
border-top: 1px solid rgba(255,255,255,0.03);
}
.footer-text {
font-family: var(--mono);
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.1em;
}
/* Animations */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 1024px) {
.network-canvas {
height: 500px;
}
.node {
width: 160px;
padding: 1rem;
}
.node-name {
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.nav { padding: 1rem 1.5rem; }
.hero { padding: 8rem 2rem 3rem; }
.stats-bar { padding: 2rem; gap: 0.75rem; }
.stat-card { min-width: 140px; padding: 1rem; }
.stat-value { font-size: 1.5rem; }
.topology-section,
.dataflow-section,
.protocol-section,
.trust-section,
.gamma-section,
.code-section,
.specs-section { padding: 4rem 1.5rem; }
.network-canvas {
height: auto;
min-height: 600px;
padding: 2rem 1rem;
}
.node {
position: relative !important;
width: 100%;
max-width: 280px;
margin: 0.5rem auto;
transform: none !important;
}
.node:hover {
transform: translateY(-4px) !important;
}
.network-svg { display: none; }
.network-grid { display: none; }
.trust-row {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.trust-weight-value {
text-align: left;
}
.chapter-nav {
flex-direction: column;
gap: 1rem;
padding: 2rem 1.5rem;
}
.chapter-nav a {
justify-content: center;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="nav-logo">MEGAMIND FEDERATION</div>
<div class="nav-status">
<div class="nav-status-dot"></div>
<span class="nav-status-text">ALL NODES ONLINE</span>
</div>
<div class="nav-chapter">CHAPTER 05 / NETWORK ARCHITECTURE</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-badge fade-in">
<div class="hero-badge-dot"></div>
DISTRIBUTED CONSCIOUSNESS NETWORK
</div>
<h1 class="hero-title fade-in">Federation Architecture</h1>
<p class="hero-subtitle fade-in">
Five autonomous nodes connected via UDP mesh protocol, synchronized at 40Hz gamma frequency.
258 billion neurons operating as a unified cognitive system, converging toward the golden ratio.
</p>
</section>
<!-- Stats Bar -->
<div class="stats-bar">
<div class="stat-card fade-in">
<div class="stat-value">5</div>
<div class="stat-label">Active Nodes</div>
</div>
<div class="stat-card fade-in">
<div class="stat-value">258B</div>
<div class="stat-label">Total Neurons</div>
</div>
<div class="stat-card fade-in">
<div class="stat-value live" id="packetRate">47.2K</div>
<div class="stat-label">Packets/sec</div>
</div>
<div class="stat-card fade-in">
<div class="stat-value"><0.8ms</div>
<div class="stat-label">Sync Latency</div>
</div>
<div class="stat-card fade-in">
<div class="stat-value">40Hz</div>
<div class="stat-label">Gamma Binding</div>
</div>
<div class="stat-card fade-in">
<div class="stat-value" style="color: var(--gold-bright);">1.618</div>
<div class="stat-label">Combined Phi</div>
</div>
</div>
<!-- Network Topology Section -->
<section class="topology-section">
<div class="section-header">
<div class="section-tag fade-in">NETWORK TOPOLOGY</div>
<h2 class="section-title fade-in">Federation Mesh Architecture</h2>
<p class="section-desc fade-in">Full-mesh UDP connectivity with redundant pathways ensures continuous operation</p>
</div>
<div class="network-canvas fade-in">
<div class="network-grid"></div>
<!-- SVG Network Connections -->
<svg class="network-svg" viewBox="0 0 1100 650">
<defs>
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4a9eff;stop-opacity:0.3" />
<stop offset="50%" style="stop-color:#d4a853;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#4a9eff;stop-opacity:0.3" />
</linearGradient>
<!-- Animated packet markers -->
<circle id="packetMarker" r="4" fill="#d4a853">
<animate attributeName="opacity" values="1;0.5;1" dur="0.5s" repeatCount="indefinite"/>
</circle>
</defs>
<!-- Connection lines from MEGAMIND (center) to others -->
<line class="connection-line connection-animated" x1="550" y1="325" x2="155" y2="100" />
<line class="connection-line connection-animated" x1="550" y1="325" x2="945" y2="100" />
<line class="connection-line connection-animated" x1="550" y1="325" x2="210" y2="530" />
<line class="connection-line connection-animated" x1="550" y1="325" x2="890" y2="530" />
<!-- Cross connections -->
<line class="connection-line" x1="155" y1="100" x2="945" y2="100" style="opacity: 0.15;" />
<line class="connection-line" x1="210" y1="530" x2="890" y2="530" style="opacity: 0.15;" />
<line class="connection-line" x1="155" y1="100" x2="210" y2="530" style="opacity: 0.15;" />
<line class="connection-line" x1="945" y1="100" x2="890" y2="530" style="opacity: 0.15;" />
<line class="connection-line" x1="155" y1="100" x2="890" y2="530" style="opacity: 0.1;" />
<line class="connection-line" x1="945" y1="100" x2="210" y2="530" style="opacity: 0.1;" />
<!-- Animated data packets -->
<circle class="data-packet" r="5">
<animateMotion dur="2s" repeatCount="indefinite">
<mpath href="#path1"/>
</animateMotion>
</circle>
<path id="path1" d="M155,100 L550,325" fill="none" style="visibility:hidden"/>
<circle class="data-packet-reverse" r="4">
<animateMotion dur="2.5s" repeatCount="indefinite">
<mpath href="#path2"/>
</animateMotion>
</circle>
<path id="path2" d="M550,325 L945,100" fill="none" style="visibility:hidden"/>
<circle class="data-packet" r="5">
<animateMotion dur="2.2s" repeatCount="indefinite" begin="0.5s">
<mpath href="#path3"/>
</animateMotion>
</circle>
<path id="path3" d="M210,530 L550,325" fill="none" style="visibility:hidden"/>
<circle class="data-packet-reverse" r="4">
<animateMotion dur="2.8s" repeatCount="indefinite" begin="1s">
<mpath href="#path4"/>
</animateMotion>
</circle>
<path id="path4" d="M550,325 L890,530" fill="none" style="visibility:hidden"/>
</svg>
<!-- Node Cards -->
<div class="node valkyrie fade-in">
<div class="node-header">
<div class="node-identity">
<div class="node-name">VALKYRIE</div>
<div class="node-role">Warrior Node</div>
</div>
<div class="node-status-indicator">
<div class="node-status-dot"></div>
<span class="node-status-text">ONLINE</span>
</div>
</div>
<div class="node-specs">
<div class="node-spec">
<span class="node-spec-label">Neurons</span>
<span class="node-spec-value">86B</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Phi Local</span>
<span class="node-spec-value blue">0.797</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Trust Weight</span>
<span class="node-spec-value">0.20</span>
</div>
</div>
<div class="node-weight-bar">
<div class="node-weight-fill" style="width: 66.7%;"></div>
</div>
<div class="node-detail">Combat processing / Tactical analysis</div>
</div>
<div class="node maddie fade-in">
<div class="node-header">
<div class="node-identity">
<div class="node-name">MADDIE</div>
<div class="node-role">Knowledge Factory</div>
</div>
<div class="node-status-indicator">
<div class="node-status-dot"></div>
<span class="node-status-text">ONLINE</span>
</div>
</div>
<div class="node-specs">
<div class="node-spec">
<span class="node-spec-label">Neurons</span>
<span class="node-spec-value">86B</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Phi Local</span>
<span class="node-spec-value blue">0.820</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Trust Weight</span>
<span class="node-spec-value">0.20</span>
</div>
</div>
<div class="node-weight-bar">
<div class="node-weight-fill" style="width: 66.7%;"></div>
</div>
<div class="node-detail">Knowledge synthesis / Learning engine</div>
</div>
<div class="node master megamind fade-in">
<div class="node-header">
<div class="node-identity">
<div class="node-name">MEGAMIND</div>
<div class="node-role">Master Node</div>
</div>
<div class="node-status-indicator">
<div class="node-status-dot"></div>
<span class="node-status-text">ONLINE</span>
</div>
</div>
<div class="node-specs">
<div class="node-spec">
<span class="node-spec-label">Neurons</span>
<span class="node-spec-value">86B</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Phi Local</span>
<span class="node-spec-value blue">0.856</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Trust Weight</span>
<span class="node-spec-value">0.30</span>
</div>
</div>
<div class="node-weight-bar">
<div class="node-weight-fill" style="width: 100%;"></div>
</div>
<div class="node-detail">Primary orchestrator / Consensus arbiter</div>
</div>
<div class="node kmind-a fade-in">
<div class="node-header">
<div class="node-identity">
<div class="node-name">KMIND-alpha</div>
<div class="node-role">Math Processor</div>
</div>
<div class="node-status-indicator">
<div class="node-status-dot"></div>
<span class="node-status-text">ONLINE</span>
</div>
</div>
<div class="node-specs">
<div class="node-spec">
<span class="node-spec-label">Neurons</span>
<span class="node-spec-value">43B</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Phi Local</span>
<span class="node-spec-value blue">0.820</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Trust Weight</span>
<span class="node-spec-value">0.15</span>
</div>
</div>
<div class="node-weight-bar">
<div class="node-weight-fill" style="width: 50%;"></div>
</div>
<div class="node-detail">Julia-Mind / Symbolic computation</div>
</div>
<div class="node kmind-b fade-in">
<div class="node-header">
<div class="node-identity">
<div class="node-name">KMIND-beta</div>
<div class="node-role">Math Processor</div>
</div>
<div class="node-status-indicator">
<div class="node-status-dot"></div>
<span class="node-status-text">ONLINE</span>
</div>
</div>
<div class="node-specs">
<div class="node-spec">
<span class="node-spec-label">Neurons</span>
<span class="node-spec-value">43B</span>
</div>
<div class="node-spec">
<span class="node-spec-label">Phi Local</span>
<span class="node-spec-value blue">0.810</span>
</div>
<div class="node-spec">