← Qiki · all runs · 📊 leaderboard
r-1788003181597-xn0ax
Five layers. One owner. You.
Earth Compute
Global compute intelligence and price discovery.
OwnCloud
The supercloud across hyperscalers and data centres.
OwnAI
Private AI for text, media, code, research and agents.
OwnOS
A lightweight, secure, AI-native operating system.
Own 1
A personal AI computer for private local intelligence.
make a nice html 5 stack diagram for this
model /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF upstream http://127.0.0.1:8080 harness 127.0.0.1
score 9 / 10
2026-08-29 11:33:01 UTC · total 159s · 1 step
code-app · done · 159s
Earth Compute Stack Diagram
9 / 10
model /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF harness 127.0.0.1:8080
validity 2/2
fidelity 2/2
structure 1/2
depth 2/2
cleanliness 2/2
why (1 notes)
- no interactivity (addEventListener/RAF)
page · 411 lines
Click the preview to focus for keyboard input. Open in new tab for full-screen play.
view source (13005 chars)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earth Compute | Sovereign AI Ecosystem</title>
<style>
/*
* EARTH COMPUTE - SYSTEM CORE STYLES
* Theme: Deep-Space Tech / Dark Navy / Cyan Accents
* No External Dependencies
*/
:root {
/* Brand Palette */
--bg-deep: #0B132B;
--bg-panel: #1C2541;
--accent-cyan: #00D4FF;
--accent-glow: rgba(0, 212, 255, 0.4);
--text-main: #FFFFFF;
--text-muted: #8D99AE;
/* Layer Specific Gradients (Bottom to Top) */
--layer-earth-grad: linear-gradient(135deg, #1C2541 0%, #0B132B 100%);
--layer-cloud-grad: linear-gradient(135deg, #003554 0%, #00509e 100%);
--layer-ai-grad: linear-gradient(135deg, #00509e 0%, #0077b6 100%);
--layer-os-grad: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);
--layer-own1-grad: linear-gradient(135deg, #0096c7 0%, #00D4FF 100%);
/* Spacing & sizing */
--layer-height: 140px;
--layer-gap: 24px;
--container-width: 900px;
/* Typography */
--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* RESET & BASE */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-deep);
color: var(--text-main);
font-family: var(--font-stack);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
position: relative;
}
/* BACKGROUND EFFECTS */
.bg-grid {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(11, 19, 43, 0.9) 1px, transparent 1px),
linear-gradient(90deg, rgba(11, 19, 43, 0.9) 1px, transparent 1px);
background-size: 50px 50px;
background-color: #070b1a;
z-index: -2;
mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
}
.bg-glow {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 80vh;
background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
z-index: -1;
pointer-events: none;
}
/* LAYOUT CONTAINERS */
header {
text-align: center;
padding: 4rem 1rem 2rem;
position: relative;
}
.brand-logo {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 4px;
color: var(--accent-cyan);
margin-bottom: 1rem;
display: inline-block;
border: 1px solid var(--accent-cyan);
padding: 0.5rem 1rem;
border-radius: 4px;
background: rgba(0, 212, 255, 0.05);
box-shadow: 0 0 15px var(--accent-glow);
}
h1 {
font-size: 3.5rem;
font-weight: 700;
letter-spacing: -1px;
margin-bottom: 0.5rem;
background: linear-gradient(to right, #fff, var(--accent-cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tagline {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
main {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 1rem;
perspective: 1000px; /* For 3D effects */
}
.stack-container {
width: 100%;
max-width: var(--container-width);
display: flex;
flex-direction: column;
gap: var(--layer-gap);
position: relative;
}
/*
* LAYER COMPONENT
* Each layer is a glass-morphism card
*/
.layer {
position: relative;
height: var(--layer-height);
border-radius: 16px;
display: flex;
align-items: center;
padding: 0 3rem;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Initial state for animation */
opacity: 0;
transform: translateY(50px) scale(0.95);
}
/* Animation class added via JS */
.layer.animate-in {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Layer Specific Styles */
.layer[data-id="earth"] {
background: var(--layer-earth-grad);
border-bottom: 4px solid #000;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.layer[data-id="owncloud"] {
background: var(--layer-cloud-grad);
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.layer[data-id="ownai"] {
background: var(--layer-ai-grad);
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.layer[data-id="ownos"] {
background: var(--layer-os-grad);
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.layer[data-id="own1"] {
background: var(--layer-own1-grad);
border-top: 1px solid #fff;
box-shadow: 0 0 40px rgba(0, 212, 255, 0.3);
z-index: 10;
}
/* Hover Effects */
.layer:hover {
transform: translateY(-5px) scale(1.02);
z-index: 20;
}
.layer[data-id="earth"]:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.layer[data-id="owncloud"]:hover { box-shadow: 0 15px 40px rgba(0, 53, 84, 0.5); }
.layer[data-id="ownai"]:hover { box-shadow: 0 15px 40px rgba(0, 119, 182, 0.5); }
.layer[data-id="ownos"]:hover { box-shadow: 0 15px 40px rgba(0, 150, 199, 0.5); }
.layer[data-id="own1"]:hover { box-shadow: 0 20px 60px rgba(0, 212, 255, 0.6); border-color: #fff; }
/* Layer Content */
.layer-content {
position: relative;
z-index: 2;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none; /* Let clicks pass to layer */
}
.layer-info {
flex: 1;
}
.layer-title {
font-size: 1.5rem;
font-weight: 600;
color: #fff;
margin-bottom: 0.25rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
letter-spacing: 0.5px;
}
.layer[data-id="own1"] .layer-title {
font-size: 1.8rem;
color: #0B132B; /* Contrast for bright top layer */
text-shadow: none;
}
.layer-desc {
font-size: 0.95rem;
color: rgba(255,255,255,0.8);
line-height: 1.4;
max-width: 600px;
}
.layer[data-id="own1"] .layer-desc {
color: rgba(11, 19, 43, 0.8);
}
/* Visual Icon/Graphic Area */
.layer-visual {
width: 120px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* SVG Icons */
.layer-icon {
width: 48px;
height: 48px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
color: rgba(255,255,255,0.9);
transition: transform 0.3s ease;
}
.layer[data-id="own1"] .layer-icon {
color: #0B132B;
}
.layer:hover .layer-icon {
transform: scale(1.1);
}
/*
* DECORATIVE ELEMENTS (Pseudo-3D Sides)
* Adds depth to the stack
*/
.layer::before, .layer::after {
content: '';
position: absolute;
top: 0;
width: 15px;
height: 100%;
background: inherit;
z-index: 1;
transform: skewY(-5deg);
transform-origin: top left;
}
.layer::before {
left: -10px;
transform: skewY(-5deg);
background: rgba(0,0,0,0.2);
border-left: 1px solid rgba(255,255,255,0.1);
}
.layer::after {
right: -10px;
transform: skewY(5deg);
background: rgba(0,0,0,0.2);
border-right: 1px solid rgba(255,255,255,0.1);
}
/*
* FOOTER
*/
footer {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
font-size: 0.8rem;
border-top: 1px solid rgba(255,255,255,0.05);
background: linear-gradient(to top, #050914, transparent);
}
.footer-links span {
margin: 0 10px;
cursor: pointer;
transition: color 0.2s;
}
.footer-links span:hover {
color: var(--accent-cyan);
}
/*
* RESPONSIVE
*/
@media (max-width: 768px) {
h1 { font-size: 2.5rem; }
.layer { height: 120px; padding: 0 1.5rem; }
.layer-title { font-size: 1.2rem; }
.layer-desc { display: none; } /* Hide desc on mobile to save space */
.layer-visual { width: 60px; }
.layer-icon { width: 32px; height: 32px; }
.layer::before, .layer::after { width: 8px; }
}
/*
* ANIMATIONS
*/
@keyframes pulse-glow {
0% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }
50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.3); }
100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }
}
.layer[data-id="own1"] {
animation: pulse-glow 3s infinite;
}
</style>
</head>
<body>
<!-- Background Elements -->
<div class="bg-grid"></div>
<div class="bg-glow"></div>
<!-- Header -->
<header>
<div class="brand-logo">Earth Compute</div>
<h1>Global Intelligence Stack</h1>
<p class="tagline">Five sovereign layers. One seamless ecosystem. Price discovery for the AI age.</p>
</header>
<!-- Main Stack Diagram -->
<main>
<div class="stack-container" id="stack">
<!-- Layers injected via JS for cleaner code structure, or hardcoded below.
Hardcoding here for semantic clarity, but we will animate them. -->
<!-- 1. Earth Compute (Base) -->
<div class="layer" data-id="earth" data-delay="0">
<div class="layer-content">
<div class="layer-info">
<div class="layer-title">Earth Compute</div>
<div class="layer-desc">Global compute intelligence and price discovery. The foundational layer aggregating decentralized resources.</div>
</div>
<div class="layer-visual">
<!-- Globe Icon -->
<svg class="layer-icon" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<path d="M2 12h20"></path>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
</div>
</div>
</div>
<!-- 2. OwnCloud -->
<div class="layer" data-id="owncloud" data-delay="100">
<div class="layer-content">
<div class="layer-info">
<div class="layer-title">OwnCloud</div
</body>
</html> 1 LLM call on this step
ok ·
159345 ms · prompt 2464c → resp 12997c ·
t=0.6 max=4096 ·
→ /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF @ http://127.0.0.1:8080
→ /nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF @ http://127.0.0.1:8080
raw JSON
{
"id": "r-1788003181597-xn0ax",
"prompt": "Five layers. One owner. You.\nEarth Compute\n\nGlobal compute intelligence and price discovery.\n\nOwnCloud\n\nThe supercloud across hyperscalers and data centres.\n\nOwnAI\n\nPrivate AI for text, media, code, research and agents.\n\nOwnOS\n\nA lightweight, secure, AI-native operating system.\n\nOwn 1\n\nA personal AI computer for private local intelligence.\n\nmake a nice html 5 stack diagram for this",
"project": {
"name": "Earth Compute",
"tagline": "Global compute intelligence and price discovery across five sovereign layers.",
"theme": "deep-space tech aesthetic, dark navy background with subtle grid lines, glowing cyan and electric blue accents, clean sans-serif typography, layered glass-morphism cards",
"brandColors": [
"#0B132B",
"#00D4FF",
"#FFFFFF",
"#1C2541"
],
"audience": "tech leaders, AI researchers, and privacy-conscious enterprises seeking decentralized compute",
"vibe": "sovereign, futuristic, structured, intelligent, secure"
},
"steps": [
{
"id": "s1-fvlm7",
"kind": "code-app",
"params": {
"brief": "Create a sophisticated, interactive HTML5 vertical stack diagram representing the 'Earth Compute' ecosystem. The design should be modern, dark-themed, and tech-forward.\n\nStructure (from bottom to top):\n1. Earth Compute (Base Layer): Label 'Global compute intelligence and price discovery.' Style as a solid, foundational base.\n2. OwnCloud: Label 'The supercloud across hyperscalers and data centres.' Style as a connected network layer.\n3. OwnAI: Label 'Private AI for text, media, code, research and agents.' Style as a neural/processing layer.\n4. OwnOS: Label 'A lightweight, secure, AI-native operating system.' Style as a secure bridge layer.\n5. Own 1 (Top Layer): Label 'A personal AI computer for private local intelligence.' Style as the crown jewel/user interface.\n\nVisual Requirements:\n- Use a vertical layout where each layer sits on top of the previous one.\n- Use a color gradient that transitions from deep earth tones (bottom) to sleek, futuristic blues/purples (top).\n- Include subtle hover effects on each layer to reveal or emphasize the description.\n- Use clean, sans-serif typography.\n- Ensure the diagram is responsive and centered on the page.\n- No external dependencies; use inline CSS and vanilla JS.",
"kind": "page",
"project": {
"name": "Earth Compute",
"tagline": "Global compute intelligence and price discovery across five sovereign layers.",
"theme": "deep-space tech aesthetic, dark navy background with subtle grid lines, glowing cyan and electric blue accents, clean sans-serif typography, layered glass-morphism cards",
"brandColors": [
"#0B132B",
"#00D4FF",
"#FFFFFF",
"#1C2541"
],
"audience": "tech leaders, AI researchers, and privacy-conscious enterprises seeking decentralized compute",
"vibe": "sovereign, futuristic, structured, intelligent, secure"
},
"heroPlanned": false
},
"label": "Earth Compute Stack Diagram"
}
],
"results": {
"s1-fvlm7": {
"status": "done",
"startedAt": 1788003181598,
"attempt": 1,
"output": {
"html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Earth Compute | Sovereign AI Ecosystem</title>\n <style>\n /* \n * EARTH COMPUTE - SYSTEM CORE STYLES\n * Theme: Deep-Space Tech / Dark Navy / Cyan Accents\n * No External Dependencies\n */\n\n :root {\n /* Brand Palette */\n --bg-deep: #0B132B;\n --bg-panel: #1C2541;\n --accent-cyan: #00D4FF;\n --accent-glow: rgba(0, 212, 255, 0.4);\n --text-main: #FFFFFF;\n --text-muted: #8D99AE;\n \n /* Layer Specific Gradients (Bottom to Top) */\n --layer-earth-grad: linear-gradient(135deg, #1C2541 0%, #0B132B 100%);\n --layer-cloud-grad: linear-gradient(135deg, #003554 0%, #00509e 100%);\n --layer-ai-grad: linear-gradient(135deg, #00509e 0%, #0077b6 100%);\n --layer-os-grad: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);\n --layer-own1-grad: linear-gradient(135deg, #0096c7 0%, #00D4FF 100%);\n\n /* Spacing & sizing */\n --layer-height: 140px;\n --layer-gap: 24px;\n --container-width: 900px;\n \n /* Typography */\n --font-stack: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n /* RESET & BASE */\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-deep);\n color: var(--text-main);\n font-family: var(--font-stack);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n position: relative;\n }\n\n /* BACKGROUND EFFECTS */\n .bg-grid {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(11, 19, 43, 0.9) 1px, transparent 1px),\n linear-gradient(90deg, rgba(11, 19, 43, 0.9) 1px, transparent 1px);\n background-size: 50px 50px;\n background-color: #070b1a;\n z-index: -2;\n mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\n -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\n }\n\n .bg-glow {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80vw;\n height: 80vh;\n background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);\n z-index: -1;\n pointer-events: none;\n }\n\n /* LAYOUT CONTAINERS */\n header {\n text-align: center;\n padding: 4rem 1rem 2rem;\n position: relative;\n }\n\n .brand-logo {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 4px;\n color: var(--accent-cyan);\n margin-bottom: 1rem;\n display: inline-block;\n border: 1px solid var(--accent-cyan);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n background: rgba(0, 212, 255, 0.05);\n box-shadow: 0 0 15px var(--accent-glow);\n }\n\n h1 {\n font-size: 3.5rem;\n font-weight: 700;\n letter-spacing: -1px;\n margin-bottom: 0.5rem;\n background: linear-gradient(to right, #fff, var(--accent-cyan));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .tagline {\n font-size: 1.1rem;\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n main {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem 1rem;\n perspective: 1000px; /* For 3D effects */\n }\n\n .stack-container {\n width: 100%;\n max-width: var(--container-width);\n display: flex;\n flex-direction: column;\n gap: var(--layer-gap);\n position: relative;\n }\n\n /* \n * LAYER COMPONENT \n * Each layer is a glass-morphism card\n */\n .layer {\n position: relative;\n height: var(--layer-height);\n border-radius: 16px;\n display: flex;\n align-items: center;\n padding: 0 3rem;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n overflow: hidden;\n border: 1px solid rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n \n /* Initial state for animation */\n opacity: 0;\n transform: translateY(50px) scale(0.95);\n }\n\n /* Animation class added via JS */\n .layer.animate-in {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n /* Layer Specific Styles */\n .layer[data-id=\"earth\"] {\n background: var(--layer-earth-grad);\n border-bottom: 4px solid #000;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .layer[data-id=\"owncloud\"] {\n background: var(--layer-cloud-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"ownai\"] {\n background: var(--layer-ai-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"ownos\"] {\n background: var(--layer-os-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"own1\"] {\n background: var(--layer-own1-grad);\n border-top: 1px solid #fff;\n box-shadow: 0 0 40px rgba(0, 212, 255, 0.3);\n z-index: 10;\n }\n\n /* Hover Effects */\n .layer:hover {\n transform: translateY(-5px) scale(1.02);\n z-index: 20;\n }\n\n .layer[data-id=\"earth\"]:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.6); }\n .layer[data-id=\"owncloud\"]:hover { box-shadow: 0 15px 40px rgba(0, 53, 84, 0.5); }\n .layer[data-id=\"ownai\"]:hover { box-shadow: 0 15px 40px rgba(0, 119, 182, 0.5); }\n .layer[data-id=\"ownos\"]:hover { box-shadow: 0 15px 40px rgba(0, 150, 199, 0.5); }\n .layer[data-id=\"own1\"]:hover { box-shadow: 0 20px 60px rgba(0, 212, 255, 0.6); border-color: #fff; }\n\n /* Layer Content */\n .layer-content {\n position: relative;\n z-index: 2;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n pointer-events: none; /* Let clicks pass to layer */\n }\n\n .layer-info {\n flex: 1;\n }\n\n .layer-title {\n font-size: 1.5rem;\n font-weight: 600;\n color: #fff;\n margin-bottom: 0.25rem;\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n letter-spacing: 0.5px;\n }\n\n .layer[data-id=\"own1\"] .layer-title {\n font-size: 1.8rem;\n color: #0B132B; /* Contrast for bright top layer */\n text-shadow: none;\n }\n\n .layer-desc {\n font-size: 0.95rem;\n color: rgba(255,255,255,0.8);\n line-height: 1.4;\n max-width: 600px;\n }\n\n .layer[data-id=\"own1\"] .layer-desc {\n color: rgba(11, 19, 43, 0.8);\n }\n\n /* Visual Icon/Graphic Area */\n .layer-visual {\n width: 120px;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n }\n\n /* SVG Icons */\n .layer-icon {\n width: 48px;\n height: 48px;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n color: rgba(255,255,255,0.9);\n transition: transform 0.3s ease;\n }\n\n .layer[data-id=\"own1\"] .layer-icon {\n color: #0B132B;\n }\n\n .layer:hover .layer-icon {\n transform: scale(1.1);\n }\n\n /* \n * DECORATIVE ELEMENTS (Pseudo-3D Sides)\n * Adds depth to the stack\n */\n .layer::before, .layer::after {\n content: '';\n position: absolute;\n top: 0;\n width: 15px;\n height: 100%;\n background: inherit;\n z-index: 1;\n transform: skewY(-5deg);\n transform-origin: top left;\n }\n \n .layer::before {\n left: -10px;\n transform: skewY(-5deg);\n background: rgba(0,0,0,0.2);\n border-left: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer::after {\n right: -10px;\n transform: skewY(5deg);\n background: rgba(0,0,0,0.2);\n border-right: 1px solid rgba(255,255,255,0.1);\n }\n\n /* \n * FOOTER\n */\n footer {\n text-align: center;\n padding: 3rem 1rem;\n color: var(--text-muted);\n font-size: 0.8rem;\n border-top: 1px solid rgba(255,255,255,0.05);\n background: linear-gradient(to top, #050914, transparent);\n }\n\n .footer-links span {\n margin: 0 10px;\n cursor: pointer;\n transition: color 0.2s;\n }\n\n .footer-links span:hover {\n color: var(--accent-cyan);\n }\n\n /* \n * RESPONSIVE\n */\n @media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n .layer { height: 120px; padding: 0 1.5rem; }\n .layer-title { font-size: 1.2rem; }\n .layer-desc { display: none; } /* Hide desc on mobile to save space */\n .layer-visual { width: 60px; }\n .layer-icon { width: 32px; height: 32px; }\n .layer::before, .layer::after { width: 8px; }\n }\n\n /* \n * ANIMATIONS\n */\n @keyframes pulse-glow {\n 0% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }\n 50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.3); }\n 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }\n }\n\n .layer[data-id=\"own1\"] {\n animation: pulse-glow 3s infinite;\n }\n\n </style>\n</head>\n<body>\n\n <!-- Background Elements -->\n <div class=\"bg-grid\"></div>\n <div class=\"bg-glow\"></div>\n\n <!-- Header -->\n <header>\n <div class=\"brand-logo\">Earth Compute</div>\n <h1>Global Intelligence Stack</h1>\n <p class=\"tagline\">Five sovereign layers. One seamless ecosystem. Price discovery for the AI age.</p>\n </header>\n\n <!-- Main Stack Diagram -->\n <main>\n <div class=\"stack-container\" id=\"stack\">\n <!-- Layers injected via JS for cleaner code structure, or hardcoded below. \n Hardcoding here for semantic clarity, but we will animate them. -->\n\n <!-- 1. Earth Compute (Base) -->\n <div class=\"layer\" data-id=\"earth\" data-delay=\"0\">\n <div class=\"layer-content\">\n <div class=\"layer-info\">\n <div class=\"layer-title\">Earth Compute</div>\n <div class=\"layer-desc\">Global compute intelligence and price discovery. The foundational layer aggregating decentralized resources.</div>\n </div>\n <div class=\"layer-visual\">\n <!-- Globe Icon -->\n <svg class=\"layer-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M2 12h20\"></path>\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"></path>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- 2. OwnCloud -->\n <div class=\"layer\" data-id=\"owncloud\" data-delay=\"100\">\n <div class=\"layer-content\">\n <div class=\"layer-info\">\n <div class=\"layer-title\">OwnCloud</div\n</body>\n</html>",
"kind": "page",
"lineCount": 411,
"charCount": 13005,
"llmAuthored": true
},
"produces": {
"appHtml": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Earth Compute | Sovereign AI Ecosystem</title>\n <style>\n /* \n * EARTH COMPUTE - SYSTEM CORE STYLES\n * Theme: Deep-Space Tech / Dark Navy / Cyan Accents\n * No External Dependencies\n */\n\n :root {\n /* Brand Palette */\n --bg-deep: #0B132B;\n --bg-panel: #1C2541;\n --accent-cyan: #00D4FF;\n --accent-glow: rgba(0, 212, 255, 0.4);\n --text-main: #FFFFFF;\n --text-muted: #8D99AE;\n \n /* Layer Specific Gradients (Bottom to Top) */\n --layer-earth-grad: linear-gradient(135deg, #1C2541 0%, #0B132B 100%);\n --layer-cloud-grad: linear-gradient(135deg, #003554 0%, #00509e 100%);\n --layer-ai-grad: linear-gradient(135deg, #00509e 0%, #0077b6 100%);\n --layer-os-grad: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);\n --layer-own1-grad: linear-gradient(135deg, #0096c7 0%, #00D4FF 100%);\n\n /* Spacing & sizing */\n --layer-height: 140px;\n --layer-gap: 24px;\n --container-width: 900px;\n \n /* Typography */\n --font-stack: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n /* RESET & BASE */\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-deep);\n color: var(--text-main);\n font-family: var(--font-stack);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n position: relative;\n }\n\n /* BACKGROUND EFFECTS */\n .bg-grid {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(11, 19, 43, 0.9) 1px, transparent 1px),\n linear-gradient(90deg, rgba(11, 19, 43, 0.9) 1px, transparent 1px);\n background-size: 50px 50px;\n background-color: #070b1a;\n z-index: -2;\n mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\n -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\n }\n\n .bg-glow {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80vw;\n height: 80vh;\n background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);\n z-index: -1;\n pointer-events: none;\n }\n\n /* LAYOUT CONTAINERS */\n header {\n text-align: center;\n padding: 4rem 1rem 2rem;\n position: relative;\n }\n\n .brand-logo {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 4px;\n color: var(--accent-cyan);\n margin-bottom: 1rem;\n display: inline-block;\n border: 1px solid var(--accent-cyan);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n background: rgba(0, 212, 255, 0.05);\n box-shadow: 0 0 15px var(--accent-glow);\n }\n\n h1 {\n font-size: 3.5rem;\n font-weight: 700;\n letter-spacing: -1px;\n margin-bottom: 0.5rem;\n background: linear-gradient(to right, #fff, var(--accent-cyan));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .tagline {\n font-size: 1.1rem;\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n main {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem 1rem;\n perspective: 1000px; /* For 3D effects */\n }\n\n .stack-container {\n width: 100%;\n max-width: var(--container-width);\n display: flex;\n flex-direction: column;\n gap: var(--layer-gap);\n position: relative;\n }\n\n /* \n * LAYER COMPONENT \n * Each layer is a glass-morphism card\n */\n .layer {\n position: relative;\n height: var(--layer-height);\n border-radius: 16px;\n display: flex;\n align-items: center;\n padding: 0 3rem;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n overflow: hidden;\n border: 1px solid rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n \n /* Initial state for animation */\n opacity: 0;\n transform: translateY(50px) scale(0.95);\n }\n\n /* Animation class added via JS */\n .layer.animate-in {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n /* Layer Specific Styles */\n .layer[data-id=\"earth\"] {\n background: var(--layer-earth-grad);\n border-bottom: 4px solid #000;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .layer[data-id=\"owncloud\"] {\n background: var(--layer-cloud-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"ownai\"] {\n background: var(--layer-ai-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"ownos\"] {\n background: var(--layer-os-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"own1\"] {\n background: var(--layer-own1-grad);\n border-top: 1px solid #fff;\n box-shadow: 0 0 40px rgba(0, 212, 255, 0.3);\n z-index: 10;\n }\n\n /* Hover Effects */\n .layer:hover {\n transform: translateY(-5px) scale(1.02);\n z-index: 20;\n }\n\n .layer[data-id=\"earth\"]:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.6); }\n .layer[data-id=\"owncloud\"]:hover { box-shadow: 0 15px 40px rgba(0, 53, 84, 0.5); }\n .layer[data-id=\"ownai\"]:hover { box-shadow: 0 15px 40px rgba(0, 119, 182, 0.5); }\n .layer[data-id=\"ownos\"]:hover { box-shadow: 0 15px 40px rgba(0, 150, 199, 0.5); }\n .layer[data-id=\"own1\"]:hover { box-shadow: 0 20px 60px rgba(0, 212, 255, 0.6); border-color: #fff; }\n\n /* Layer Content */\n .layer-content {\n position: relative;\n z-index: 2;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n pointer-events: none; /* Let clicks pass to layer */\n }\n\n .layer-info {\n flex: 1;\n }\n\n .layer-title {\n font-size: 1.5rem;\n font-weight: 600;\n color: #fff;\n margin-bottom: 0.25rem;\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n letter-spacing: 0.5px;\n }\n\n .layer[data-id=\"own1\"] .layer-title {\n font-size: 1.8rem;\n color: #0B132B; /* Contrast for bright top layer */\n text-shadow: none;\n }\n\n .layer-desc {\n font-size: 0.95rem;\n color: rgba(255,255,255,0.8);\n line-height: 1.4;\n max-width: 600px;\n }\n\n .layer[data-id=\"own1\"] .layer-desc {\n color: rgba(11, 19, 43, 0.8);\n }\n\n /* Visual Icon/Graphic Area */\n .layer-visual {\n width: 120px;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n }\n\n /* SVG Icons */\n .layer-icon {\n width: 48px;\n height: 48px;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n color: rgba(255,255,255,0.9);\n transition: transform 0.3s ease;\n }\n\n .layer[data-id=\"own1\"] .layer-icon {\n color: #0B132B;\n }\n\n .layer:hover .layer-icon {\n transform: scale(1.1);\n }\n\n /* \n * DECORATIVE ELEMENTS (Pseudo-3D Sides)\n * Adds depth to the stack\n */\n .layer::before, .layer::after {\n content: '';\n position: absolute;\n top: 0;\n width: 15px;\n height: 100%;\n background: inherit;\n z-index: 1;\n transform: skewY(-5deg);\n transform-origin: top left;\n }\n \n .layer::before {\n left: -10px;\n transform: skewY(-5deg);\n background: rgba(0,0,0,0.2);\n border-left: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer::after {\n right: -10px;\n transform: skewY(5deg);\n background: rgba(0,0,0,0.2);\n border-right: 1px solid rgba(255,255,255,0.1);\n }\n\n /* \n * FOOTER\n */\n footer {\n text-align: center;\n padding: 3rem 1rem;\n color: var(--text-muted);\n font-size: 0.8rem;\n border-top: 1px solid rgba(255,255,255,0.05);\n background: linear-gradient(to top, #050914, transparent);\n }\n\n .footer-links span {\n margin: 0 10px;\n cursor: pointer;\n transition: color 0.2s;\n }\n\n .footer-links span:hover {\n color: var(--accent-cyan);\n }\n\n /* \n * RESPONSIVE\n */\n @media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n .layer { height: 120px; padding: 0 1.5rem; }\n .layer-title { font-size: 1.2rem; }\n .layer-desc { display: none; } /* Hide desc on mobile to save space */\n .layer-visual { width: 60px; }\n .layer-icon { width: 32px; height: 32px; }\n .layer::before, .layer::after { width: 8px; }\n }\n\n /* \n * ANIMATIONS\n */\n @keyframes pulse-glow {\n 0% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }\n 50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.3); }\n 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }\n }\n\n .layer[data-id=\"own1\"] {\n animation: pulse-glow 3s infinite;\n }\n\n </style>\n</head>\n<body>\n\n <!-- Background Elements -->\n <div class=\"bg-grid\"></div>\n <div class=\"bg-glow\"></div>\n\n <!-- Header -->\n <header>\n <div class=\"brand-logo\">Earth Compute</div>\n <h1>Global Intelligence Stack</h1>\n <p class=\"tagline\">Five sovereign layers. One seamless ecosystem. Price discovery for the AI age.</p>\n </header>\n\n <!-- Main Stack Diagram -->\n <main>\n <div class=\"stack-container\" id=\"stack\">\n <!-- Layers injected via JS for cleaner code structure, or hardcoded below. \n Hardcoding here for semantic clarity, but we will animate them. -->\n\n <!-- 1. Earth Compute (Base) -->\n <div class=\"layer\" data-id=\"earth\" data-delay=\"0\">\n <div class=\"layer-content\">\n <div class=\"layer-info\">\n <div class=\"layer-title\">Earth Compute</div>\n <div class=\"layer-desc\">Global compute intelligence and price discovery. The foundational layer aggregating decentralized resources.</div>\n </div>\n <div class=\"layer-visual\">\n <!-- Globe Icon -->\n <svg class=\"layer-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M2 12h20\"></path>\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"></path>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- 2. OwnCloud -->\n <div class=\"layer\" data-id=\"owncloud\" data-delay=\"100\">\n <div class=\"layer-content\">\n <div class=\"layer-info\">\n <div class=\"layer-title\">OwnCloud</div\n</body>\n</html>",
"appKind": "page",
"siteHtml": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Earth Compute | Sovereign AI Ecosystem</title>\n <style>\n /* \n * EARTH COMPUTE - SYSTEM CORE STYLES\n * Theme: Deep-Space Tech / Dark Navy / Cyan Accents\n * No External Dependencies\n */\n\n :root {\n /* Brand Palette */\n --bg-deep: #0B132B;\n --bg-panel: #1C2541;\n --accent-cyan: #00D4FF;\n --accent-glow: rgba(0, 212, 255, 0.4);\n --text-main: #FFFFFF;\n --text-muted: #8D99AE;\n \n /* Layer Specific Gradients (Bottom to Top) */\n --layer-earth-grad: linear-gradient(135deg, #1C2541 0%, #0B132B 100%);\n --layer-cloud-grad: linear-gradient(135deg, #003554 0%, #00509e 100%);\n --layer-ai-grad: linear-gradient(135deg, #00509e 0%, #0077b6 100%);\n --layer-os-grad: linear-gradient(135deg, #0077b6 0%, #0096c7 100%);\n --layer-own1-grad: linear-gradient(135deg, #0096c7 0%, #00D4FF 100%);\n\n /* Spacing & sizing */\n --layer-height: 140px;\n --layer-gap: 24px;\n --container-width: 900px;\n \n /* Typography */\n --font-stack: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n /* RESET & BASE */\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background-color: var(--bg-deep);\n color: var(--text-main);\n font-family: var(--font-stack);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n position: relative;\n }\n\n /* BACKGROUND EFFECTS */\n .bg-grid {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(11, 19, 43, 0.9) 1px, transparent 1px),\n linear-gradient(90deg, rgba(11, 19, 43, 0.9) 1px, transparent 1px);\n background-size: 50px 50px;\n background-color: #070b1a;\n z-index: -2;\n mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\n -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);\n }\n\n .bg-glow {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 80vw;\n height: 80vh;\n background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);\n z-index: -1;\n pointer-events: none;\n }\n\n /* LAYOUT CONTAINERS */\n header {\n text-align: center;\n padding: 4rem 1rem 2rem;\n position: relative;\n }\n\n .brand-logo {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 4px;\n color: var(--accent-cyan);\n margin-bottom: 1rem;\n display: inline-block;\n border: 1px solid var(--accent-cyan);\n padding: 0.5rem 1rem;\n border-radius: 4px;\n background: rgba(0, 212, 255, 0.05);\n box-shadow: 0 0 15px var(--accent-glow);\n }\n\n h1 {\n font-size: 3.5rem;\n font-weight: 700;\n letter-spacing: -1px;\n margin-bottom: 0.5rem;\n background: linear-gradient(to right, #fff, var(--accent-cyan));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .tagline {\n font-size: 1.1rem;\n color: var(--text-muted);\n max-width: 600px;\n margin: 0 auto;\n line-height: 1.6;\n }\n\n main {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem 1rem;\n perspective: 1000px; /* For 3D effects */\n }\n\n .stack-container {\n width: 100%;\n max-width: var(--container-width);\n display: flex;\n flex-direction: column;\n gap: var(--layer-gap);\n position: relative;\n }\n\n /* \n * LAYER COMPONENT \n * Each layer is a glass-morphism card\n */\n .layer {\n position: relative;\n height: var(--layer-height);\n border-radius: 16px;\n display: flex;\n align-items: center;\n padding: 0 3rem;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);\n overflow: hidden;\n border: 1px solid rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n \n /* Initial state for animation */\n opacity: 0;\n transform: translateY(50px) scale(0.95);\n }\n\n /* Animation class added via JS */\n .layer.animate-in {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n /* Layer Specific Styles */\n .layer[data-id=\"earth\"] {\n background: var(--layer-earth-grad);\n border-bottom: 4px solid #000;\n box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .layer[data-id=\"owncloud\"] {\n background: var(--layer-cloud-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"ownai\"] {\n background: var(--layer-ai-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"ownos\"] {\n background: var(--layer-os-grad);\n border-top: 1px solid rgba(255,255,255,0.1);\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer[data-id=\"own1\"] {\n background: var(--layer-own1-grad);\n border-top: 1px solid #fff;\n box-shadow: 0 0 40px rgba(0, 212, 255, 0.3);\n z-index: 10;\n }\n\n /* Hover Effects */\n .layer:hover {\n transform: translateY(-5px) scale(1.02);\n z-index: 20;\n }\n\n .layer[data-id=\"earth\"]:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.6); }\n .layer[data-id=\"owncloud\"]:hover { box-shadow: 0 15px 40px rgba(0, 53, 84, 0.5); }\n .layer[data-id=\"ownai\"]:hover { box-shadow: 0 15px 40px rgba(0, 119, 182, 0.5); }\n .layer[data-id=\"ownos\"]:hover { box-shadow: 0 15px 40px rgba(0, 150, 199, 0.5); }\n .layer[data-id=\"own1\"]:hover { box-shadow: 0 20px 60px rgba(0, 212, 255, 0.6); border-color: #fff; }\n\n /* Layer Content */\n .layer-content {\n position: relative;\n z-index: 2;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n pointer-events: none; /* Let clicks pass to layer */\n }\n\n .layer-info {\n flex: 1;\n }\n\n .layer-title {\n font-size: 1.5rem;\n font-weight: 600;\n color: #fff;\n margin-bottom: 0.25rem;\n text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n letter-spacing: 0.5px;\n }\n\n .layer[data-id=\"own1\"] .layer-title {\n font-size: 1.8rem;\n color: #0B132B; /* Contrast for bright top layer */\n text-shadow: none;\n }\n\n .layer-desc {\n font-size: 0.95rem;\n color: rgba(255,255,255,0.8);\n line-height: 1.4;\n max-width: 600px;\n }\n\n .layer[data-id=\"own1\"] .layer-desc {\n color: rgba(11, 19, 43, 0.8);\n }\n\n /* Visual Icon/Graphic Area */\n .layer-visual {\n width: 120px;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n }\n\n /* SVG Icons */\n .layer-icon {\n width: 48px;\n height: 48px;\n fill: none;\n stroke: currentColor;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n color: rgba(255,255,255,0.9);\n transition: transform 0.3s ease;\n }\n\n .layer[data-id=\"own1\"] .layer-icon {\n color: #0B132B;\n }\n\n .layer:hover .layer-icon {\n transform: scale(1.1);\n }\n\n /* \n * DECORATIVE ELEMENTS (Pseudo-3D Sides)\n * Adds depth to the stack\n */\n .layer::before, .layer::after {\n content: '';\n position: absolute;\n top: 0;\n width: 15px;\n height: 100%;\n background: inherit;\n z-index: 1;\n transform: skewY(-5deg);\n transform-origin: top left;\n }\n \n .layer::before {\n left: -10px;\n transform: skewY(-5deg);\n background: rgba(0,0,0,0.2);\n border-left: 1px solid rgba(255,255,255,0.1);\n }\n\n .layer::after {\n right: -10px;\n transform: skewY(5deg);\n background: rgba(0,0,0,0.2);\n border-right: 1px solid rgba(255,255,255,0.1);\n }\n\n /* \n * FOOTER\n */\n footer {\n text-align: center;\n padding: 3rem 1rem;\n color: var(--text-muted);\n font-size: 0.8rem;\n border-top: 1px solid rgba(255,255,255,0.05);\n background: linear-gradient(to top, #050914, transparent);\n }\n\n .footer-links span {\n margin: 0 10px;\n cursor: pointer;\n transition: color 0.2s;\n }\n\n .footer-links span:hover {\n color: var(--accent-cyan);\n }\n\n /* \n * RESPONSIVE\n */\n @media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n .layer { height: 120px; padding: 0 1.5rem; }\n .layer-title { font-size: 1.2rem; }\n .layer-desc { display: none; } /* Hide desc on mobile to save space */\n .layer-visual { width: 60px; }\n .layer-icon { width: 32px; height: 32px; }\n .layer::before, .layer::after { width: 8px; }\n }\n\n /* \n * ANIMATIONS\n */\n @keyframes pulse-glow {\n 0% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }\n 50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.3); }\n 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.1); }\n }\n\n .layer[data-id=\"own1\"] {\n animation: pulse-glow 3s infinite;\n }\n\n </style>\n</head>\n<body>\n\n <!-- Background Elements -->\n <div class=\"bg-grid\"></div>\n <div class=\"bg-glow\"></div>\n\n <!-- Header -->\n <header>\n <div class=\"brand-logo\">Earth Compute</div>\n <h1>Global Intelligence Stack</h1>\n <p class=\"tagline\">Five sovereign layers. One seamless ecosystem. Price discovery for the AI age.</p>\n </header>\n\n <!-- Main Stack Diagram -->\n <main>\n <div class=\"stack-container\" id=\"stack\">\n <!-- Layers injected via JS for cleaner code structure, or hardcoded below. \n Hardcoding here for semantic clarity, but we will animate them. -->\n\n <!-- 1. Earth Compute (Base) -->\n <div class=\"layer\" data-id=\"earth\" data-delay=\"0\">\n <div class=\"layer-content\">\n <div class=\"layer-info\">\n <div class=\"layer-title\">Earth Compute</div>\n <div class=\"layer-desc\">Global compute intelligence and price discovery. The foundational layer aggregating decentralized resources.</div>\n </div>\n <div class=\"layer-visual\">\n <!-- Globe Icon -->\n <svg class=\"layer-icon\" viewBox=\"0 0 24 24\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M2 12h20\"></path>\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"></path>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- 2. OwnCloud -->\n <div class=\"layer\" data-id=\"owncloud\" data-delay=\"100\">\n <div class=\"layer-content\">\n <div class=\"layer-info\">\n <div class=\"layer-title\">OwnCloud</div\n</body>\n</html>"
},
"finishedAt": 1788003340943,
"llmCalls": [
{
"upstream": "http://127.0.0.1:8080",
"modelRequested": "txt2txt",
"temperature": 0.6,
"maxTokens": 4096,
"timeoutMs": 360000,
"startedAt": 1788003181598,
"finishedAt": 1788003340943,
"ok": true,
"promptChars": 2464,
"responseChars": 12997,
"modelServed": "/nix/store/w8fajwih8isx2rl94rb8ggc1knmnf8x9-Qwen3.6-35B-A3B-MTP-GGUF"
}
]
}
},
"startedAt": 1788003181597,
"fingerprint": {
"ownAiUrl": "http://127.0.0.1:8080",
"harnessHost": "127.0.0.1",
"modelServed": "qwen-image",
"nodeVersion": "v24.18.1",
"capturedAt": 1788003181597
},
"finishedAt": 1788003340945,
"scores": {
"perStep": {
"s1-fvlm7": {
"validity": 2,
"fidelity": 2,
"structure": 1,
"depth": 2,
"cleanliness": 2,
"total": 9,
"notes": [
"no interactivity (addEventListener/RAF)"
]
}
},
"total": 9,
"perKind": {
"code-app": 9
},
"axes": [
"validity",
"fidelity",
"structure",
"depth",
"cleanliness"
]
}
}