From 20e37d890ac41c64bcbe2061b83325c07aa0d2cf Mon Sep 17 00:00:00 2001
From: Meta Vens <rwvens@hotmail.com>
Date: Fri, 24 Apr 2026 15:19:29 +0100
Subject: [PATCH] Restyle GUI with StreamPixels cues

---
 src/repixelizer/gui_static/index.html | 130 +++--
 src/repixelizer/gui_static/styles.css | 781 +++++++++++++++++---------
 2 files changed, 610 insertions(+), 301 deletions(-)

diff --git a/src/repixelizer/gui_static/index.html b/src/repixelizer/gui_static/index.html
index afd53b9..844ed92 100644
--- a/src/repixelizer/gui_static/index.html
+++ b/src/repixelizer/gui_static/index.html
@@ -7,24 +7,46 @@
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
-    <div class="app-shell">
-      <header class="masthead panel">
-        <div>
-          <p class="eyebrow">Live Pipeline</p>
-          <h1>Repixelizer</h1>
-        </div>
-        <div class="status-cluster">
-          <span id="statusBadge" class="status-badge">Idle</span>
-          <p id="statusText" class="status-text">Drop a fake sprite in here and let the machine explain itself for once.</p>
-        </div>
-      </header>
+    <div class="shell app-shell">
+      <div class="app-shell-header-row">
+        <header class="app-shell-header">
+          <div class="brand">
+            <div class="brand-lockup">
+              <div class="brand-emblem" aria-hidden="true">
+                <span class="brand-emblem-core"></span>
+              </div>
+              <div class="copy-stack brand-copy">
+                <p class="eyebrow">Live Pipeline</p>
+                <h1>Repixelizer</h1>
+                <p class="copy-tag brand-tag">Take fake pixel art, force it onto a real lattice, then inspect the crime scene frame by frame.</p>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <aside class="header-panel">
+          <div class="header-panel-grid">
+            <div class="mini-card status-card">
+              <strong id="statusBadge" class="status-badge">Idle</strong>
+              <p id="statusText" class="status-text">Drop a fake sprite in here and let the machine explain itself for once.</p>
+            </div>
+            <div class="mini-card">
+              <strong>Instrument Panel</strong>
+              <p class="muted">Watch inference, edge scouting, field prep, solver drift, cleanup, then patch any stubborn pixels yourself.</p>
+            </div>
+          </div>
+        </aside>
+      </div>
 
       <div class="app-grid">
-        <aside class="sidebar panel">
-          <section class="section-block">
-            <div class="section-head">
-              <h2>Input</h2>
-              <button id="pickFileButton" class="ghost-button" type="button">Choose File</button>
+        <aside class="sidebar">
+          <section class="card section-block">
+            <div class="card-head">
+              <div class="copy-stack card-copy">
+                <h2>Input</h2>
+                <p class="copy-tag">Start with the ugly source.</p>
+              </div>
+              <button id="pickFileButton" class="button button-small button-secondary" type="button">Choose File</button>
             </div>
             <input id="fileInput" type="file" accept="image/png,image/*" hidden />
             <button id="dropzone" class="dropzone" type="button">
@@ -33,40 +55,43 @@
             </button>
           </section>
 
-          <section class="section-block">
-            <div class="section-head">
-              <h2>Run Controls</h2>
+          <section class="card section-block">
+            <div class="card-head">
+              <div class="copy-stack card-copy">
+                <h2>Run Controls</h2>
+                <p class="copy-tag">Pin what you know. Search what you do not.</p>
+              </div>
             </div>
             <form id="controlsForm" class="controls-grid">
-              <label>
+              <label class="field">
                 <span>Target Size</span>
                 <input id="targetSizeInput" name="targetSize" type="number" min="1" placeholder="auto" />
               </label>
-              <label>
+              <label class="field">
                 <span>Target Width</span>
                 <input id="targetWidthInput" name="targetWidth" type="number" min="1" placeholder="auto" />
               </label>
-              <label>
+              <label class="field">
                 <span>Target Height</span>
                 <input id="targetHeightInput" name="targetHeight" type="number" min="1" placeholder="auto" />
               </label>
-              <label>
+              <label class="field">
                 <span>Phase X</span>
                 <input id="phaseXInput" name="phaseX" type="number" step="0.05" placeholder="search" />
               </label>
-              <label>
+              <label class="field">
                 <span>Phase Y</span>
                 <input id="phaseYInput" name="phaseY" type="number" step="0.05" placeholder="search" />
               </label>
-              <label>
+              <label class="field">
                 <span>Steps</span>
                 <input id="stepsInput" name="steps" type="number" min="0" value="48" />
               </label>
-              <label>
+              <label class="field">
                 <span>Seed</span>
                 <input id="seedInput" name="seed" type="number" min="0" value="7" />
               </label>
-              <label>
+              <label class="field">
                 <span>Device</span>
                 <select id="deviceInput" name="device">
                   <option value="auto" selected>auto</option>
@@ -83,12 +108,15 @@
                 <span>Skip low-confidence phase rerank</span>
               </label>
             </form>
-            <button id="runButton" class="primary-button" type="button">Run The Machine</button>
+            <button id="runButton" class="button" type="button">Run The Machine</button>
           </section>
 
-          <section class="section-block">
-            <div class="section-head">
-              <h2>Inference</h2>
+          <section class="card section-block">
+            <div class="card-head">
+              <div class="copy-stack card-copy">
+                <h2>Inference</h2>
+                <p class="copy-tag">The ruler and where it landed.</p>
+              </div>
             </div>
             <div id="inferenceSummary" class="info-stack">
               <p class="muted">No lattice picked yet.</p>
@@ -96,18 +124,21 @@
             <div id="candidateList" class="candidate-list"></div>
           </section>
 
-          <section class="section-block">
-            <div class="section-head">
-              <h2>Run Notes</h2>
+          <section class="card section-block">
+            <div class="card-head">
+              <div class="copy-stack card-copy">
+                <h2>Run Notes</h2>
+                <p class="copy-tag">A small log of what the machine thinks it is doing.</p>
+              </div>
             </div>
             <div id="eventLog" class="event-log"></div>
           </section>
         </aside>
 
-        <main class="workspace">
-          <section class="panel viewer-panel">
-            <div class="section-head viewer-head">
-              <div>
+        <main class="workspace page-content">
+          <section class="hero viewer-panel">
+            <div class="card-head viewer-head">
+              <div class="copy-stack card-copy">
                 <p class="eyebrow">Algorithm View</p>
                 <h2 id="viewerTitle">Pipeline Stages</h2>
               </div>
@@ -132,19 +163,20 @@
                 <canvas id="rightCanvas"></canvas>
               </figure>
             </div>
-            <div id="metricsPanel" class="metrics-panel"></div>
+            <div id="metricsPanel" class="metrics-panel stats-grid"></div>
           </section>
 
-          <section class="panel editor-panel">
-            <div class="section-head editor-head">
-              <div>
+          <section class="card editor-panel">
+            <div class="card-head editor-head">
+              <div class="copy-stack card-copy">
                 <p class="eyebrow">Pixel Fixes</p>
                 <h2>Output Editor</h2>
+                <p class="copy-tag">Pencil the stragglers. Hold Alt to steal color straight from the panel.</p>
               </div>
               <div class="editor-actions">
                 <span id="toolMode" class="tool-hint">Pencil. Hold Alt for eyedropper.</span>
-                <button id="resetEditorButton" class="ghost-button" type="button">Reset Output</button>
-                <button id="downloadButton" class="primary-button subdued" type="button">Export PNG</button>
+                <button id="resetEditorButton" class="button button-small button-secondary" type="button">Reset Output</button>
+                <button id="downloadButton" class="button button-small" type="button">Export PNG</button>
               </div>
             </div>
 
@@ -152,25 +184,25 @@
               <div class="paint-block">
                 <div id="paintSwatch" class="paint-swatch"></div>
                 <div class="rgba-inputs">
-                  <label>
+                  <label class="field">
                     <span>R</span>
                     <input id="paintR" type="number" min="0" max="255" value="255" />
                   </label>
-                  <label>
+                  <label class="field">
                     <span>G</span>
                     <input id="paintG" type="number" min="0" max="255" value="255" />
                   </label>
-                  <label>
+                  <label class="field">
                     <span>B</span>
                     <input id="paintB" type="number" min="0" max="255" value="255" />
                   </label>
-                  <label>
+                  <label class="field">
                     <span>A</span>
                     <input id="paintA" type="number" min="0" max="255" value="255" />
                   </label>
                 </div>
               </div>
-              <div class="zoom-block">
+              <div class="zoom-block field">
                 <label for="zoomInput">Zoom</label>
                 <input id="zoomInput" type="range" min="4" max="32" step="1" value="12" />
                 <span id="zoomValue">12x</span>
diff --git a/src/repixelizer/gui_static/styles.css b/src/repixelizer/gui_static/styles.css
index 37f8ff9..834fe7f 100644
--- a/src/repixelizer/gui_static/styles.css
+++ b/src/repixelizer/gui_static/styles.css
@@ -1,41 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");
+
 :root {
   color-scheme: dark;
-  --bg-0: #0b1214;
-  --bg-1: #142126;
-  --bg-2: rgba(14, 28, 32, 0.88);
-  --panel-border: rgba(117, 182, 170, 0.2);
-  --panel-shadow: rgba(0, 0, 0, 0.34);
-  --text: #eef5ef;
-  --muted: #96aba5;
-  --accent: #8fe2c8;
-  --accent-strong: #c2f59d;
-  --warning: #f5b76b;
-  --danger: #ff8172;
-  --line: rgba(255, 255, 255, 0.09);
-  --checker-a: rgba(255, 255, 255, 0.045);
-  --checker-b: rgba(0, 0, 0, 0.12);
-  --font-display: "Aptos Display", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
-  --font-body: "Aptos", "Segoe UI Variable Text", "Verdana", sans-serif;
+  --ui-bg-top: #041327;
+  --ui-bg-mid: #071f38;
+  --ui-bg-bottom: #07172c;
+  --ui-text-bright: #f7efd8;
+  --ui-text: #efe5c9;
+  --ui-text-muted: #d3bb7f;
+  --ui-panel-surface-top: #0f3458;
+  --ui-panel-surface-bottom: #09213e;
+  --ui-accent: #ffd84a;
+  --ui-accent-strong: #ffae1a;
+  --ui-accent-glow-soft: rgba(255, 216, 74, 0.18);
+  --ui-accent-glow: rgba(255, 216, 74, 0.42);
+  --ui-panel-border: #0d3558;
+  --ui-panel-border-deep: #08243e;
+  --ui-shadow: rgba(0, 0, 0, 0.55);
+  --ui-corner-accent: #ffb72a;
+  --ui-noise: rgba(255, 216, 74, 0.16);
+  --ui-pixel-grid: rgba(0, 0, 0, 0.3);
+  --ui-shell-border: rgba(158, 112, 22, 0.94);
+  --ui-shell-inner-shadow: rgba(7, 24, 44, 0.9);
+  --checker-a: rgba(247, 239, 216, 0.07);
+  --checker-b: rgba(0, 0, 0, 0.18);
 }
 
 * {
   box-sizing: border-box;
+  image-rendering: pixelated;
 }
 
 html,
 body {
-  margin: 0;
   min-height: 100%;
-  background:
-    radial-gradient(circle at top left, rgba(143, 226, 200, 0.18), transparent 28%),
-    radial-gradient(circle at top right, rgba(245, 183, 107, 0.16), transparent 24%),
-    linear-gradient(180deg, #081012 0%, #0e181b 100%);
-  color: var(--text);
-  font-family: var(--font-body);
 }
 
 body {
-  min-height: 100vh;
+  margin: 0;
+  background:
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
+    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
+    linear-gradient(180deg, var(--ui-bg-top) 0%, var(--ui-bg-mid) 46%, var(--ui-bg-bottom) 100%);
+  color: var(--ui-text);
+  font-family: "VT323", "Courier New", Courier, monospace;
+  font-size: 26px;
+  line-height: 1.22;
+  letter-spacing: 0.012em;
+  position: relative;
+  overflow-x: hidden;
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 12% 12%, rgba(255, 216, 74, 0.26), transparent 30%),
+    radial-gradient(circle at 88% 18%, rgba(255, 174, 26, 0.32), transparent 28%),
+    radial-gradient(circle at 22% 72%, rgba(255, 216, 74, 0.14), transparent 24%),
+    radial-gradient(circle at 80% 78%, rgba(255, 174, 26, 0.12), transparent 22%),
+    linear-gradient(160deg, rgba(255, 255, 255, 0.045), transparent 24%);
+  opacity: 0.9;
+  mix-blend-mode: screen;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.26) 2px 3px, rgba(255, 216, 74, 0.035) 3px 4px, rgba(0, 0, 0, 0) 4px 6px),
+    repeating-linear-gradient(90deg, transparent 0 2px, rgba(255, 255, 255, 0.03) 2px 3px, rgba(255, 216, 74, 0.02) 3px 4px, transparent 4px 6px),
+    repeating-linear-gradient(0deg, transparent 0 2px, var(--ui-noise) 2px 4px, transparent 4px 6px),
+    linear-gradient(90deg, rgba(255, 216, 74, 0.035), transparent 28%, rgba(255, 174, 26, 0.025) 64%, transparent);
+  background-size: 100% 6px, 100% 100%, 100% 6px, 100% 100%;
+  opacity: 0.95;
+  mix-blend-mode: soft-light;
 }
 
 button,
@@ -44,132 +87,339 @@ select {
   font: inherit;
 }
 
-.app-shell {
-  width: min(1800px, calc(100vw - 32px));
-  margin: 16px auto;
-  display: grid;
-  gap: 16px;
+a,
+button,
+.button {
+  cursor: pointer;
 }
 
-.panel {
-  background: var(--bg-2);
-  border: 1px solid var(--panel-border);
-  border-radius: 24px;
-  box-shadow: 0 22px 60px var(--panel-shadow);
-  backdrop-filter: blur(16px);
-}
-
-.masthead {
-  padding: 20px 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-
-.eyebrow {
-  margin: 0 0 4px;
-  color: var(--accent);
-  text-transform: uppercase;
-  letter-spacing: 0.18em;
-  font-size: 0.72rem;
+h1,
+h2,
+h3,
+strong,
+.button,
+.eyebrow,
+.copy-tag,
+.viz-label,
+.status-badge {
+  font-family: "Press Start 2P", "VT323", monospace;
+  letter-spacing: 0.06em;
 }
 
 h1,
 h2 {
   margin: 0;
-  font-family: var(--font-display);
-  font-weight: 700;
-  letter-spacing: 0.01em;
+  color: var(--ui-text-bright);
 }
 
 h1 {
-  font-size: clamp(1.8rem, 3vw, 2.6rem);
+  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
+  line-height: 1.1;
 }
 
 h2 {
-  font-size: 1.1rem;
+  font-size: 0.9rem;
+  line-height: 1.18;
 }
 
-.status-cluster {
-  display: grid;
-  justify-items: end;
-  gap: 6px;
-  max-width: 520px;
-}
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 8px 14px;
-  border-radius: 999px;
-  background: rgba(143, 226, 200, 0.15);
-  border: 1px solid rgba(143, 226, 200, 0.3);
-  color: var(--accent);
-  font-size: 0.92rem;
-  font-weight: 700;
-}
-
-.status-text {
+p {
   margin: 0;
-  color: var(--muted);
-  text-align: right;
+}
+
+.eyebrow {
+  margin: 0;
+  font-size: 0.68rem;
+  color: var(--ui-accent);
+  text-transform: uppercase;
+}
+
+.copy-tag,
+.muted {
+  color: var(--ui-text-muted);
+}
+
+.shell {
+  position: relative;
+  z-index: 1;
+  width: min(1760px, calc(100vw - 20px));
+  min-height: calc(100dvh - 20px);
+  margin: 10px auto;
+  padding: 14px;
+  display: grid;
+  gap: 12px;
+  background:
+    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.04) 2px 3px, transparent 3px 6px),
+    repeating-linear-gradient(90deg, transparent 0 2px, rgba(0, 0, 0, 0.2) 2px 3px, transparent 3px 6px),
+    linear-gradient(135deg, rgba(255, 216, 74, 0.03), transparent 28%, rgba(255, 174, 26, 0.025) 68%, transparent),
+    linear-gradient(160deg, var(--ui-bg-mid), var(--ui-bg-top));
+  border: 3px solid var(--ui-shell-border);
+  box-shadow:
+    inset 0 0 0 2px var(--ui-shell-inner-shadow),
+    inset 0 0 36px rgba(255, 216, 74, 0.08),
+    0 0 22px var(--ui-accent-glow-soft),
+    0 10px 0 var(--ui-shadow);
+}
+
+.shell::before {
+  content: "";
+  position: absolute;
+  inset: 7px;
+  pointer-events: none;
+  border: 2px dashed rgba(219, 176, 82, 0.24);
+  box-shadow: 0 0 18px var(--ui-accent-glow-soft);
+}
+
+.shell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    repeating-linear-gradient(180deg, var(--ui-pixel-grid) 0 1px, transparent 1px 3px),
+    repeating-linear-gradient(90deg, var(--ui-pixel-grid) 0 1px, transparent 1px 4px),
+    linear-gradient(135deg, rgba(255, 216, 74, 0.03), transparent 36%, rgba(255, 174, 26, 0.025) 72%, transparent);
+  opacity: 0.3;
+}
+
+.app-shell,
+.sidebar,
+.workspace,
+.page-content,
+.section-block,
+.editor-meta,
+.summary-panel,
+.candidate-list,
+.event-log,
+.info-stack {
+  display: grid;
+  gap: 10px;
+}
+
+.app-shell-header-row {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 1fr;
+  align-items: stretch;
+}
+
+:is(.mini-card, .hero, .card, .metric-chip, .summary-card, .app-shell-header, .header-panel, .viz-card, .loss-canvas, .editor-toolbar, .editor-surface, .dropzone, .field input, .field select, .button, .toggle-row, .status-card) {
+  position: relative;
+  overflow: hidden;
+  border: 4px solid var(--ui-panel-border);
+  border-bottom-width: 5px;
+  background: linear-gradient(180deg, var(--ui-panel-surface-top), var(--ui-panel-surface-bottom));
+  box-shadow:
+    inset 0 0 0 2px rgba(255, 216, 74, 0.6),
+    inset 0 0 20px rgba(255, 216, 74, 0.08),
+    inset 0 0 0 5px rgba(7, 24, 44, 0.9),
+    0 0 16px rgba(255, 216, 74, 0.1),
+    0 8px 0 var(--ui-shadow);
+}
+
+:is(.mini-card, .hero, .card, .metric-chip, .summary-card, .app-shell-header, .header-panel, .viz-card, .loss-canvas, .editor-toolbar, .editor-surface, .dropzone, .field input, .field select, .toggle-row, .status-card)::before,
+.button::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  pointer-events: none;
+  border: 1px dotted rgba(148, 109, 38, 0.22);
+}
+
+:is(.mini-card, .hero, .card, .metric-chip, .summary-card, .app-shell-header, .header-panel, .viz-card, .loss-canvas, .editor-toolbar, .editor-surface, .dropzone, .field input, .field select, .toggle-row, .status-card)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.5;
+  background:
+    linear-gradient(to right, var(--ui-corner-accent) 0 3px, transparent 3px 12px) left top / 12px 4px no-repeat,
+    linear-gradient(to bottom, var(--ui-corner-accent) 0 3px, transparent 3px 12px) left top / 4px 12px no-repeat,
+    linear-gradient(to left, var(--ui-corner-accent) 0 3px, transparent 3px 12px) right top / 12px 4px no-repeat,
+    linear-gradient(to bottom, var(--ui-corner-accent) 0 3px, transparent 3px 12px) right top / 4px 12px no-repeat,
+    linear-gradient(to right, var(--ui-corner-accent) 0 3px, transparent 3px 12px) left bottom / 12px 4px no-repeat,
+    linear-gradient(to top, var(--ui-corner-accent) 0 3px, transparent 3px 12px) left bottom / 4px 12px no-repeat,
+    linear-gradient(to left, var(--ui-corner-accent) 0 3px, transparent 3px 12px) right bottom / 12px 4px no-repeat,
+    linear-gradient(to top, var(--ui-corner-accent) 0 3px, transparent 3px 12px) right bottom / 4px 12px no-repeat;
+}
+
+.app-shell-header,
+.header-panel,
+.hero,
+.card {
+  padding: 12px;
 }
 
 .app-grid {
   display: grid;
-  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
-  gap: 16px;
-}
-
-.sidebar,
-.workspace {
-  display: grid;
-  gap: 16px;
+  gap: 12px;
+  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
+  align-items: start;
 }
 
 .sidebar {
   align-content: start;
-  padding: 18px;
 }
 
 .workspace {
   min-width: 0;
 }
 
-.section-block {
+.brand,
+.brand-lockup,
+.copy-stack,
+.header-panel-grid,
+.header-panel-stack {
   display: grid;
+  gap: 10px;
+}
+
+.brand {
+  min-height: 100%;
+  align-items: center;
+}
+
+.brand-lockup {
+  display: flex;
+  align-items: center;
   gap: 12px;
 }
 
-.section-head {
-  display: flex;
+.brand-emblem {
+  width: 132px;
+  height: 132px;
+  flex: 0 0 auto;
+  position: relative;
+  display: grid;
+  place-items: center;
+  background:
+    linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 6px, transparent 6px 100%),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 6px, transparent 6px 100%),
+    linear-gradient(180deg, #f9df6b, #ffae1a 58%, #d37d12);
+  border: 4px solid rgba(8, 36, 62, 0.9);
+  box-shadow:
+    inset 0 0 0 4px rgba(255, 243, 181, 0.45),
+    0 0 18px rgba(255, 216, 74, 0.28);
+}
+
+.brand-emblem::before,
+.brand-emblem::after {
+  content: "";
+  position: absolute;
+  background: rgba(8, 36, 62, 0.92);
+}
+
+.brand-emblem::before {
+  inset: 20px 48px;
+  clip-path: polygon(50% 0%, 100% 26%, 100% 74%, 50% 100%, 0% 74%, 0% 26%);
+}
+
+.brand-emblem::after {
+  inset: 48px 20px;
+  clip-path: polygon(0% 50%, 26% 0%, 74% 0%, 100% 50%, 74% 100%, 26% 100%);
+}
+
+.brand-emblem-core {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  z-index: 1;
+  background: #fff1b6;
+  box-shadow:
+    0 0 0 6px rgba(8, 36, 62, 0.94),
+    0 0 18px rgba(255, 216, 74, 0.38);
+}
+
+.brand-tag {
+  max-width: 40ch;
+}
+
+.header-panel-grid {
+  grid-template-columns: 1fr;
+  align-items: stretch;
+}
+
+.mini-card,
+.candidate-card,
+.event-item,
+.metric-chip,
+.summary-card {
+  padding: 10px;
+}
+
+.mini-card > *,
+.hero > *,
+.card > *,
+.metric-chip > *,
+.summary-card > *,
+.candidate-card > *,
+.event-item > *,
+.app-shell-header > *,
+.header-panel > * {
+  position: relative;
+  z-index: 1;
+}
+
+.status-card {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+}
+
+.status-badge {
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
+  width: fit-content;
+  min-height: 32px;
+  padding: 8px 12px;
+  color: var(--ui-accent);
+  background: rgba(255, 216, 74, 0.12);
+  border: 2px solid rgba(255, 216, 74, 0.28);
+  text-transform: uppercase;
+  font-size: 0.62rem;
+}
+
+.status-text {
+  color: var(--ui-text);
+}
+
+.card-head {
+  position: relative;
+  display: flex;
   justify-content: space-between;
+  align-items: flex-start;
   gap: 12px;
+  padding-bottom: 12px;
+}
+
+.card-head::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, var(--ui-accent), transparent);
+  box-shadow:
+    0 0 10px var(--ui-accent-glow),
+    0 0 18px var(--ui-accent-glow-soft);
 }
 
 .dropzone {
   width: 100%;
-  padding: 28px 16px;
-  border: 1px dashed rgba(143, 226, 200, 0.38);
-  background:
-    linear-gradient(135deg, rgba(143, 226, 200, 0.14), rgba(245, 183, 107, 0.08)),
-    rgba(7, 16, 18, 0.45);
-  border-radius: 20px;
+  padding: 24px 14px;
   display: grid;
   gap: 8px;
   text-align: left;
-  color: var(--text);
-  cursor: pointer;
+  color: var(--ui-text-bright);
+  background:
+    radial-gradient(circle at top left, rgba(255, 216, 74, 0.14), transparent 36%),
+    linear-gradient(180deg, #123e67, #0a223d);
 }
 
 .dropzone strong {
-  font-size: 1.1rem;
-}
-
-.dropzone span {
-  color: var(--muted);
+  font-size: 0.82rem;
+  text-transform: uppercase;
 }
 
 .controls-grid {
@@ -178,28 +428,32 @@ h2 {
   gap: 10px;
 }
 
-.controls-grid label {
+.field {
   display: grid;
-  gap: 6px;
+  gap: 7px;
 }
 
-.controls-grid span,
-.zoom-block label,
-.rgba-inputs span {
-  font-size: 0.78rem;
+.field span,
+.scrubber label,
+.zoom-block label {
+  font-size: 0.72rem;
   text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: var(--muted);
+  color: var(--ui-text-muted);
 }
 
-input[type="number"],
-select {
+.field input,
+.field select {
   width: 100%;
-  padding: 10px 12px;
-  border-radius: 14px;
-  border: 1px solid var(--line);
-  background: rgba(5, 11, 13, 0.78);
-  color: var(--text);
+  min-height: 42px;
+  padding: 8px 10px;
+  color: var(--ui-text);
+  border: 3px solid var(--ui-panel-border);
+  border-bottom-width: 4px;
+  background: linear-gradient(180deg, #133a5f, #0b2544);
+}
+
+.field input::placeholder {
+  color: rgba(211, 187, 127, 0.76);
 }
 
 .toggle-row {
@@ -207,161 +461,157 @@ select {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  background: rgba(5, 11, 13, 0.5);
-  color: var(--text);
+  min-height: 44px;
+  padding: 8px 10px;
+  color: var(--ui-text);
+  background: linear-gradient(180deg, #123a5e, #0b2442);
 }
 
-.toggle-row.compact {
-  grid-column: auto;
-  padding-inline: 14px;
+.toggle-row input {
+  width: 20px;
+  height: 20px;
 }
 
-.primary-button,
-.ghost-button {
-  border-radius: 16px;
-  padding: 11px 16px;
-  border: 1px solid transparent;
-  cursor: pointer;
-}
-
-.primary-button {
-  background: linear-gradient(135deg, #99ebc2, #f0bb75);
-  color: #0a1011;
-  font-weight: 700;
-}
-
-.primary-button.subdued {
-  background: linear-gradient(135deg, rgba(153, 235, 194, 0.78), rgba(240, 187, 117, 0.78));
-}
-
-.ghost-button {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: var(--line);
-  color: var(--text);
-}
-
-.info-stack,
-.candidate-list,
-.event-log,
-.metrics-panel,
-.summary-panel {
-  display: grid;
+.button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   gap: 8px;
+  min-height: 38px;
+  padding: 10px 14px;
+  border: 4px solid var(--ui-panel-border);
+  border-bottom-width: 5px;
+  color: var(--ui-text-bright);
+  text-transform: uppercase;
+  background: linear-gradient(180deg, #1e5f8f, #0f3762);
+  box-shadow:
+    inset 0 0 12px rgba(255, 216, 74, 0.08),
+    0 0 0 1px rgba(255, 216, 74, 0.1),
+    0 4px 0 rgba(0, 0, 0, 0.28);
 }
 
-.muted {
-  margin: 0;
-  color: var(--muted);
+.button::after {
+  content: ">";
+  margin-left: 6px;
+  opacity: 0.7;
+  color: var(--ui-accent);
 }
 
-.candidate-card,
-.event-item,
-.metric-chip,
-.summary-card {
-  padding: 10px 12px;
-  border-radius: 14px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.04);
+.button-secondary {
+  background: linear-gradient(180deg, #1d4f7d, #12345f);
 }
 
-.candidate-card strong,
-.event-item strong {
-  display: block;
-  margin-bottom: 4px;
+.button-small {
+  min-height: 32px;
+  padding: 8px 12px;
+}
+
+.button:hover,
+.button:focus-visible {
+  filter: brightness(1.08);
+  box-shadow:
+    inset 0 0 16px rgba(255, 216, 74, 0.14),
+    0 0 18px var(--ui-accent-glow-soft),
+    0 0 0 1px rgba(255, 216, 74, 0.2),
+    0 4px 0 rgba(0, 0, 0, 0.28);
 }
 
 .viewer-panel,
 .editor-panel {
-  padding: 18px;
   display: grid;
-  gap: 14px;
+  gap: 12px;
 }
 
-.viewer-head {
-  align-items: end;
+.viewer-head,
+.editor-head {
+  align-items: flex-start;
 }
 
 .scrubber {
   min-width: min(420px, 100%);
   display: grid;
-  gap: 8px;
-}
-
-.scrubber label {
-  font-size: 0.78rem;
-  text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: var(--muted);
+  gap: 6px;
 }
 
 .step-value {
-  color: var(--muted);
+  color: var(--ui-text-muted);
 }
 
 .loss-canvas {
   width: 100%;
   height: 120px;
-  border-radius: 18px;
-  border: 1px solid var(--line);
+  display: block;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
-    rgba(5, 11, 13, 0.62);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
+    linear-gradient(180deg, #112f4f, #081c33);
 }
 
 .viewer-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: 10px;
 }
 
 .viz-card {
   margin: 0;
-  padding: 12px;
-  border-radius: 20px;
-  border: 1px solid var(--line);
-  background: rgba(5, 11, 13, 0.5);
+  padding: 10px;
   display: grid;
   gap: 10px;
-  min-width: 0;
+  background:
+    radial-gradient(circle at top left, rgba(255, 216, 74, 0.08), transparent 34%),
+    linear-gradient(180deg, #0f3153, #091f38);
 }
 
 .viz-label {
-  font-size: 0.82rem;
+  font-size: 0.66rem;
+  color: var(--ui-accent);
   text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--muted);
 }
 
 .viz-card canvas {
   width: 100%;
   height: auto;
   display: block;
-  border-radius: 14px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
-    rgba(6, 14, 16, 0.72);
-  image-rendering: pixelated;
+    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
+    linear-gradient(180deg, rgba(5, 11, 13, 0.8), rgba(6, 14, 16, 0.92));
+  border: 3px solid rgba(8, 36, 62, 0.9);
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 216, 74, 0.15),
+    0 0 14px rgba(255, 216, 74, 0.06);
 }
 
 .metrics-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.stats-grid {
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 }
 
+.candidate-card,
+.event-item,
+.metric-chip,
+.summary-card {
+  border: 3px solid rgba(8, 36, 62, 0.88);
+  background:
+    linear-gradient(180deg, rgba(18, 58, 94, 0.95), rgba(9, 33, 62, 0.92));
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 216, 74, 0.22),
+    0 0 14px rgba(255, 216, 74, 0.08);
+}
+
+.candidate-card strong,
+.event-item strong,
 .metric-chip strong,
 .summary-card strong {
   display: block;
-  margin-bottom: 4px;
-  font-size: 0.78rem;
+  margin-bottom: 5px;
+  font-size: 0.62rem;
+  color: var(--ui-accent);
   text-transform: uppercase;
-  letter-spacing: 0.14em;
-  color: var(--muted);
-}
-
-.editor-head {
-  align-items: start;
 }
 
 .editor-actions {
@@ -373,7 +623,7 @@ select {
 }
 
 .tool-hint {
-  color: var(--muted);
+  color: var(--ui-text-muted);
 }
 
 .editor-toolbar {
@@ -381,24 +631,24 @@ select {
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
-  padding: 12px;
-  border-radius: 18px;
-  border: 1px solid var(--line);
-  background: rgba(5, 11, 13, 0.45);
+  padding: 10px;
+  background: linear-gradient(180deg, #103355, #081f37);
 }
 
 .paint-block {
   display: flex;
   align-items: center;
   gap: 12px;
+  flex-wrap: wrap;
 }
 
 .paint-swatch {
-  width: 52px;
-  height: 52px;
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  width: 60px;
+  height: 60px;
+  border: 3px solid rgba(8, 36, 62, 0.9);
+  box-shadow:
+    inset 0 0 0 2px rgba(255, 216, 74, 0.22),
+    0 0 16px rgba(255, 216, 74, 0.08);
 }
 
 .rgba-inputs {
@@ -407,24 +657,23 @@ select {
   flex-wrap: wrap;
 }
 
-.rgba-inputs label {
-  display: grid;
-  gap: 6px;
+.rgba-inputs .field {
+  min-width: 82px;
 }
 
 .rgba-inputs input {
-  width: 82px;
+  min-height: 38px;
+  padding: 6px 8px;
 }
 
 .zoom-block {
-  display: grid;
-  gap: 6px;
+  min-width: 180px;
 }
 
 .editor-stage {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 280px;
-  gap: 14px;
+  grid-template-columns: minmax(0, 1fr) 290px;
+  gap: 12px;
   align-items: start;
 }
 
@@ -434,15 +683,13 @@ select {
     linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%) 0 10px / 20px 20px,
     linear-gradient(45deg, transparent 75%, var(--checker-b) 75%) 10px -10px / 20px 20px,
     linear-gradient(-45deg, transparent 75%, var(--checker-b) 75%) -10px 0 / 20px 20px,
-    rgba(5, 11, 13, 0.8);
+    linear-gradient(180deg, #07172c, #0a2039);
 }
 
 .editor-surface {
   position: relative;
-  min-height: 360px;
+  min-height: 420px;
   overflow: auto;
-  border-radius: 20px;
-  border: 1px solid var(--line);
   padding: 16px;
 }
 
@@ -450,52 +697,82 @@ select {
   position: absolute;
   top: 16px;
   left: 16px;
-  image-rendering: pixelated;
 }
 
 #editorGridCanvas {
   pointer-events: none;
 }
 
-.editor-meta {
-  display: grid;
-  gap: 12px;
-}
-
 .summary-panel {
   align-content: start;
 }
 
 input[type="range"] {
   width: 100%;
+  accent-color: var(--ui-accent);
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 2px dotted var(--ui-text-muted);
+  outline-offset: 2px;
+}
+
+@media (min-width: 941px) {
+  .app-shell-header-row {
+    grid-template-columns: minmax(340px, 1.2fr) minmax(280px, 0.95fr);
+  }
 }
 
 @media (max-width: 1200px) {
-  .app-grid {
-    grid-template-columns: 1fr;
-  }
-
+  .app-grid,
   .editor-stage {
     grid-template-columns: 1fr;
   }
 }
 
-@media (max-width: 900px) {
-  .viewer-grid {
-    grid-template-columns: 1fr;
-  }
-
+@media (max-width: 940px) {
+  .viewer-grid,
   .controls-grid {
     grid-template-columns: 1fr;
   }
 
-  .status-cluster {
-    justify-items: start;
-    text-align: left;
+  .brand-lockup {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
-  .masthead {
-    align-items: start;
-    flex-direction: column;
+  .editor-actions {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 700px) {
+  body {
+    font-size: 22px;
+  }
+
+  .shell {
+    width: min(100vw - 8px, 100%);
+    padding: 8px;
+    margin: 4px auto;
+  }
+
+  .app-shell-header,
+  .header-panel,
+  .hero,
+  .card {
+    padding: 8px;
+  }
+
+  .brand-emblem {
+    width: 108px;
+    height: 108px;
+  }
+
+  .button {
+    width: 100%;
   }
 }