diff --git a/mockups/palette-comparison.html b/mockups/palette-comparison.html
new file mode 100644
index 0000000..14db39b
--- /dev/null
+++ b/mockups/palette-comparison.html
@@ -0,0 +1,437 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>HAI · LCARS Router Console — Palette Variants</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Antonio:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+  /* ====== CLASSIC LCARS PALETTE ====== */
+  :root,
+  [data-palette="classic"] {
+    --bg:        #000000;
+    --ink:       #FF9966;   /* dominant: peach */
+    --ink-2:     #FFCC99;
+    --wan:       #CC6666;   /* warning: dim red */
+    --mgmt:      #9999CC;   /* lavender */
+    --cam:       #FFCC66;   /* yellow */
+    --hai:       #99CC99;   /* green */
+    --iot:       #CC99CC;   /* purple */
+    --beige:     #FFCC99;
+    --warn:      #FF6666;
+    --bar:       #FF9966;
+    --bar-dim:   #663322;
+    --cell:      #111111;
+    --cell-2:    #1a1a1a;
+    --hai-text:  #000;      /* text color when hai is the bg */
+  }
+
+  /* ====== COMPLEMENTARY PALETTE (180° rotated) ====== */
+  [data-palette="complementary"] {
+    --bg:        #000000;
+    --ink:       #66CCFF;   /* dominant: sky cyan */
+    --ink-2:     #99CCFF;
+    --wan:       #66CCCC;   /* warning: dim turquoise */
+    --mgmt:      #CCCC99;   /* olive-cream */
+    --cam:       #6699FF;   /* royal blue */
+    --hai:       #CC99CC;   /* mauve */
+    --iot:       #99CC99;   /* green (was purple) */
+    --beige:     #99CCFF;
+    --warn:      #99FFFF;   /* alarm: bright cyan */
+    --bar:       #66CCFF;
+    --bar-dim:   #224466;
+    --cell:      #0A0E12;
+    --cell-2:    #141a20;
+    --hai-text:  #000;
+  }
+
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Antonio', 'Arial Narrow', sans-serif; letter-spacing: 0.02em; transition: background 200ms ease, color 200ms ease; }
+  body { min-height: 100vh; padding: 24px; }
+  .mono { font-family: 'JetBrains Mono', monospace; }
+  button { font-family: inherit; cursor: pointer; }
+
+  /* ===== Toolbar ===== */
+  .toolbar {
+    display: flex; gap: 24px; align-items: center; margin-bottom: 24px;
+    flex-wrap: wrap;
+  }
+  .toolbar .group {
+    display: flex; gap: 8px; align-items: center;
+  }
+  .toolbar .label {
+    font-size: 11px; letter-spacing: 0.2em; color: var(--ink-2);
+    text-transform: uppercase; margin-right: 8px;
+  }
+  .toolbar button {
+    background: var(--bar-dim); color: var(--ink); border: none;
+    padding: 10px 20px; border-radius: 18px;
+    font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
+    transition: all 120ms ease;
+  }
+  .toolbar button.active { background: var(--ink); color: #000; }
+  .toolbar button:hover { background: var(--bar); color: #000; }
+
+  /* Palette swatch preview */
+  .palette-preview {
+    display: flex; gap: 4px; margin-left: 8px;
+  }
+  .palette-preview .sw {
+    width: 18px; height: 18px; border-radius: 3px;
+  }
+
+  /* ===== Console chrome ===== */
+  .console {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    grid-template-rows: auto 1fr auto;
+    gap: 8px;
+    min-height: 820px;
+  }
+
+  .topbar {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 200px 1fr auto;
+    gap: 8px;
+    height: 64px;
+  }
+  .topbar .corner {
+    background: var(--ink);
+    border-radius: 0 0 0 32px;
+    display: flex; align-items: flex-end; justify-content: flex-end;
+    padding: 10px 16px;
+    color: #000; font-weight: 700; font-size: 12px; letter-spacing: 0.3em;
+  }
+  .topbar .title-strip {
+    background: var(--bg);
+    border-bottom: 4px solid var(--ink);
+    display: flex; align-items: flex-end; padding: 0 16px 8px;
+    gap: 24px;
+  }
+  .topbar .sys-title {
+    font-size: 28px; font-weight: 700; letter-spacing: 0.1em;
+    color: var(--ink);
+  }
+  .topbar .sys-id {
+    font-size: 12px; color: var(--ink-2); letter-spacing: 0.25em;
+    margin-bottom: 4px;
+  }
+  .topbar .clock {
+    background: var(--ink); color: #000;
+    padding: 0 24px;
+    display: flex; align-items: center;
+    border-radius: 32px 0 0 0;
+    font-weight: 700; font-size: 14px; letter-spacing: 0.15em;
+  }
+
+  /* Left rail */
+  .leftrail {
+    background: var(--bg);
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  .pill {
+    background: var(--bar-dim); color: var(--ink);
+    border: none; padding: 14px 16px; text-align: right;
+    font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
+    border-radius: 0;
+    transition: all 100ms ease;
+  }
+  .pill.active { background: var(--ink); color: #000; }
+  .pill:hover { background: var(--bar); color: #000; }
+  .pill.wan { color: var(--wan); }
+  .pill.wan.active { background: var(--wan); color: #000; }
+  .pill.mgmt { color: var(--mgmt); }
+  .pill.mgmt.active { background: var(--mgmt); color: #000; }
+  .pill.cam { color: var(--cam); }
+  .pill.cam.active { background: var(--cam); color: #000; }
+  .pill.hai { color: var(--hai); }
+  .pill.hai.active { background: var(--hai); color: var(--hai-text); }
+
+  .pill .num {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px; opacity: 0.7; margin-right: 6px;
+  }
+
+  /* Bottom bar */
+  .bottombar {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: 8px; height: 56px;
+  }
+  .bottombar .corner-bl {
+    background: var(--ink);
+    border-radius: 32px 0 0 0;
+    display: flex; align-items: flex-start; justify-content: flex-end;
+    padding: 8px 16px; color: #000; font-weight: 700;
+    font-size: 11px; letter-spacing: 0.25em;
+  }
+  .status-strip {
+    border-top: 4px solid var(--ink);
+    display: flex; align-items: center; gap: 24px;
+    padding: 0 16px;
+    font-size: 12px;
+    font-family: 'JetBrains Mono', monospace;
+  }
+  .status-chip {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 4px 12px; border-radius: 12px;
+    background: var(--cell-2);
+    letter-spacing: 0.1em; color: var(--ink-2);
+  }
+  .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+  .dot.ok   { background: var(--hai); box-shadow: 0 0 8px var(--hai); }
+  .dot.warn { background: var(--cam); box-shadow: 0 0 8px var(--cam); }
+  .dot.err  { background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: blink 1.2s infinite; }
+
+  @keyframes blink { 50% { opacity: 0.3; } }
+
+  /* Main grid */
+  .main {
+    background: var(--bg);
+    padding: 0 8px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 12px;
+  }
+
+  .panel {
+    background: var(--cell);
+    border-radius: 16px;
+    padding: 16px 20px;
+    border-left: 6px solid var(--ink);
+  }
+  .panel.wide { grid-column: 1 / -1; }
+  .panel.wan  { border-left-color: var(--wan); }
+  .panel.mgmt { border-left-color: var(--mgmt); }
+  .panel.cam  { border-left-color: var(--cam); }
+  .panel.hai  { border-left-color: var(--hai); }
+  .panel.iot  { border-left-color: var(--iot); }
+
+  .panel h3 {
+    margin: 0 0 12px 0;
+    font-size: 13px; letter-spacing: 0.25em;
+    text-transform: uppercase; color: var(--ink-2);
+    display: flex; justify-content: space-between; align-items: baseline;
+  }
+  .panel h3 .id {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 10px; color: var(--ink);
+    background: var(--bar-dim);
+    padding: 2px 8px; border-radius: 8px;
+  }
+
+  .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+  .kv .k { color: var(--ink-2); letter-spacing: 0.1em; }
+  .kv .v { color: var(--ink); }
+  .kv .v.green { color: var(--hai); }
+  .kv .v.red { color: var(--wan); }
+  .kv .v.blue { color: var(--mgmt); }
+  .kv .v.yellow { color: var(--cam); }
+
+  /* Detail pane */
+  .detail-pane {
+    background: var(--cell);
+    border-radius: 16px;
+    padding: 16px 20px;
+    border-left: 6px solid var(--mgmt);
+    grid-column: 2; grid-row: 1 / span 3;
+    overflow-y: auto;
+  }
+  .detail-pane h2 {
+    margin: 0 0 16px 0; font-size: 22px;
+    letter-spacing: 0.15em; color: var(--mgmt);
+  }
+
+  .svclist { display: flex; flex-direction: column; gap: 6px; }
+  .svc {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 12px; align-items: center;
+    background: var(--cell-2); padding: 8px 14px; border-radius: 8px;
+    font-family: 'JetBrains Mono', monospace; font-size: 12px;
+  }
+  .svc .name { color: var(--ink); letter-spacing: 0.1em; }
+  .svc .meta { color: var(--ink-2); font-size: 10px; }
+
+  .actionrow { display: flex; gap: 8px; margin-top: 12px; }
+  .actionrow button {
+    background: var(--ink); color: #000; border: none;
+    padding: 10px 20px; border-radius: 18px;
+    font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
+    font-weight: 700;
+  }
+  .actionrow button.secondary { background: var(--bar-dim); color: var(--ink); }
+  .actionrow button.danger    { background: var(--wan); color: #000; }
+
+  .notes {
+    background: var(--cell-2); border-radius: 12px;
+    padding: 16px 20px; margin-top: 16px;
+    border-left: 4px solid var(--mgmt);
+    font-size: 13px; line-height: 1.6; color: var(--ink-2);
+  }
+  .notes strong { color: var(--ink); }
+
+  @media (max-width: 900px) {
+    .console { grid-template-columns: 1fr; }
+    .topbar, .bottombar { grid-template-columns: 1fr; }
+    .main { grid-template-columns: 1fr; }
+    .detail-pane { grid-column: 1; grid-row: auto; }
+    .leftrail { flex-direction: row; flex-wrap: wrap; }
+    .pill { flex: 1 1 30%; text-align: center; padding: 10px; font-size: 11px; }
+  }
+</style>
+</head>
+<body data-palette="classic">
+
+<div class="toolbar">
+  <div class="group">
+    <span class="label">Palette</span>
+    <button class="pal-btn active" data-palette="classic">Classic</button>
+    <button class="pal-btn" data-palette="complementary">Complementary</button>
+  </div>
+  <div class="palette-preview" id="preview"></div>
+</div>
+
+<div class="console">
+  <div class="topbar">
+    <div class="corner">HAI · 47-A</div>
+    <div class="title-strip">
+      <div class="sys-id">ROUTER ID 8B-2F-A1 · SITE LAB · OPENWRT 23.05</div>
+      <div class="sys-title">BRIDGE OPS</div>
+    </div>
+    <div class="clock mono" id="clock">2026.05.01 · 19:27:25</div>
+  </div>
+
+  <div class="leftrail">
+    <button class="pill active"><span class="num">10</span>OVERVIEW</button>
+    <button class="pill wan"><span class="num">20</span>WAN</button>
+    <button class="pill"><span class="num">30</span>VLAN-FW</button>
+    <button class="pill cam"><span class="num">31</span>CAMS</button>
+    <button class="pill hai"><span class="num">32</span>HAI</button>
+    <button class="pill mgmt"><span class="num">33</span>MGMT</button>
+    <button class="pill"><span class="num">40</span>DHCP/DNS</button>
+    <button class="pill"><span class="num">50</span>WIFI</button>
+    <button class="pill mgmt"><span class="num">60</span>TAILSCALE</button>
+    <button class="pill"><span class="num">70</span>MQTT BR</button>
+    <button class="pill"><span class="num">80</span>SERVICES</button>
+    <button class="pill"><span class="num">90</span>GITOPS</button>
+    <button class="pill"><span class="num">99</span>LOGS</button>
+  </div>
+
+  <div class="main">
+    <div class="panel wan">
+      <h3>WAN <span class="id">IF-WAN0</span></h3>
+      <div class="kv">
+        <span class="k">STATE</span><span class="v red">UP · DHCP</span>
+        <span class="k">IPv4</span><span class="v">192.0.2.47/24</span>
+        <span class="k">GW</span><span class="v">192.0.2.1</span>
+        <span class="k">UPTIME</span><span class="v">14d 03h</span>
+        <span class="k">FAILOVER</span><span class="v">mwan3 · LTE standby</span>
+      </div>
+    </div>
+
+    <div class="panel hai">
+      <h3>HAI DEVICE <span class="id">VLAN-20</span></h3>
+      <div class="kv">
+        <span class="k">DEVICE</span><span class="v green">RK3588 · ONLINE</span>
+        <span class="k">IP</span><span class="v">192.168.20.10</span>
+        <span class="k">MQTT</span><span class="v green">CONNECTED</span>
+        <span class="k">FRIGATE</span><span class="v green">RUNNING · NPU</span>
+        <span class="k">LAST EVT</span><span class="v">12s ago</span>
+      </div>
+    </div>
+
+    <div class="panel cam wide">
+      <h3>CAMERAS <span class="id">VLAN-10 · QUARANTINED</span></h3>
+      <div class="kv" style="grid-template-columns: 80px 1fr 80px 1fr;">
+        <span class="k">CAM-01</span><span class="v yellow">192.168.10.11 · RTSP OK</span>
+        <span class="k">CAM-02</span><span class="v yellow">192.168.10.12 · RTSP OK</span>
+        <span class="k">CAM-03</span><span class="v yellow">192.168.10.13 · RTSP OK</span>
+        <span class="k">CAM-04</span><span class="v red">192.168.10.14 · OFFLINE</span>
+        <span class="k">DNS BLOCK</span><span class="v">847 calls today</span>
+        <span class="k">EGRESS</span><span class="v red">DENIED · ALL</span>
+      </div>
+    </div>
+
+    <div class="detail-pane">
+      <h2 class="mono">▸ OVERVIEW</h2>
+      <div class="kv" style="margin-bottom: 16px;">
+        <span class="k">SITE</span><span class="v">site-lab</span>
+        <span class="k">FLEET</span><span class="v">hai-edge / 4 cams · 1 hai</span>
+        <span class="k">CONFIG REV</span><span class="v">git: a3f8b21 · clean</span>
+        <span class="k">LAST PUSH</span><span class="v">2h 14m ago by ops</span>
+        <span class="k">TS NODE</span><span class="v blue">router-site-lab.tail-net.ts</span>
+      </div>
+
+      <h3 style="font-size: 11px; color: var(--ink-2); letter-spacing: 0.25em; margin: 16px 0 8px;">SUBSYSTEMS</h3>
+      <div class="svclist">
+        <div class="svc"><span class="name">dnsmasq</span><span class="meta">14d 03h</span><span class="dot ok"></span></div>
+        <div class="svc"><span class="name">mosquitto</span><span class="meta">14d 03h</span><span class="dot ok"></span></div>
+        <div class="svc"><span class="name">mqtt-bridge → hub</span><span class="meta">connected · q:0</span><span class="dot ok"></span></div>
+        <div class="svc"><span class="name">tailscaled</span><span class="meta">peer × 7</span><span class="dot ok"></span></div>
+        <div class="svc"><span class="name">chrony (ntp)</span><span class="meta">offset ±2ms</span><span class="dot ok"></span></div>
+        <div class="svc"><span class="name">node_exporter</span><span class="meta">:9100</span><span class="dot ok"></span></div>
+        <div class="svc"><span class="name">adblock-dns</span><span class="meta">12.4k entries</span><span class="dot warn"></span></div>
+      </div>
+
+      <div class="actionrow">
+        <button>RECONCILE</button>
+        <button class="secondary">PULL CONFIG</button>
+        <button class="danger">REBOOT</button>
+      </div>
+
+      <div class="notes">
+        <strong>Palette logic preserved:</strong> dominant warm / cool, accent for warnings, distinct hue per VLAN domain. The complementary variant rotates the wheel 180° but keeps the same semantic mappings — cyan replaces peach as the "nominal" color, mauve becomes the HAI compute domain, royal blue marks the camera quarantine. The same panel reads identically in both modes.
+      </div>
+    </div>
+  </div>
+
+  <div class="bottombar">
+    <div class="corner-bl">STATUS · NOMINAL</div>
+    <div class="status-strip">
+      <span class="status-chip"><span class="dot ok"></span>WAN UP</span>
+      <span class="status-chip"><span class="dot ok"></span>MQTT BR</span>
+      <span class="status-chip"><span class="dot ok"></span>TS PEERS 7</span>
+      <span class="status-chip"><span class="dot warn"></span>CAM-04 OFFLINE</span>
+      <span class="status-chip"><span class="dot ok"></span>GIT CLEAN</span>
+      <span class="status-chip">CPU 18% · MEM 42% · LOAD 0.31</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Palette swap
+  const previewEl = document.getElementById('preview');
+  function renderPreview() {
+    const cs = getComputedStyle(document.body);
+    const tokens = ['--ink', '--wan', '--mgmt', '--cam', '--hai', '--iot'];
+    previewEl.innerHTML = tokens
+      .map(t => `<div class="sw" style="background:${cs.getPropertyValue(t).trim()}" title="${t}"></div>`)
+      .join('');
+  }
+  document.querySelectorAll('.pal-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.pal-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      document.body.dataset.palette = btn.dataset.palette;
+      renderPreview();
+    });
+  });
+  renderPreview();
+
+  // Live clock
+  function tick() {
+    const now = new Date();
+    const pad = n => String(n).padStart(2, '0');
+    document.getElementById('clock').textContent =
+      `${now.getFullYear()}.${pad(now.getMonth()+1)}.${pad(now.getDate())} · ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
+  }
+  tick(); setInterval(tick, 1000);
+</script>
+</body>
+</html>
