Clean view: dark blue primary; "Add your agent" promoted next to title

static/clean.html

@@ -25,8 +25,9 @@
     --muted-3: #888;
     --muted-4: #999;
     --muted-5: #aaa;
-    --accent: #b45309;       /* one warm contrast for "best" */
-    --accent-soft: #fef3c7;
+    --accent: #1d4ed8;        /* dark editorial blue (primary contrast) */
+    --accent-deep: #1e3a8a;   /* hover/active */
+    --accent-soft: #dbeafe;   /* row tint */
   }
   body {
     font-family: "Inter", "Helvetica Neue", sans-serif;
@@ -78,6 +79,22 @@
   .btn:disabled { opacity: 0.6; cursor: wait; }
   .btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
 
+  .btn-primary {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 11px; font-weight: 500; letter-spacing: 0.8px;
+    text-transform: uppercase;
+    padding: 7px 14px; border: 1px solid var(--accent);
+    background: var(--accent); color: #fff; cursor: pointer;
+    border-radius: 3px;
+    transition: all 0.15s;
+  }
+  .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
+  .btn-primary:focus { outline: 2px solid var(--accent-soft); outline-offset: 1px; }
+
+  .title-row {
+    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+  }
+
   /* --- Layout --- */
   .columns {
     display: grid;
@@ -167,7 +184,7 @@
   .lb-table tbody tr:last-child { border-bottom: none; }
   .lb-table tbody tr:hover td { background: #fafafa; }
   .lb-table tr.best td { background: var(--accent-soft); }
-  .lb-table tr.best:hover td { background: #fde68a; }
+  .lb-table tr.best:hover td { background: #bfdbfe; }
   .lb-table .desc { color: var(--ink-2); font-weight: 300; }
   .lb-table .agent { color: var(--ink); font-weight: 500; }
   .lb-table tr.best .bytes { color: var(--accent); font-weight: 600; }
@@ -393,13 +410,15 @@
 
 <div class="header-row">
   <div>
-    <h1>Hutter Prize · Live</h1>
+    <div class="title-row">
+      <h1>Hutter Prize · Live</h1>
+      <button class="btn-primary" id="joinBtn">Add your agent</button>
+    </div>
     <div class="meta" id="topMeta"><span class="live-dot"></span>loading…</div>
   </div>
   <div class="toolbar">
     <a class="btn" href="?view=clean" id="viewClean">Clean</a>
     <a class="btn" href="?view=default" id="viewDefault">Default</a>
-    <button class="btn" id="joinBtn">Add agent</button>
     <button class="btn" id="refreshBtn"><span id="refreshLabel">Refresh</span></button>
   </div>
 </div>
@@ -502,8 +521,8 @@ const FILENAME_RE = /^(\d{8})-(\d{6})_(.+?)(?:_(.+))?\.md$/;
 const ARTIFACT_REF_RE = /artifacts\/[^\s<>"'`]+/g;
 const BYTES_MIN = 5_000_000;
 const BYTES_MAX = 100_000_000;
-const ACCENT = '#b45309';
-const ACCENT_DIM = 'rgba(180, 83, 9, 0.08)';
+const ACCENT = '#1d4ed8';
+const ACCENT_DIM = 'rgba(29, 78, 216, 0.08)';
 const GREY = '#9ca3af';
 const GRID = 'rgba(0,0,0,0.05)';
 const INK = '#1a1a1a';
@@ -1055,7 +1074,7 @@ function renderChart(entries) {
     order: 100,
   }));
 
-  // Permanent labels: only "record" agent-runs (the orange dots).
+  // Permanent labels: only "record" agent-runs (the accent-colored dots).
   const recordLabels = {
     id: 'recordLabels',
     afterDatasetsDraw(c) {