rebrand: Dragonflight — home.html wordmark, accent gradients, brand names

This commit is contained in:
Zac Gaetano 2026-05-21 22:19:00 -04:00
parent 873920d27f
commit b82cc73cf1

View file

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Home — Z-AMPP</title>
<title>Home — Dragonflight</title>
<link rel="stylesheet" href="/dist/app.css">
<style>
/* Page-only layout. Sidebar + all chrome is from /dist/app.css primitives.
@ -17,10 +17,10 @@
overflow: auto;
position: relative;
background:
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(35% 0.16 266 / 0.55), transparent 65%),
radial-gradient(ellipse 80% 60% at 30% 90%, oklch(40% 0.20 266 / 0.45), transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 80%, oklch(45% 0.18 240 / 0.30), transparent 65%),
linear-gradient(135deg, oklch(20% 0.05 260), var(--bg-base) 100%);
radial-gradient(ellipse 70% 50% at 50% 0%, oklch(35% 0.16 32 / 0.55), transparent 65%),
radial-gradient(ellipse 80% 60% at 30% 90%, oklch(40% 0.20 32 / 0.45), transparent 70%),
radial-gradient(ellipse 60% 50% at 80% 80%, oklch(45% 0.18 20 / 0.30), transparent 65%),
linear-gradient(135deg, oklch(20% 0.05 30), var(--bg-base) 100%);
display: flex;
flex-direction: column;
}
@ -43,11 +43,11 @@
border-radius: 50%;
overflow: hidden; position: relative;
background:
radial-gradient(ellipse at 40% 30%, oklch(35% 0.18 266 / 0.4), transparent 65%),
radial-gradient(ellipse at 40% 30%, oklch(35% 0.18 32 / 0.4), transparent 65%),
linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
border: 2px solid var(--accent-border);
box-shadow:
0 20px 50px -10px oklch(45% 0.20 266 / 0.4),
0 20px 50px -10px oklch(62% 0.22 32 / 0.4),
inset 0 1px 0 oklch(100% 0 0 / 0.08);
}
.home-portrait img {
@ -70,16 +70,16 @@
50% { opacity: 1; transform: scale(1.1); }
}
.home-wordmark-svg {
width: min(380px, 70vw);
width: min(520px, 80vw);
height: auto;
filter: drop-shadow(0 16px 30px oklch(35% 0.18 266 / 0.45));
filter: drop-shadow(0 16px 30px oklch(50% 0.22 32 / 0.45));
margin-bottom: -10px;
}
.home-tagline {
display: flex; align-items: center; gap: 12px;
font: 500 17px/1 var(--font);
color: oklch(75% 0.10 240);
color: oklch(75% 0.10 32);
letter-spacing: 0.005em;
}
.home-tagline::before {
@ -101,7 +101,7 @@
flex: 1 1 0;
min-width: 200px;
max-width: 220px;
background: oklch(12% 0.020 250 / 0.85);
background: oklch(12% 0.020 30 / 0.85);
border: 1px solid var(--border-faint);
border-radius: 10px;
overflow: hidden;
@ -118,7 +118,7 @@
.home-card:hover {
transform: translateY(-4px);
border-color: var(--accent-border);
box-shadow: 0 24px 50px -16px oklch(45% 0.20 266 / 0.4);
box-shadow: 0 24px 50px -16px oklch(62% 0.22 32 / 0.4);
}
.home-card-title {
padding: 12px 16px 10px;
@ -193,8 +193,8 @@
<div class="wd-shell">
<nav class="wd-sidebar" aria-label="Main navigation">
<div class="wd-sidebar-header">
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" style="width:18px;height:18px;">
<span class="wd-sidebar-brand">Z-AMPP</span>
<img src="img/dragon-logo.png?v=1" alt="Dragonflight" style="width:18px;height:18px;">
<span class="wd-sidebar-brand">Dragonflight</span>
</div>
<div class="wd-sidebar-nav">
<a href="home.html" class="wd-nav-item is-active">
@ -272,15 +272,15 @@
<img src="img/ampp-safe.png?v=hardhat3" alt="Zac in hardhat">
<span class="home-portrait-dot" title="On duty"></span>
</div>
<svg class="home-wordmark-svg" viewBox="0 0 540 132" xmlns="http://www.w3.org/2000/svg" aria-label="Z-AMPP">
<svg class="home-wordmark-svg" viewBox="0 0 760 132" xmlns="http://www.w3.org/2000/svg" aria-label="Dragonflight">
<defs>
<linearGradient id="zwm" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="oklch(82% 0.14 220)"/>
<stop offset="0.55" stop-color="oklch(58% 0.18 245)"/>
<stop offset="1" stop-color="oklch(32% 0.16 265)"/>
<linearGradient id="dfwm" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="oklch(88% 0.16 48)"/>
<stop offset="0.5" stop-color="oklch(68% 0.22 32)"/>
<stop offset="1" stop-color="oklch(42% 0.18 22)"/>
</linearGradient>
</defs>
<text x="0" y="108" font-family="Inter, system-ui, sans-serif" font-weight="900" font-size="132" letter-spacing="-8" fill="url(#zwm)">Z-AMPP</text>
<text x="0" y="108" font-family="Inter, system-ui, sans-serif" font-weight="900" font-size="120" letter-spacing="-6" fill="url(#dfwm)">Dragonflight</text>
</svg>
</div>
@ -292,8 +292,8 @@
<div class="home-card-title">Library</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<g fill="oklch(25% 0.05 260)" stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<g fill="oklch(25% 0.05 30)" stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5">
<rect x="12" y="14" width="40" height="28" rx="2"/>
<rect x="58" y="14" width="40" height="28" rx="2"/>
<rect x="104" y="14" width="40" height="28" rx="2"/>
@ -307,7 +307,7 @@
<rect x="104" y="82" width="40" height="28" rx="2"/>
<rect x="150" y="82" width="40" height="28" rx="2"/>
</g>
<g fill="oklch(45% 0.20 266 / 0.8)"><circle cx="32" cy="28" r="3"/><circle cx="124" cy="62" r="3"/><circle cx="170" cy="96" r="3"/></g>
<g fill="oklch(62% 0.22 32 / 0.8)"><circle cx="32" cy="28" r="3"/><circle cx="124" cy="62" r="3"/><circle cx="170" cy="96" r="3"/></g>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span><b id="assetCount">--</b>&nbsp;assets</span>
</div>
@ -318,13 +318,13 @@
<div class="home-card-title">Projects</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<g fill="oklch(20% 0.04 260)" stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<g fill="oklch(20% 0.04 30)" stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5">
<path d="M12 24 L12 100 L188 100 L188 36 L92 36 L80 24 Z" />
<path d="M28 56 L184 56" stroke-dasharray="2,3"/>
<path d="M28 76 L184 76" stroke-dasharray="2,3"/>
</g>
<g fill="oklch(45% 0.20 266 / 0.6)">
<g fill="oklch(62% 0.22 32 / 0.6)">
<rect x="32" y="46" width="6" height="6" rx="1"/>
<rect x="32" y="66" width="6" height="6" rx="1"/>
<rect x="32" y="86" width="6" height="6" rx="1"/>
@ -339,13 +339,13 @@
<div class="home-card-title">Ingest</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<g stroke="oklch(45% 0.20 266 / 0.6)" stroke-width="2" fill="none">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<g stroke="oklch(62% 0.22 32 / 0.6)" stroke-width="2" fill="none">
<path d="M100 80 V 30 M85 45 L 100 30 L 115 45" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="30" y1="100" x2="170" y2="100" stroke-dasharray="3,3" stroke-width="1"/>
</g>
<rect x="40" y="92" width="120" height="6" rx="3" fill="oklch(25% 0.05 260)"/>
<rect x="40" y="92" width="68" height="6" rx="3" fill="oklch(55% 0.20 266 / 0.9)"/>
<rect x="40" y="92" width="120" height="6" rx="3" fill="oklch(25% 0.05 30)"/>
<rect x="40" y="92" width="68" height="6" rx="3" fill="oklch(62% 0.22 32 / 0.9)"/>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span><b id="ingestCount">--</b>&nbsp;processing</span>
</div>
@ -356,10 +356,10 @@
<div class="home-card-title">Recorders</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<rect x="20" y="22" width="120" height="80" rx="4" fill="oklch(8% 0.01 250)" stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5"/>
<g opacity="0.5"><path d="M30 50 q15 -12 30 0 t30 0 t30 0 t30 0" stroke="oklch(55% 0.20 266)" stroke-width="1" fill="none"/><path d="M30 70 q15 -8 30 0 t30 0 t30 0 t30 0" stroke="oklch(55% 0.20 266)" stroke-width="1" fill="none"/></g>
<path d="M140 62 L182 42 L182 82 Z" fill="oklch(20% 0.04 260)" stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5"/>
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<rect x="20" y="22" width="120" height="80" rx="4" fill="oklch(8% 0.01 30)" stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5"/>
<g opacity="0.5"><path d="M30 50 q15 -12 30 0 t30 0 t30 0 t30 0" stroke="oklch(62% 0.22 32)" stroke-width="1" fill="none"/><path d="M30 70 q15 -8 30 0 t30 0 t30 0 t30 0" stroke="oklch(62% 0.22 32)" stroke-width="1" fill="none"/></g>
<path d="M140 62 L182 42 L182 82 Z" fill="oklch(20% 0.04 30)" stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5"/>
<circle cx="160" cy="62" r="6" fill="oklch(62% 0.22 25)"><animate attributeName="opacity" values="1;0.5;1" dur="1.6s" repeatCount="indefinite"/></circle>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot" style="background:var(--signal-bad);box-shadow:0 0 6px var(--signal-bad)"></span><b id="recorderCount">--</b>&nbsp;live</span>
@ -371,11 +371,11 @@
<div class="home-card-title">Capture</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<circle cx="100" cy="62" r="34" fill="none" stroke="oklch(45% 0.10 266 / 0.3)" stroke-width="0.5"/>
<circle cx="100" cy="62" r="22" fill="none" stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.5"/>
<circle cx="100" cy="62" r="12" fill="oklch(20% 0.04 260)" stroke="oklch(55% 0.20 266 / 0.7)" stroke-width="1"/>
<circle cx="100" cy="62" r="4" fill="oklch(70% 0.18 266)"/>
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<circle cx="100" cy="62" r="34" fill="none" stroke="oklch(45% 0.10 32 / 0.3)" stroke-width="0.5"/>
<circle cx="100" cy="62" r="22" fill="none" stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.5"/>
<circle cx="100" cy="62" r="12" fill="oklch(20% 0.04 30)" stroke="oklch(62% 0.22 32 / 0.7)" stroke-width="1"/>
<circle cx="100" cy="62" r="4" fill="oklch(76% 0.20 32)"/>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span><b id="captureStatus">Idle</b></span>
</div>
@ -386,17 +386,17 @@
<div class="home-card-title">Editor</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<rect x="14" y="14" width="172" height="44" rx="3" fill="oklch(8% 0.01 250)" stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5"/>
<g stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<rect x="14" y="14" width="172" height="44" rx="3" fill="oklch(8% 0.01 30)" stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5"/>
<g stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5">
<line x1="14" y1="74" x2="186" y2="74"/>
<line x1="14" y1="92" x2="186" y2="92"/>
<line x1="14" y1="110" x2="186" y2="110"/>
</g>
<rect x="22" y="68" width="60" height="12" rx="2" fill="oklch(55% 0.20 266 / 0.8)"/>
<rect x="90" y="68" width="38" height="12" rx="2" fill="oklch(55% 0.20 266 / 0.5)"/>
<rect x="40" y="86" width="90" height="12" rx="2" fill="oklch(70% 0.18 266 / 0.6)"/>
<rect x="30" y="104" width="80" height="12" rx="2" fill="oklch(55% 0.20 266 / 0.7)"/>
<rect x="22" y="68" width="60" height="12" rx="2" fill="oklch(62% 0.22 32 / 0.8)"/>
<rect x="90" y="68" width="38" height="12" rx="2" fill="oklch(62% 0.22 32 / 0.5)"/>
<rect x="40" y="86" width="90" height="12" rx="2" fill="oklch(76% 0.20 32 / 0.6)"/>
<rect x="30" y="104" width="80" height="12" rx="2" fill="oklch(62% 0.22 32 / 0.7)"/>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span>Web editor &nbsp;</span>
</div>
@ -407,8 +407,8 @@
<div class="home-card-title">Jobs</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<g stroke="oklch(45% 0.10 266 / 0.4)" stroke-width="0.5">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<g stroke="oklch(45% 0.10 32 / 0.4)" stroke-width="0.5">
<line x1="14" y1="28" x2="186" y2="28"/>
<line x1="14" y1="46" x2="186" y2="46"/>
<line x1="14" y1="64" x2="186" y2="64"/>
@ -423,15 +423,15 @@
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span><b id="jobCount">--</b>&nbsp;active</span>
</div>
<div class="home-card-desc">Track proxy generation, thumbnails, and AMPP folder sync as they run.</div>
<div class="home-card-desc">Track proxy generation, thumbnails, and folder sync as they run.</div>
</a>
<a href="containers.html" class="home-card">
<div class="home-card-title">Containers</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<g fill="oklch(20% 0.04 260)" stroke="oklch(45% 0.10 266 / 0.45)" stroke-width="0.6">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<g fill="oklch(20% 0.04 30)" stroke="oklch(45% 0.10 32 / 0.45)" stroke-width="0.6">
<rect x="20" y="18" width="160" height="22" rx="3"/>
<rect x="20" y="46" width="160" height="22" rx="3"/>
<rect x="20" y="74" width="160" height="22" rx="3"/>
@ -441,10 +441,10 @@
<circle cx="34" cy="57" r="3.5" fill="oklch(62% 0.22 145)"/>
<circle cx="34" cy="85" r="3.5" fill="oklch(62% 0.22 145)"/>
<circle cx="34" cy="110" r="3.5" fill="oklch(62% 0.22 25)"/>
<rect x="46" y="25" width="60" height="5" rx="2" fill="oklch(50% 0.12 266 / 0.7)"/>
<rect x="46" y="53" width="80" height="5" rx="2" fill="oklch(50% 0.12 266 / 0.7)"/>
<rect x="46" y="81" width="50" height="5" rx="2" fill="oklch(50% 0.12 266 / 0.7)"/>
<rect x="46" y="107" width="70" height="4" rx="2" fill="oklch(40% 0.10 266 / 0.5)"/>
<rect x="46" y="25" width="60" height="5" rx="2" fill="oklch(50% 0.12 32 / 0.7)"/>
<rect x="46" y="53" width="80" height="5" rx="2" fill="oklch(50% 0.12 32 / 0.7)"/>
<rect x="46" y="81" width="50" height="5" rx="2" fill="oklch(50% 0.12 32 / 0.7)"/>
<rect x="46" y="107" width="70" height="4" rx="2" fill="oklch(40% 0.10 32 / 0.5)"/>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span><b id="containerCount">--</b>&nbsp;running</span>
</div>
@ -455,36 +455,36 @@
<div class="home-card-title">Cluster</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<circle cx="100" cy="62" r="10" fill="oklch(20% 0.04 260)" stroke="oklch(55% 0.20 266 / 0.7)" stroke-width="1"/>
<circle cx="100" cy="62" r="4" fill="oklch(70% 0.18 266)"/>
<line x1="100" y1="62" x2="36" y2="22" stroke="oklch(45% 0.12 266 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="164" y2="22" stroke="oklch(45% 0.12 266 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="24" y2="80" stroke="oklch(45% 0.12 266 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="176" y2="80" stroke="oklch(45% 0.12 266 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="100" y2="108" stroke="oklch(45% 0.12 266 / 0.4)" stroke-width="1"/>
<circle cx="36" cy="22" r="7" fill="oklch(18% 0.03 260)" stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.6"/>
<circle cx="164" cy="22" r="7" fill="oklch(18% 0.03 260)" stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.6"/>
<circle cx="24" cy="80" r="7" fill="oklch(18% 0.03 260)" stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.6"/>
<circle cx="176" cy="80" r="7" fill="oklch(18% 0.03 260)" stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.6"/>
<circle cx="100" cy="108" r="7" fill="oklch(18% 0.03 260)" stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.6"/>
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<circle cx="100" cy="62" r="10" fill="oklch(20% 0.04 30)" stroke="oklch(62% 0.22 32 / 0.7)" stroke-width="1"/>
<circle cx="100" cy="62" r="4" fill="oklch(76% 0.20 32)"/>
<line x1="100" y1="62" x2="36" y2="22" stroke="oklch(45% 0.12 32 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="164" y2="22" stroke="oklch(45% 0.12 32 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="24" y2="80" stroke="oklch(45% 0.12 32 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="176" y2="80" stroke="oklch(45% 0.12 32 / 0.4)" stroke-width="1"/>
<line x1="100" y1="62" x2="100" y2="108" stroke="oklch(45% 0.12 32 / 0.4)" stroke-width="1"/>
<circle cx="36" cy="22" r="7" fill="oklch(18% 0.03 30)" stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.6"/>
<circle cx="164" cy="22" r="7" fill="oklch(18% 0.03 30)" stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.6"/>
<circle cx="24" cy="80" r="7" fill="oklch(18% 0.03 30)" stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.6"/>
<circle cx="176" cy="80" r="7" fill="oklch(18% 0.03 30)" stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.6"/>
<circle cx="100" cy="108" r="7" fill="oklch(18% 0.03 30)" stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.6"/>
<circle cx="36" cy="22" r="2.5" fill="oklch(62% 0.22 145)"/>
<circle cx="164" cy="22" r="2.5" fill="oklch(62% 0.22 145)"/>
<circle cx="24" cy="80" r="2.5" fill="oklch(62% 0.22 145)"/>
<circle cx="176" cy="80" r="2.5" fill="oklch(55% 0.18 80)"/>
<circle cx="100" cy="108" r="2.5" fill="oklch(45% 0.10 266 / 0.4)"/>
<circle cx="100" cy="108" r="2.5" fill="oklch(45% 0.10 32 / 0.4)"/>
</svg>
<span class="home-card-stats"><span class="home-card-stats-dot"></span><b id="nodeCount">--</b>&nbsp;nodes</span>
</div>
<div class="home-card-desc">Multi-server cluster registry. Monitor, federate, and scale Z-AMPP nodes.</div>
<div class="home-card-desc">Multi-server cluster registry. Monitor, federate, and scale Dragonflight nodes.</div>
</a>
<a href="tokens.html" class="home-card" title="Just kidding">
<div class="home-card-title">Tokens</div>
<div class="home-card-preview">
<svg class="preview-art" viewBox="0 0 200 125" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 250)"/>
<g stroke="oklch(45% 0.10 266 / 0.5)" stroke-width="0.5"><line x1="14" y1="100" x2="186" y2="100"/><line x1="14" y1="80" x2="186" y2="80" stroke-dasharray="2,3"/><line x1="14" y1="60" x2="186" y2="60" stroke-dasharray="2,3"/></g>
<rect x="0" y="0" width="200" height="125" fill="oklch(13% 0.02 30)"/>
<g stroke="oklch(45% 0.10 32 / 0.5)" stroke-width="0.5"><line x1="14" y1="100" x2="186" y2="100"/><line x1="14" y1="80" x2="186" y2="80" stroke-dasharray="2,3"/><line x1="14" y1="60" x2="186" y2="60" stroke-dasharray="2,3"/></g>
<polyline points="14,90 38,72 62,80 86,55 110,62 134,40 158,48 186,28" fill="none" stroke="oklch(70% 0.18 200)" stroke-width="2"/>
<polyline points="14,95 38,86 62,90 86,76 110,80 134,68 158,72 186,58" fill="none" stroke="oklch(62% 0.15 145)" stroke-width="2"/>
<circle cx="186" cy="28" r="3" fill="oklch(62% 0.22 25)"/>
@ -499,7 +499,7 @@
<div class="home-footer">
<span class="home-footer-mark"><span class="home-footer-mark-dot"></span>Wild Dragon</span>
<span>·</span>
<span id="systemBuild">Z-AMPP Operator Console</span>
<span id="systemBuild">Dragonflight Operator Console</span>
</div>
</div>
</div>