diff --git a/README.md b/README.md
index a72de03..904a212 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,10 @@ No database. No auth. No external services. Just add your API keys and go.
 
 ---
 
+## Screenshot
+
+![Screenshot of Web Interface](screenshots/screenshot.jpg)
+
 ## Consensus Validation Protocol
 
 ### Purpose
@@ -270,10 +274,6 @@ The codebase has been built with defense-in-depth in mind — server-side person
 
 ---
 
-## Screenshot
-
-![Screenshot of Web Interface](screenshots/newscreenshot.png)
-
 ## Features
 
 | Feature                                | Description                                                                                                                                                                                                                                                                                                               |
diff --git a/app/globals.css b/app/globals.css
index 784663f..c488dfd 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,82 +2,541 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ── Root color tokens ──────────────────────────────────── */
+:root {
+  --rt-bg: #02070f;
+  --rt-bg-2: #050d22;
+  --rt-bg-3: #081634;
+  --rt-blue: #003087;
+  --rt-blue-soft: #4d7ac7;
+  --rt-orange: #ff6200;
+  --rt-orange-soft: #ff9a4d;
+  --rt-text: #f1f5ff;
+  --rt-muted: #8b9cb8;
+  --rt-header-h: 65px;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --rt-header-h: 73px;
+  }
+}
+
+html,
+body {
+  background: var(--rt-bg);
+  color: var(--rt-text);
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    system-ui,
+    sans-serif;
+  font-feature-settings: "ss01", "cv11", "cv02";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.005em;
+}
+
+/* ── Cosmic background scaffold ─────────────────────────── */
+.cosmic-shell {
+  position: relative;
+  min-height: 100vh;
+  isolation: isolate;
+  background:
+    radial-gradient(ellipse 90% 60% at 18% 4%, rgba(0, 48, 135, 0.38), transparent 65%),
+    radial-gradient(ellipse 70% 50% at 88% 12%, rgba(255, 98, 0, 0.1), transparent 60%),
+    radial-gradient(ellipse 100% 70% at 50% 110%, rgba(0, 48, 135, 0.3), transparent 70%),
+    linear-gradient(180deg, #02070f 0%, #030a1c 35%, #050e26 70%, #02070f 100%);
+}
+
+/* Static orange top-glow — paint-once. */
+.cosmic-shell::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 55vh;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    radial-gradient(ellipse 60% 22% at 30% 8%, rgba(255, 98, 0, 0.22), transparent 72%),
+    radial-gradient(ellipse 55% 18% at 65% 14%, rgba(255, 154, 77, 0.18), transparent 75%),
+    radial-gradient(ellipse 50% 14% at 50% 22%, rgba(255, 98, 0, 0.1), transparent 80%);
+  filter: blur(2px);
+  opacity: 0.95;
+  contain: paint;
+}
+
+/* Single, slow, GPU-composited ray sweep — animates only `transform`. */
+.cosmic-shell::after {
+  content: "";
+  position: absolute;
+  inset: -10% -20%;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    linear-gradient(
+      105deg,
+      transparent 38%,
+      rgba(255, 138, 51, 0.1) 48%,
+      rgba(255, 98, 0, 0.16) 50%,
+      rgba(255, 138, 51, 0.1) 52%,
+      transparent 62%
+    ),
+    linear-gradient(
+      98deg,
+      transparent 32%,
+      rgba(77, 122, 199, 0.08) 49%,
+      rgba(126, 165, 230, 0.14) 50%,
+      rgba(77, 122, 199, 0.08) 51%,
+      transparent 68%
+    );
+  opacity: 0.6;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+  animation: raySlide 36s linear infinite;
+  contain: paint;
+}
+
+@keyframes raySlide {
+  0% {
+    transform: translate3d(-3%, 0, 0);
+  }
+  100% {
+    transform: translate3d(3%, 0, 0);
+  }
+}
+
+/* Subtle starfield — opacity-only twinkle, very cheap. */
+.cosmic-stars {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    radial-gradient(1.5px 1.5px at 12% 18%, rgba(241, 245, 255, 0.55), transparent 60%),
+    radial-gradient(1px 1px at 22% 64%, rgba(241, 245, 255, 0.4), transparent 60%),
+    radial-gradient(1.5px 1.5px at 38% 28%, rgba(255, 154, 77, 0.45), transparent 60%),
+    radial-gradient(1px 1px at 48% 82%, rgba(241, 245, 255, 0.35), transparent 60%),
+    radial-gradient(2px 2px at 62% 12%, rgba(241, 245, 255, 0.5), transparent 60%),
+    radial-gradient(1px 1px at 72% 56%, rgba(126, 165, 230, 0.45), transparent 60%),
+    radial-gradient(1.5px 1.5px at 84% 34%, rgba(241, 245, 255, 0.4), transparent 60%),
+    radial-gradient(1px 1px at 92% 78%, rgba(255, 154, 77, 0.5), transparent 60%),
+    radial-gradient(1px 1px at 8% 88%, rgba(241, 245, 255, 0.4), transparent 60%),
+    radial-gradient(1.5px 1.5px at 56% 46%, rgba(241, 245, 255, 0.35), transparent 60%);
+  animation: twinkle 12s ease-in-out infinite alternate;
+  will-change: opacity;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.55;
+  }
+  100% {
+    opacity: 0.9;
+  }
+}
+
+/* Floating orbs — translate-only, GPU layer. */
+.cosmic-orbs {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+  contain: layout paint;
+}
+.cosmic-orbs::before,
+.cosmic-orbs::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(56px);
+  opacity: 0.45;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+}
+.cosmic-orbs::before {
+  width: 460px;
+  height: 460px;
+  top: -160px;
+  left: -120px;
+  background: radial-gradient(circle, rgba(0, 48, 135, 0.6), transparent 70%);
+  animation: orbFloat1 40s ease-in-out infinite;
+}
+.cosmic-orbs::after {
+  width: 400px;
+  height: 400px;
+  bottom: -160px;
+  right: -100px;
+  background: radial-gradient(circle, rgba(255, 98, 0, 0.28), transparent 70%);
+  animation: orbFloat2 48s ease-in-out infinite;
+}
+
+@keyframes orbFloat1 {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(40px, 30px, 0);
+  }
+}
+@keyframes orbFloat2 {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(-36px, -22px, 0);
+  }
+}
+
+/* ── Reduced-motion override ───────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .cosmic-shell::after,
+  .cosmic-stars,
+  .cosmic-orbs::before,
+  .cosmic-orbs::after,
+  .progress-orange,
+  .animate-in,
+  .shine::after {
+    animation: none !important;
+    transition: none !important;
+  }
+  .cosmic-stars {
+    opacity: 0.7;
+  }
+}
+
+/* Phones: lower the cost ceiling further. */
+@media (hover: none) and (max-width: 640px) {
+  .cosmic-shell::after {
+    animation-duration: 60s;
+    opacity: 0.45;
+  }
+  .cosmic-orbs::before {
+    filter: blur(40px);
+  }
+  .cosmic-orbs::after {
+    filter: blur(40px);
+  }
+}
+
+/* ── Glass utilities ─────────────────────────────────────
+   IMPORTANT: backdrop-filter is the most expensive CSS effect
+   when stacked across many elements that paint together with
+   scrolling/animated content behind them. We restrict it to
+   transient or single-instance fixed layers (header, modal,
+   drawer, toaster, sticky progress bar) and use opaque-ish
+   gradients with a luminous border for the rest of the cards.
+   Visually it reads as glass against our largely-static cosmic
+   background while keeping compositing cheap.            */
+
+.glass {
+  background: linear-gradient(135deg, rgba(8, 22, 52, 0.85) 0%, rgba(4, 12, 30, 0.92) 100%);
+  border: 1px solid rgba(77, 122, 199, 0.22);
+  border-radius: 22px;
+  box-shadow:
+    0 12px 32px -10px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+}
+
+.glass-soft {
+  background: linear-gradient(135deg, rgba(8, 22, 52, 0.78) 0%, rgba(4, 12, 30, 0.85) 100%);
+  border: 1px solid rgba(77, 122, 199, 0.16);
+  border-radius: 18px;
+  box-shadow:
+    0 6px 20px -8px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
+}
+
+.glass-strong {
+  background: linear-gradient(135deg, rgba(10, 26, 60, 0.92) 0%, rgba(5, 14, 36, 0.96) 100%);
+  border: 1px solid rgba(77, 122, 199, 0.32);
+  border-radius: 24px;
+  box-shadow:
+    0 20px 48px -16px rgba(0, 0, 0, 0.7),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
+}
+
+.glass-input {
+  background: linear-gradient(135deg, rgba(2, 8, 22, 0.85), rgba(4, 12, 30, 0.78));
+  border: 1px solid rgba(77, 122, 199, 0.2);
+  border-radius: 14px;
+  transition:
+    border-color 200ms ease,
+    box-shadow 200ms ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+.glass-input:hover {
+  border-color: rgba(77, 122, 199, 0.4);
+}
+.glass-input:focus,
+.glass-input:focus-within {
+  border-color: rgba(255, 98, 0, 0.6);
+  box-shadow:
+    0 0 0 3px rgba(255, 98, 0, 0.08),
+    0 0 18px -6px rgba(255, 98, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  outline: none;
+}
+
+/* Small inline pills are infrequent + tiny — cheap to blur. */
+.glass-pill {
+  background: linear-gradient(135deg, rgba(8, 22, 52, 0.55), rgba(4, 12, 30, 0.55));
+  border: 1px solid rgba(77, 122, 199, 0.22);
+  border-radius: 999px;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+/* For genuinely fixed/sticky surfaces that benefit from a real
+   blur of whatever scrolls behind. Use sparingly. */
+.glass-fixed {
+  background: linear-gradient(180deg, rgba(2, 7, 15, 0.7), rgba(2, 7, 15, 0.55));
+  border: 1px solid rgba(77, 122, 199, 0.18);
+  backdrop-filter: blur(20px) saturate(140%);
+  -webkit-backdrop-filter: blur(20px) saturate(140%);
+}
+
+.glass-divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(77, 122, 199, 0.4), transparent);
+}
+
+.btn-orange {
+  background: linear-gradient(180deg, #ff8a3a 0%, #ff6200 60%, #e25400 100%);
+  color: #fff;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 154, 77, 0.55);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.18) inset,
+    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
+    0 8px 22px -6px rgba(255, 98, 0, 0.55);
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease;
+  font-weight: 600;
+  letter-spacing: 0.005em;
+}
+.btn-orange:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.22) inset,
+    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
+    0 12px 28px -6px rgba(255, 98, 0, 0.7);
+}
+.btn-orange:active:not(:disabled) {
+  transform: translateY(0);
+}
+.btn-orange:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  filter: saturate(0.6);
+}
+
+.btn-ghost {
+  background: linear-gradient(135deg, rgba(8, 22, 52, 0.7), rgba(4, 12, 30, 0.7));
+  border: 1px solid rgba(77, 122, 199, 0.25);
+  border-radius: 12px;
+  color: var(--rt-text);
+  transition:
+    border-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease;
+}
+.btn-ghost:hover:not(:disabled) {
+  border-color: rgba(255, 98, 0, 0.45);
+  box-shadow: 0 0 14px -4px rgba(255, 98, 0, 0.35);
+  color: var(--rt-orange-soft);
+}
+
+/* Toggle */
+.glass-toggle {
+  width: 32px;
+  height: 18px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(8, 22, 52, 0.65), rgba(4, 12, 30, 0.7));
+  border: 1px solid rgba(77, 122, 199, 0.3);
+  position: relative;
+  transition:
+    background 200ms ease,
+    border-color 200ms ease,
+    box-shadow 200ms ease;
+  flex-shrink: 0;
+}
+.glass-toggle.on {
+  background: linear-gradient(135deg, #ff8a3a, #ff6200);
+  border-color: rgba(255, 154, 77, 0.7);
+  box-shadow: 0 0 12px -2px rgba(255, 98, 0, 0.6);
+}
+.glass-toggle .knob {
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #f1f5ff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  transition: left 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.glass-toggle.on .knob {
+  left: 16px;
+  background: #ffffff;
+}
+
+/* Section header */
+.section-label {
+  font-size: 9.5px;
+  font-weight: 600;
+  color: rgba(139, 156, 184, 0.85);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+/* Animated orange progress bar — single GPU-composited
+   background-position shift. Cheap. */
+.progress-orange {
+  background: linear-gradient(90deg, #ff6200 0%, #ff9a4d 50%, #ff6200 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2.4s linear infinite;
+  box-shadow: 0 0 12px rgba(255, 98, 0, 0.45);
+  will-change: background-position;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 /* ── Scrollbar ──────────────────────────────────────── */
 ::-webkit-scrollbar {
-  width: 5px;
+  width: 6px;
+  height: 6px;
 }
 ::-webkit-scrollbar-track {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #47556860;
+  background: rgba(77, 122, 199, 0.3);
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #47556890;
+  background: rgba(255, 98, 0, 0.5);
 }
 * {
-  scrollbar-color: #47556860 transparent;
+  scrollbar-color: rgba(77, 122, 199, 0.3) transparent;
 }
 
 /* ── Prose / Markdown ───────────────────────────────── */
 .prose pre {
-  background: #0f172a !important;
-  border: 1px solid #334155;
-  border-radius: 8px;
+  background: rgba(2, 7, 15, 0.85) !important;
+  border: 1px solid rgba(77, 122, 199, 0.2);
+  border-radius: 12px;
 }
 .prose code {
   font-size: 0.85em;
+  color: var(--rt-orange-soft);
 }
 .prose a {
-  color: #93c5fd;
+  color: var(--rt-orange-soft);
   text-decoration: none;
 }
 .prose a:hover {
   text-decoration: underline;
+  color: var(--rt-orange);
 }
 .prose blockquote {
-  border-left-color: #60a5fa;
+  border-left-color: var(--rt-orange);
   color: #cbd5e1;
 }
 .prose strong {
-  color: #f1f5f9;
+  color: var(--rt-text);
 }
 .prose h1,
 .prose h2,
 .prose h3 {
-  color: #f1f5f9;
+  color: var(--rt-text);
 }
 .prose li::marker {
-  color: #64748b;
+  color: rgba(255, 98, 0, 0.6);
 }
 
 /* ── Animations ─────────────────────────────────────── */
-@keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
 .animate-in {
-  animation: fadeInUp 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: fadeInUp 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(8px) scale(0.98);
+    transform: translate3d(0, 8px, 0);
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translate3d(0, 0, 0);
   }
 }
 
-/* ── Selection ──────────────────────────────────────── */
+/* Result card containment: completed cards are static once done,
+   so the browser can skip layout/paint when scrolled out of view. */
+.card-result {
+  contain: layout paint style;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 360px;
+}
+
+/* Streaming card stays painted (its content keeps changing) but
+   its layout/paint are still contained to itself. */
+.card-streaming {
+  contain: layout paint style;
+}
+
+/* Selection */
 ::selection {
-  background: rgba(96, 165, 250, 0.25);
-  color: #f1f5f9;
+  background: rgba(255, 98, 0, 0.35);
+  color: #fff;
+}
+
+/* Focus ring */
+*:focus-visible {
+  outline: 1px solid rgba(255, 98, 0, 0.7);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* Subtle shine sweep on hover */
+.shine {
+  position: relative;
+  overflow: hidden;
+}
+.shine::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  height: 100%;
+  width: 80%;
+  background: linear-gradient(
+    100deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.06) 50%,
+    transparent 100%
+  );
+  transition: left 700ms ease;
+  pointer-events: none;
+}
+.shine:hover::after {
+  left: 120%;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 4236ad1..7d88041 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Toaster } from "sonner";
 import "./globals.css";
 
@@ -17,19 +17,58 @@ export const metadata: Metadata = {
   manifest: "/site.webmanifest",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 5,
+  viewportFit: "cover",
+  themeColor: "#02070F",
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className="dark">
-      <body className="bg-arena-bg text-arena-text antialiased overflow-x-hidden">
+      <body className="bg-arena-bg text-arena-text antialiased overflow-x-clip">
+        {/* ── Fixed cosmic atmosphere — paint once, GPU-composited ───────── */}
+        <div
+          aria-hidden
+          className="fixed inset-0 -z-30 pointer-events-none"
+          style={{
+            backgroundImage: "url(/background.jpg)",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            opacity: 0.4,
+            filter: "saturate(1.05) brightness(0.55)",
+          }}
+        />
+        <div
+          aria-hidden
+          className="fixed inset-0 -z-20 pointer-events-none"
+          style={{
+            background:
+              "radial-gradient(ellipse 80% 50% at 20% 0%, rgba(0, 48, 135, 0.55), transparent 60%)," +
+              "radial-gradient(ellipse 60% 40% at 80% 8%, rgba(255, 98, 0, 0.14), transparent 65%)," +
+              "radial-gradient(ellipse 100% 70% at 50% 110%, rgba(0, 48, 135, 0.42), transparent 70%)," +
+              "linear-gradient(180deg, rgba(2, 7, 15, 0.85) 0%, rgba(3, 10, 28, 0.9) 50%, rgba(2, 7, 15, 0.95) 100%)",
+          }}
+        />
+        {/* Faint starfield (opacity-only twinkle) */}
+        <div aria-hidden className="cosmic-stars fixed inset-0 -z-10 pointer-events-none" />
+        {/* Two slow drifting orbs (translate-only, smaller blur) */}
+        <div aria-hidden className="cosmic-orbs fixed inset-0 -z-10 pointer-events-none" />
+
         {children}
         <Toaster
           theme="dark"
           position="bottom-right"
           toastOptions={{
             style: {
-              background: "#1e2937",
-              border: "1px solid #334155",
-              color: "#f1f5f9",
+              background: "rgba(8, 22, 52, 0.85)",
+              border: "1px solid rgba(77, 122, 199, 0.35)",
+              backdropFilter: "blur(16px)",
+              color: "#F1F5FF",
+              borderRadius: "14px",
+              boxShadow: "0 12px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 48, 135, 0.25)",
             },
           }}
         />
diff --git a/app/page.tsx b/app/page.tsx
index 6e1bc5a..1068bf8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // ─────────────────────────────────────────────────────────────
-// RoundTable — Main Page (Clean Dashboard)
+// RoundTable — Main Page (Glassmorphic Enterprise Dashboard)
 // ─────────────────────────────────────────────────────────────
 
 import { useEffect, useCallback, useState } from "react";
@@ -16,6 +16,7 @@ import ClaimsPanel from "@/components/ClaimsPanel";
 import CostMeter from "@/components/CostMeter";
 import ConfigPanel from "@/components/ConfigPanel";
 import PromptLibrary from "@/components/PromptLibrary";
+import { ConsensusNodesArt, ConfigArt } from "@/components/HeroArt";
 import { toast } from "sonner";
 import SweepResultsPanel from "@/components/SweepResultsPanel";
 import {
@@ -24,13 +25,15 @@ import {
   Settings2,
   Minus,
   Plus,
-  Hexagon,
   Square,
   Users,
   ArrowRight,
   Sparkles,
   Eye,
   Layers,
+  Cpu,
+  Menu,
+  X,
 } from "lucide-react";
 import type { ConsensusEvent, ConsensusRequest, EngineType } from "@/lib/types";
 import { decodeSnapshotFromHash } from "@/lib/session";
@@ -55,6 +58,27 @@ export default function HomePage() {
   const loadSnapshot = useArenaStore((s) => s.loadSnapshot);
 
   const [showOnboarding, setShowOnboarding] = useState(true);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  // Lock body scroll when the mobile drawer is open
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    if (drawerOpen) document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [drawerOpen]);
+
+  // Close drawer on Escape
+  useEffect(() => {
+    if (!drawerOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setDrawerOpen(false);
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [drawerOpen]);
 
   useEffect(() => {
     if (!showOnboarding) return;
@@ -80,7 +104,6 @@ export default function HomePage() {
       });
   }, [setAvailableModels, setModelsLoading]);
 
-  // Load a shared snapshot from the URL hash, if present
   useEffect(() => {
     if (typeof window === "undefined") return;
     if (!window.location.hash) return;
@@ -181,6 +204,7 @@ export default function HomePage() {
     // Clear any previous sweep state when a single-engine run starts
     useArenaStore.getState().clearSweep();
 
+    setDrawerOpen(false);
     toast.info("Consensus started — Esc to cancel");
     await runOneEngine();
   }, [runOneEngine]);
@@ -207,6 +231,7 @@ export default function HomePage() {
     const sweepEngines: EngineType[] = ["cvp", "blind-jury", "adversarial"];
     const store = useArenaStore.getState();
     store.startSweep(sweepEngines);
+    setDrawerOpen(false);
     toast.info(
       `Sweep started — running ${sweepEngines.length} engines sequentially. Esc cancels current.`,
     );
@@ -256,20 +281,145 @@ export default function HomePage() {
     reset();
   }, [reset]);
 
+  // ── Sidebar content (used both inline at lg+ and inside the mobile drawer) ──
+  const sidebarContent = (
+    <div className="space-y-5">
+      <div className="glass overflow-hidden">
+        <ConfigArt className="h-[78px]" />
+        <div className="p-4 sm:p-5 space-y-5">
+          <div className="flex items-center gap-2.5">
+            <div className="w-7 h-7 rounded-lg bg-arena-accent/15 border border-arena-accent/30 flex items-center justify-center shrink-0">
+              <Settings2 className="w-3.5 h-3.5 text-arena-accent" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-[13px] font-semibold text-arena-text tracking-tight">
+                Configuration
+              </p>
+              <p className="text-[10px] text-arena-muted">Provider, model & persona</p>
+            </div>
+          </div>
+          <AISelector />
+        </div>
+      </div>
+
+      <div className="glass p-4 sm:p-5 space-y-3.5">
+        <div className="flex items-center justify-between">
+          <p className="section-label">
+            <Layers className="w-2.5 h-2.5" /> Rounds
+          </p>
+          <span className="text-[9.5px] text-arena-muted/70">
+            {options.engine === "blind-jury" ? "Locked at 1" : "1–10"}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-3">
+          <button
+            onClick={() => setRoundCount(options.rounds - 1)}
+            disabled={isRunning || options.rounds <= 1 || options.engine === "blind-jury"}
+            className="btn-ghost w-10 h-10 sm:w-9 sm:h-9 flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            <Minus className="w-3.5 h-3.5" />
+          </button>
+          <div className="flex-1 text-center">
+            <span className="text-3xl font-bold text-arena-text font-mono tabular-nums tracking-tight">
+              {options.engine === "blind-jury" ? 1 : options.rounds}
+            </span>
+            <p className="text-[9px] text-arena-muted uppercase tracking-wider mt-0.5">
+              debate rounds
+            </p>
+          </div>
+          <button
+            onClick={() => setRoundCount(options.rounds + 1)}
+            disabled={isRunning || options.rounds >= 10 || options.engine === "blind-jury"}
+            className="btn-ghost w-10 h-10 sm:w-9 sm:h-9 flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            <Plus className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="glass p-4 sm:p-5 space-y-3">
+        <div className="flex items-center gap-2">
+          <Cpu className="w-3 h-3 text-arena-accent" />
+          <p className="section-label">Protocol & Engine</p>
+        </div>
+        <ConfigPanel />
+      </div>
+
+      {/* Sub-xl panels: visible whenever the right rail is hidden */}
+      <div className="space-y-5 xl:hidden">
+        <CostMeter />
+        <ConfidenceTrajectory />
+        <DisagreementPanel />
+        <ClaimsPanel />
+      </div>
+
+      {isRunning && (
+        <div className="glass p-4 space-y-3 border border-arena-accent/40 shadow-glow-orange-sm">
+          <div className="flex items-center justify-between">
+            <p className="text-[11px] font-semibold text-arena-glow flex items-center gap-1.5">
+              <span className="relative flex w-2 h-2">
+                <span className="animate-ping absolute inline-flex w-full h-full rounded-full bg-arena-accent opacity-75" />
+                <span className="relative inline-flex w-2 h-2 rounded-full bg-arena-accent" />
+              </span>
+              Round {currentRound} of {options.rounds}
+            </p>
+            <button
+              onClick={handleCancel}
+              className="p-1.5 rounded-md hover:bg-arena-danger/15 text-arena-muted hover:text-arena-danger transition-colors"
+              title="Cancel (Esc)"
+            >
+              <Square className="w-3 h-3 fill-current" />
+            </button>
+          </div>
+          <div className="h-1.5 bg-black/40 rounded-full overflow-hidden border border-white/[0.04]">
+            <div
+              className="h-full progress-orange rounded-full transition-all duration-500"
+              style={{ width: `${progress * 100}%` }}
+            />
+          </div>
+          <p className="text-[9.5px] text-arena-muted">
+            Press{" "}
+            <kbd className="px-1.5 py-0.5 bg-black/45 rounded text-[8.5px] font-mono border border-white/10">
+              Esc
+            </kbd>{" "}
+            to cancel
+          </p>
+        </div>
+      )}
+
+      {finalScore !== null && (
+        <div className="glass p-4 border border-arena-success/40">
+          <p className="text-[10px] text-arena-success font-semibold uppercase tracking-wider">
+            Final Consensus
+          </p>
+          <p className="text-3xl font-bold text-arena-success font-mono tabular-nums mt-1">
+            {finalScore}%
+          </p>
+          <button
+            onClick={reset}
+            className="mt-3 flex items-center gap-1.5 text-[11px] text-arena-muted hover:text-arena-glow transition-colors"
+          >
+            <RotateCcw className="w-3 h-3" /> Reset session
+          </button>
+        </div>
+      )}
+    </div>
+  );
+
   return (
-    <div className="min-h-screen bg-arena-bg text-arena-text">
+    <div className="cosmic-shell min-h-screen text-arena-text relative">
       {/* Shared-view banner */}
       {sharedView && (
-        <div className="sticky top-0 z-40 flex items-center justify-between gap-3 px-6 py-2 bg-arena-accent/10 border-b border-arena-accent/20">
-          <div className="flex items-center gap-2 text-[11px] text-arena-accent">
-            <Eye className="w-3 h-3" />
-            <span>Viewing a shared session. Reset to start your own run.</span>
+        <div className="sticky top-0 z-40 flex items-center justify-between gap-3 px-4 sm:px-6 py-2 bg-arena-accent/10 border-b border-arena-accent/25 backdrop-blur-md">
+          <div className="flex items-center gap-2 text-[11px] text-arena-glow min-w-0">
+            <Eye className="w-3 h-3 shrink-0" />
+            <span className="truncate">Viewing a shared session.</span>
           </div>
           <button
             onClick={handleLeaveSharedView}
-            className="text-[11px] text-arena-accent hover:underline"
+            className="text-[11px] text-arena-glow hover:text-arena-accent transition-colors shrink-0"
           >
-            Exit shared view
+            Exit
           </button>
         </div>
       )}
@@ -277,19 +427,33 @@ export default function HomePage() {
       {/* Onboarding */}
       {showOnboarding && participants.length === 0 && !sharedView && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm cursor-pointer"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 backdrop-blur-md cursor-pointer p-4"
           onClick={() => setShowOnboarding(false)}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="onboarding-title"
         >
-          <div className="bg-arena-surface border border-arena-border rounded-2xl shadow-2xl shadow-black/50 px-10 py-8 max-w-md text-center space-y-5 animate-in">
-            <div className="w-12 h-12 rounded-xl bg-arena-accent/15 flex items-center justify-center mx-auto">
-              <Users className="w-6 h-6 text-arena-accent" />
+          <div className="glass-strong px-7 sm:px-12 py-8 sm:py-10 max-w-md text-center space-y-6 animate-in">
+            <div className="relative w-16 h-16 mx-auto">
+              <div className="absolute inset-0 rounded-2xl bg-arena-accent/20 blur-xl" />
+              <div className="relative w-16 h-16 rounded-2xl flex items-center justify-center bg-gradient-to-br from-[#ff8a3a] to-[#e25400] shadow-glow-orange">
+                <Users className="w-7 h-7 text-white" strokeWidth={2} />
+              </div>
             </div>
-            <h2 className="text-lg font-semibold text-arena-text">Add Participants to Begin</h2>
-            <p className="text-sm text-arena-muted leading-relaxed">
-              Select AI providers and models from the sidebar, assign personas, then enter a prompt.
-            </p>
-            <div className="flex items-center justify-center gap-2.5 text-xs text-arena-accent">
-              <span>Sidebar</span>
+            <div>
+              <h2
+                id="onboarding-title"
+                className="text-[19px] sm:text-xl font-semibold text-arena-text tracking-tight"
+              >
+                Convene the RoundTable
+              </h2>
+              <p className="text-[13px] text-arena-muted mt-2 leading-relaxed">
+                Open the panel, pick a model and persona, then enter your prompt to start a multi-AI
+                consensus debate.
+              </p>
+            </div>
+            <div className="flex items-center justify-center gap-2.5 text-[11px] text-arena-glow font-medium flex-wrap">
+              <span>Panel</span>
               <ArrowRight className="w-3 h-3" />
               <span>Model</span>
               <ArrowRight className="w-3 h-3" />
@@ -302,153 +466,177 @@ export default function HomePage() {
       )}
 
       {/* Header */}
-      <header className="sticky top-0 z-30 flex items-center justify-between px-6 py-3.5 border-b border-arena-border/60 bg-arena-bg/90 backdrop-blur-xl">
-        <div className="flex items-center gap-3">
-          <Hexagon className="w-6 h-6 text-arena-accent" strokeWidth={1.5} />
-          <div>
-            <h1 className="text-[15px] font-semibold text-arena-text tracking-tight leading-tight">
-              RoundTable
-            </h1>
-            <p className="text-[9px] text-arena-muted/70 uppercase tracking-[0.2em] leading-tight">
-              Multi-AI Consensus Playground
-            </p>
+      <header className="sticky top-0 z-30 px-4 sm:px-6 py-3 sm:py-4 backdrop-blur-2xl bg-[#02070F]/55 border-b border-white/[0.04]">
+        <div className="flex items-center justify-between gap-3 max-w-[1800px] mx-auto">
+          <div className="flex items-center gap-2.5 sm:gap-4 min-w-0">
+            {/* Mobile menu button — visible below lg */}
+            <button
+              onClick={() => setDrawerOpen(true)}
+              className="lg:hidden p-2 -ml-1 rounded-lg text-arena-text hover:bg-white/[0.06] transition-colors"
+              aria-label="Open configuration panel"
+            >
+              <Menu className="w-5 h-5" />
+            </button>
+
+            {/* Logo mark */}
+            <div className="relative w-9 h-9 sm:w-10 sm:h-10 shrink-0">
+              <div className="absolute inset-0 rounded-xl bg-arena-accent/35 blur-lg" />
+              <div className="relative w-full h-full rounded-xl bg-gradient-to-br from-[#ff8a3a] via-[#ff6200] to-[#a83b00] flex items-center justify-center shadow-glow-orange-sm border border-white/15">
+                <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
+                  <circle cx="11" cy="11" r="9" stroke="white" strokeWidth="1.4" opacity="0.85" />
+                  <circle cx="11" cy="11" r="5" stroke="white" strokeWidth="1.4" opacity="0.95" />
+                  <circle cx="11" cy="11" r="2" fill="white" />
+                </svg>
+              </div>
+            </div>
+            <div className="min-w-0">
+              <h1 className="text-[15px] sm:text-[17px] font-semibold text-arena-text tracking-tight leading-none">
+                RoundTable
+              </h1>
+              <p className="hidden sm:block text-[10px] text-arena-muted/90 uppercase tracking-[0.22em] mt-1.5 font-medium truncate">
+                Multi-AI Consensus Playground
+              </p>
+              <p className="sm:hidden text-[9px] text-arena-muted/90 uppercase tracking-[0.16em] mt-1 font-medium truncate">
+                Consensus Playground
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 sm:gap-3 shrink-0">
+            <div className="hidden md:flex items-center gap-2 px-3.5 py-2 glass-pill text-[11px] text-arena-muted">
+              <span className="w-1.5 h-1.5 rounded-full bg-arena-success animate-pulse" />
+              <span className="font-medium">Live</span>
+              <span className="text-arena-muted/40">•</span>
+              <span className="tabular-nums">{participants.length} participants</span>
+            </div>
+            <div className="md:hidden flex items-center gap-1.5 px-2.5 py-1.5 glass-pill text-[10px] text-arena-glow">
+              <span className="w-1.5 h-1.5 rounded-full bg-arena-success animate-pulse" />
+              <span className="tabular-nums font-medium">{participants.length}</span>
+            </div>
+            <a
+              href="https://github.com/marceloceccon/askgrokmcp"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[11px] text-arena-muted hover:text-arena-glow transition-colors hidden lg:block"
+            >
+              Protocol inspired by askgrokmcp →
+            </a>
           </div>
         </div>
-        <a
-          href="https://github.com/marceloceccon/askgrokmcp"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-[11px] text-arena-muted/60 hover:text-arena-accent transition-colors"
-        >
-          Protocol inspired by askgrokmcp
-        </a>
       </header>
 
       {/* Main Layout */}
-      <div className="flex min-h-[calc(100vh-53px)]">
-        {/* Sidebar */}
-        <aside className="w-80 shrink-0 border-r border-arena-border/50 bg-arena-surface/50 overflow-y-auto">
-          <div className="p-5 space-y-7">
-            <section>
-              <h2 className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.15em] flex items-center gap-1.5 mb-4">
-                <Settings2 className="w-3 h-3" /> Configuration
-              </h2>
-              <AISelector />
-            </section>
+      <div
+        className="flex max-w-[1800px] mx-auto"
+        style={{ minHeight: "calc(100vh - var(--rt-header-h))" }}
+      >
+        {/* ── Left Sidebar (inline at lg+) ─────────────────── */}
+        <aside
+          className="hidden lg:block w-[340px] shrink-0 px-5 py-6 overflow-y-auto sticky self-start"
+          style={{
+            top: "var(--rt-header-h)",
+            maxHeight: "calc(100vh - var(--rt-header-h))",
+          }}
+        >
+          {sidebarContent}
+        </aside>
 
-            <section>
-              <h2 className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.15em] mb-3">
-                Rounds
-              </h2>
-              <div className="flex items-center gap-3">
-                <button
-                  onClick={() => setRoundCount(options.rounds - 1)}
-                  disabled={isRunning || options.rounds <= 1 || options.engine === "blind-jury"}
-                  className="p-1.5 rounded-lg border border-arena-border text-arena-muted hover:text-arena-text hover:border-arena-accent/50 transition-colors disabled:opacity-25"
-                >
-                  <Minus className="w-3.5 h-3.5" />
-                </button>
-                <span className="text-xl font-semibold text-arena-text font-mono w-6 text-center tabular-nums">
-                  {options.engine === "blind-jury" ? 1 : options.rounds}
-                </span>
+        {/* ── Mobile drawer (< lg) ─────────────────────────── */}
+        {drawerOpen && (
+          <div
+            className="lg:hidden fixed inset-0 z-40 flex"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Configuration panel"
+          >
+            <div
+              className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in"
+              onClick={() => setDrawerOpen(false)}
+              style={{ animationDuration: "200ms" }}
+              aria-hidden
+            />
+            <aside
+              className="relative w-[88%] max-w-[360px] h-full overflow-y-auto px-4 py-5 animate-in"
+              style={{
+                background: "linear-gradient(135deg, rgba(6, 16, 38, 0.96), rgba(2, 7, 15, 0.98))",
+                borderRight: "1px solid rgba(77, 122, 199, 0.22)",
+                boxShadow: "12px 0 40px rgba(0, 0, 0, 0.6)",
+                animationDuration: "260ms",
+              }}
+            >
+              <div className="flex items-center justify-between mb-4">
+                <p className="section-label">
+                  <Settings2 className="w-2.5 h-2.5" /> Workbench
+                </p>
                 <button
-                  onClick={() => setRoundCount(options.rounds + 1)}
-                  disabled={isRunning || options.rounds >= 10 || options.engine === "blind-jury"}
-                  className="p-1.5 rounded-lg border border-arena-border text-arena-muted hover:text-arena-text hover:border-arena-accent/50 transition-colors disabled:opacity-25"
+                  onClick={() => setDrawerOpen(false)}
+                  className="p-1.5 rounded-lg text-arena-muted hover:text-arena-text hover:bg-white/[0.06] transition-colors"
+                  aria-label="Close panel"
                 >
-                  <Plus className="w-3.5 h-3.5" />
+                  <X className="w-4 h-4" />
                 </button>
               </div>
-            </section>
-
-            <section>
-              <h2 className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.15em] mb-3">
-                Protocol
-              </h2>
-              <ConfigPanel />
-            </section>
-
-            {/* On xl+ these panels move into the floating Message Flow
-                container on the right. Keep them in the sidebar below
-                that breakpoint so smaller screens still see them. */}
-            <section className="space-y-3 xl:hidden">
-              <CostMeter />
-              <ConfidenceTrajectory />
-              <DisagreementPanel />
-              <ClaimsPanel />
-            </section>
-
-            {isRunning && (
-              <section className="p-4 rounded-xl bg-arena-accent/10 border border-arena-accent/20">
-                <div className="flex items-center justify-between mb-2.5">
-                  <p className="text-[11px] text-arena-accent font-semibold">
-                    Round {currentRound} of {options.rounds}
-                  </p>
-                  <button
-                    onClick={handleCancel}
-                    className="p-1 rounded hover:bg-arena-danger/15 text-arena-muted hover:text-arena-danger transition-colors"
-                    title="Cancel (Esc)"
-                  >
-                    <Square className="w-3 h-3 fill-current" />
-                  </button>
-                </div>
-                <div className="h-1.5 bg-arena-bg rounded-full overflow-hidden">
-                  <div
-                    className="h-full bg-arena-accent rounded-full transition-all duration-500"
-                    style={{ width: `${progress * 100}%` }}
-                  />
-                </div>
-                <p className="text-[9px] text-arena-muted mt-2">
-                  <kbd className="px-1 py-0.5 bg-arena-bg rounded text-[8px] font-mono border border-arena-border">
-                    Esc
-                  </kbd>{" "}
-                  to cancel
+              {sidebarContent}
+            </aside>
+          </div>
+        )}
+
+        {/* ── Center Main ──────────────────────────────────── */}
+        <main className="flex-1 flex flex-col min-w-0 px-4 sm:px-5 lg:px-6 py-5 sm:py-6 xl:pr-[360px]">
+          {/* Hero command card */}
+          <div className="glass-strong overflow-hidden mb-5 sm:mb-6 animate-in">
+            <ConsensusNodesArt className="h-[120px] sm:h-[160px] md:h-[180px]" />
+            <div className="p-4 sm:p-6 md:p-7 space-y-4 sm:space-y-5">
+              <div>
+                <p className="text-[10px] text-arena-glow uppercase tracking-[0.2em] font-semibold mb-2">
+                  Consensus Console
                 </p>
-              </section>
-            )}
-
-            {finalScore !== null && (
-              <section className="p-4 rounded-xl bg-arena-success/10 border border-arena-success/20">
-                <p className="text-[11px] text-arena-success font-semibold">
-                  Final Consensus: {finalScore}%
+                <h2 className="text-[18px] sm:text-[20px] md:text-[22px] font-semibold text-arena-text tracking-tight leading-tight">
+                  Pose a question to the table.
+                </h2>
+                <p className="text-[12.5px] sm:text-[13px] text-arena-muted mt-1.5 leading-relaxed max-w-2xl">
+                  Multiple AI minds debate, refine, and converge — surfacing both consensus and
+                  productive disagreement.
                 </p>
-                <button
-                  onClick={reset}
-                  className="mt-2 flex items-center gap-1.5 text-[11px] text-arena-muted hover:text-arena-text transition-colors"
-                >
-                  <RotateCcw className="w-3 h-3" /> Reset
-                </button>
-              </section>
-            )}
-          </div>
-        </aside>
-
-        {/* Center */}
-        <main className="flex-1 flex flex-col min-w-0">
-          <div className="px-8 pt-8 pb-5">
-            <div className="max-w-3xl mx-auto">
-              <textarea
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                disabled={isRunning || sharedView}
-                placeholder="Enter a topic, claim, or question for multi-AI consensus analysis..."
-                rows={3}
-                className="w-full bg-arena-surface border border-arena-border rounded-xl px-5 py-4 text-[14px] leading-relaxed text-arena-text placeholder:text-arena-muted/50 focus:outline-none focus:border-arena-accent/60 focus:ring-1 focus:ring-arena-accent/20 resize-none disabled:opacity-40 transition-all"
-              />
+              </div>
+              <div className="glass-input p-1">
+                <textarea
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  disabled={isRunning || sharedView}
+                  placeholder="Enter a topic, claim, or question for multi-AI consensus analysis…"
+                  rows={3}
+                  className="w-full bg-transparent px-4 sm:px-5 py-3.5 sm:py-4 text-[13.5px] sm:text-[14px] leading-relaxed text-arena-text placeholder:text-arena-muted/45 focus:outline-none resize-none disabled:opacity-40"
+                />
+              </div>
               <PromptLibrary />
-              <div className="flex items-center justify-between mt-4">
-                <p className="text-[11px] text-arena-muted tabular-nums">
-                  {participants.length} participant{participants.length !== 1 ? "s" : ""} &middot;{" "}
-                  {options.engine === "blind-jury"
-                    ? "Blind Jury"
-                    : options.engine === "adversarial"
-                      ? `Red Team · ${options.rounds} round${options.rounds !== 1 ? "s" : ""}`
-                      : `${options.rounds} round${options.rounds !== 1 ? "s" : ""}`}
-                </p>
+              <div className="flex items-center justify-between gap-3 sm:gap-4 flex-wrap">
+                <div className="flex items-center gap-2.5 sm:gap-3 text-[11px] sm:text-[11.5px] text-arena-muted">
+                  <span className="flex items-center gap-1.5">
+                    <Users className="w-3 h-3 text-arena-glow" />
+                    <span className="tabular-nums text-arena-text font-medium">
+                      {participants.length}
+                    </span>
+                    <span className="hidden sm:inline">
+                      participant{participants.length !== 1 ? "s" : ""}
+                    </span>
+                  </span>
+                  <span className="text-arena-border-strong">·</span>
+                  <span className="flex items-center gap-1.5">
+                    <Layers className="w-3 h-3 text-arena-glow" />
+                    <span className="text-arena-text font-medium">
+                      {options.engine === "blind-jury"
+                        ? "Blind Jury"
+                        : options.engine === "adversarial"
+                          ? `Red Team · ${options.rounds} round${options.rounds !== 1 ? "s" : ""}`
+                          : `${options.rounds} round${options.rounds !== 1 ? "s" : ""}`}
+                    </span>
+                  </span>
+                </div>
                 {isRunning ? (
                   <button
                     onClick={handleCancel}
-                    className="flex items-center gap-2 bg-arena-danger/10 border border-arena-danger/25 text-arena-danger rounded-lg px-4 py-2 text-[13px] font-medium hover:bg-arena-danger/20 active:scale-[0.98] transition-all"
+                    className="flex items-center gap-2 bg-arena-danger/15 border border-arena-danger/40 text-arena-danger rounded-xl px-4 sm:px-5 py-2.5 text-[12.5px] sm:text-[13px] font-semibold hover:bg-arena-danger/25 active:scale-[0.98] transition-colors"
                   >
                     <Square className="w-3.5 h-3.5 fill-current" />
                     {sweepActive ? "Cancel Sweep" : "Cancel"}
@@ -459,7 +647,7 @@ export default function HomePage() {
                       onClick={handleRunSweep}
                       disabled={!canRun}
                       title="Run the same prompt through CVP, Blind Jury, and Adversarial Red Team in sequence"
-                      className="flex items-center gap-1.5 bg-arena-bg border border-arena-border text-arena-text rounded-lg px-3 py-2 text-[12px] font-medium hover:border-arena-accent/40 hover:text-arena-accent disabled:opacity-30 disabled:cursor-not-allowed transition-all"
+                      className="btn-ghost flex items-center gap-1.5 px-3 sm:px-4 py-2.5 text-[12px] sm:text-[12.5px] font-semibold disabled:opacity-30 disabled:cursor-not-allowed"
                     >
                       <Layers className="w-3.5 h-3.5" />
                       Sweep
@@ -467,9 +655,9 @@ export default function HomePage() {
                     <button
                       onClick={handleRunConsensus}
                       disabled={!canRun}
-                      className="flex items-center gap-2 bg-arena-accent text-white rounded-lg px-5 py-2 text-[13px] font-medium hover:bg-blue-500 disabled:opacity-30 disabled:cursor-not-allowed shadow-sm shadow-arena-accent/20 transition-all"
+                      className="btn-orange flex items-center gap-2 px-5 sm:px-6 py-2.5 text-[13px] sm:text-[13.5px] shine"
                     >
-                      <Play className="w-4 h-4" />
+                      <Play className="w-4 h-4 fill-current" />
                       Run Consensus
                     </button>
                   </div>
@@ -478,10 +666,8 @@ export default function HomePage() {
             </div>
           </div>
 
-          <div className="flex-1 xl:pr-[330px]">
-            <ResultPanel />
-            <SweepResultsPanel />
-          </div>
+          <ResultPanel />
+          <SweepResultsPanel />
         </main>
       </div>
 
@@ -492,6 +678,39 @@ export default function HomePage() {
 }
 
 // ── SSE Event Processor ────────────────────────────────────
+// Tokens can arrive much faster than the screen can paint (often
+// 100+/sec). We coalesce them per-participant in a buffer and
+// flush once per animation frame so React/paint work is capped
+// at ~60Hz instead of running on every chunk.
+
+type TokenBuffer = Map<string, { round: number; text: string }>;
+const tokenBuffer: TokenBuffer = new Map();
+let judgeTokenBuffer = "";
+let rafScheduled = false;
+
+function scheduleFlush() {
+  if (rafScheduled) return;
+  rafScheduled = true;
+  requestAnimationFrame(flushTokens);
+}
+
+function flushTokens() {
+  rafScheduled = false;
+  const s = useArenaStore.getState();
+  if (!s.isRunning) {
+    tokenBuffer.clear();
+    judgeTokenBuffer = "";
+    return;
+  }
+  for (const [participantId, { round, text }] of tokenBuffer) {
+    if (text) s.appendToken(participantId, round, text);
+  }
+  tokenBuffer.clear();
+  if (judgeTokenBuffer) {
+    s.appendJudgeToken(judgeTokenBuffer);
+    judgeTokenBuffer = "";
+  }
+}
 
 function processEvent(event: ConsensusEvent) {
   const s = useArenaStore.getState();
@@ -499,15 +718,25 @@ function processEvent(event: ConsensusEvent) {
 
   switch (event.type) {
     case "round-start":
+      // Drain anything pending before a round transition to avoid
+      // late tokens from the previous round arriving in the new one.
+      flushTokens();
       s.startRound(event.round, event.roundType, event.label);
       break;
     case "participant-start":
       s.appendToken(event.participantId, event.round, "");
       break;
-    case "token":
-      s.appendToken(event.participantId, event.round, event.token);
+    case "token": {
+      const existing = tokenBuffer.get(event.participantId);
+      if (existing) existing.text += event.token;
+      else tokenBuffer.set(event.participantId, { round: event.round, text: event.token });
+      scheduleFlush();
       break;
+    }
     case "participant-end":
+      // Flush any buffered tokens for this participant before recording
+      // the final result so the UI doesn't drop trailing characters.
+      flushTokens();
       s.completeParticipantRound(
         event.participantId,
         event.round,
@@ -526,6 +755,7 @@ function processEvent(event: ConsensusEvent) {
       }
       break;
     case "round-end":
+      flushTokens();
       s.endRound(event.round, event.consensusScore);
       break;
     case "disagreements":
@@ -535,12 +765,15 @@ function processEvent(event: ConsensusEvent) {
       s.setEarlyStopped({ round: event.round, delta: event.delta, reason: event.reason });
       break;
     case "judge-start":
+      flushTokens();
       s.startJudge(event.modelId, event.providerName);
       break;
     case "judge-token":
-      s.appendJudgeToken(event.token);
+      judgeTokenBuffer += event.token;
+      scheduleFlush();
       break;
     case "judge-end":
+      flushTokens();
       s.completeJudge(event.result);
       break;
     case "claims-start":
@@ -553,10 +786,13 @@ function processEvent(event: ConsensusEvent) {
       }
       break;
     case "consensus-complete":
+      flushTokens();
       s.completeConsensus(event.finalScore, event.summary, event.roundsCompleted);
       toast.success(`Consensus complete! Score: ${event.finalScore}%`);
       break;
     case "error":
+      tokenBuffer.clear();
+      judgeTokenBuffer = "";
       toast.error(event.message);
       s.completeConsensus(0, event.message, 0);
       break;
diff --git a/components/AISelector.tsx b/components/AISelector.tsx
index cd50208..bf79e3a 100644
--- a/components/AISelector.tsx
+++ b/components/AISelector.tsx
@@ -120,8 +120,8 @@ export default function AISelector() {
   if (modelsLoading) {
     return (
       <div className="flex items-center gap-2 text-arena-muted text-[12px] py-6">
-        <Loader2 className="w-3.5 h-3.5 animate-spin" />
-        <span>Fetching providers...</span>
+        <Loader2 className="w-3.5 h-3.5 animate-spin text-arena-accent" />
+        <span>Fetching providers…</span>
       </div>
     );
   }
@@ -132,11 +132,11 @@ export default function AISelector() {
         <p className="font-medium text-arena-danger">No AI models available</p>
         <p className="text-[11px] text-arena-muted">
           Set{" "}
-          <code className="bg-arena-bg px-1.5 py-0.5 rounded text-[10px] border border-arena-border">
+          <code className="bg-black/40 px-1.5 py-0.5 rounded text-[10px] border border-white/10 text-arena-glow">
             AI_PROVIDERS
           </code>{" "}
           in{" "}
-          <code className="bg-arena-bg px-1.5 py-0.5 rounded text-[10px] border border-arena-border">
+          <code className="bg-black/40 px-1.5 py-0.5 rounded text-[10px] border border-white/10 text-arena-glow">
             .env.local
           </code>
         </p>
@@ -145,10 +145,10 @@ export default function AISelector() {
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4">
       {/* Model selector */}
-      <div className="space-y-1.5">
-        <label className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.15em] flex items-center gap-1.5">
+      <div className="space-y-2">
+        <label className="section-label">
           <Cpu className="w-2.5 h-2.5" /> Provider & Model
         </label>
         <div className="relative" ref={menuRef}>
@@ -165,25 +165,27 @@ export default function AISelector() {
               }
             }}
             disabled={isRunning}
-            className="w-full flex items-center gap-2 bg-arena-bg border border-arena-border rounded-lg px-3 py-2.5 text-[12px] text-arena-text hover:border-arena-accent/50 transition-all disabled:opacity-40 group"
+            className="glass-input w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[12.5px] text-arena-text disabled:opacity-40 group"
           >
             {selectedModel ? (
               <>
-                <Server className="w-3 h-3 text-arena-accent shrink-0" />
+                <div className="w-5 h-5 rounded-md bg-arena-accent/15 border border-arena-accent/30 flex items-center justify-center">
+                  <Server className="w-2.5 h-2.5 text-arena-accent" />
+                </div>
                 <span className="flex-1 text-left truncate">
                   <span className="text-arena-muted">{selectedModel.providerName}</span>
-                  <ChevronRight className="w-2.5 h-2.5 inline-block mx-1 text-arena-border" />
+                  <ChevronRight className="w-2.5 h-2.5 inline-block mx-1 text-arena-border-strong" />
                   <span className="font-medium">{selectedModel.modelId}</span>
                 </span>
               </>
             ) : (
               <>
-                <Bot className="w-3 h-3 text-arena-muted shrink-0 group-hover:text-arena-accent transition-colors" />
-                <span className="flex-1 text-left text-arena-muted">Select model...</span>
+                <Bot className="w-3.5 h-3.5 text-arena-muted shrink-0 group-hover:text-arena-accent transition-colors" />
+                <span className="flex-1 text-left text-arena-muted">Select a model…</span>
               </>
             )}
             <ChevronRight
-              className={`w-3.5 h-3.5 text-arena-muted transition-transform duration-200 ${menuOpen ? "rotate-90" : ""}`}
+              className={`w-3.5 h-3.5 text-arena-muted transition-transform duration-200 ${menuOpen ? "rotate-90 text-arena-accent" : ""}`}
             />
           </button>
 
@@ -199,9 +201,9 @@ export default function AISelector() {
                   minWidth: modelMenuPos.width,
                 }}
               >
-                <div className="bg-arena-surface border border-arena-border rounded-lg shadow-xl shadow-black/30 overflow-hidden min-w-[170px]">
-                  <div className="px-3 py-2 border-b border-arena-border/60">
-                    <p className="text-[8px] font-semibold text-arena-muted uppercase tracking-[0.2em]">
+                <div className="glass-strong rounded-2xl overflow-hidden min-w-[190px]">
+                  <div className="px-3.5 py-2.5 border-b border-white/[0.06]">
+                    <p className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.22em]">
                       Providers
                     </p>
                   </div>
@@ -216,16 +218,24 @@ export default function AISelector() {
                           if (group.models.length === 1) handleSelectModel(group.models[0]);
                           else setActiveProvider(pid);
                         }}
-                        className={`w-full flex items-center gap-2 px-3 py-2.5 text-[12px] transition-all ${isActive ? "bg-arena-accent/10 text-arena-accent" : "text-arena-text hover:bg-arena-accent/5"}`}
+                        className={`w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[12px] transition-all ${
+                          isActive
+                            ? "bg-arena-accent/12 text-arena-glow"
+                            : "text-arena-text hover:bg-white/[0.03]"
+                        }`}
                       >
                         <div
-                          className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold transition-colors ${isActive ? "bg-arena-accent/20 text-arena-accent" : "bg-arena-bg text-arena-muted"}`}
+                          className={`w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold transition-colors ${
+                            isActive
+                              ? "bg-gradient-to-br from-[#ff8a3a] to-[#e25400] text-white shadow-glow-orange-sm"
+                              : "bg-black/35 text-arena-muted border border-white/[0.06]"
+                          }`}
                         >
                           {group.name.charAt(0).toUpperCase()}
                         </div>
                         <div className="flex-1 text-left">
-                          <p className="font-medium text-[11px]">{group.name}</p>
-                          <p className="text-[9px] text-arena-muted">
+                          <p className="font-medium text-[11.5px]">{group.name}</p>
+                          <p className="text-[9.5px] text-arena-muted">
                             {group.models.length} model{group.models.length !== 1 ? "s" : ""}
                           </p>
                         </div>
@@ -252,8 +262,8 @@ export default function AISelector() {
       </div>
 
       {/* Persona selector */}
-      <div className="space-y-1.5">
-        <label className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.15em] flex items-center gap-1.5">
+      <div className="space-y-2">
+        <label className="section-label">
           <Sparkles className="w-2.5 h-2.5" /> Persona
         </label>
         <div className="relative" ref={personaMenuRef}>
@@ -269,20 +279,21 @@ export default function AISelector() {
               }
             }}
             disabled={isRunning}
-            className="w-full flex items-center gap-2 bg-arena-bg border border-arena-border rounded-lg px-3 py-2.5 text-[12px] text-arena-text hover:border-arena-accent/50 transition-all disabled:opacity-40"
+            className="glass-input w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[12.5px] text-arena-text disabled:opacity-40"
           >
             <span
-              className="w-5 h-5 rounded flex items-center justify-center text-[9px] font-bold shrink-0"
+              className="w-6 h-6 rounded-md flex items-center justify-center text-[11px] font-bold shrink-0"
               style={{
-                backgroundColor: `${selectedPersona.color}20`,
+                backgroundColor: `${selectedPersona.color}25`,
                 color: selectedPersona.color,
+                boxShadow: `0 0 12px ${selectedPersona.color}30`,
               }}
             >
               {selectedPersona.emoji}
             </span>
-            <span className="flex-1 text-left text-[11px] font-medium">{selectedPersona.name}</span>
+            <span className="flex-1 text-left text-[12px] font-medium">{selectedPersona.name}</span>
             <ChevronRight
-              className={`w-3.5 h-3.5 text-arena-muted transition-transform duration-200 ${personaMenuOpen ? "rotate-90" : ""}`}
+              className={`w-3.5 h-3.5 text-arena-muted transition-transform duration-200 ${personaMenuOpen ? "rotate-90 text-arena-accent" : ""}`}
             />
           </button>
 
@@ -291,15 +302,15 @@ export default function AISelector() {
             createPortal(
               <div
                 ref={personaMenuRef}
-                className="fixed z-[9999] bg-arena-surface border border-arena-border rounded-lg shadow-xl shadow-black/30 max-h-[300px] overflow-auto"
+                className="fixed z-[9999] glass-strong rounded-2xl max-h-[320px] overflow-auto"
                 style={{
                   top: personaMenuPos.top,
                   left: personaMenuPos.left,
                   width: personaMenuPos.width,
                 }}
               >
-                <div className="px-3 py-2 border-b border-arena-border/60">
-                  <p className="text-[8px] font-semibold text-arena-muted uppercase tracking-[0.2em]">
+                <div className="px-3.5 py-2.5 border-b border-white/[0.06]">
+                  <p className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.22em]">
                     Choose Persona
                   </p>
                 </div>
@@ -331,29 +342,36 @@ export default function AISelector() {
                         setSelectedPersona(p);
                         setPersonaMenuOpen(false);
                       }}
-                      className={`w-full flex items-start gap-2.5 px-3 py-2.5 transition-all ${isSel ? "bg-arena-accent/5" : "hover:bg-arena-accent/5"}`}
+                      className={`w-full flex items-start gap-2.5 px-3.5 py-2.5 transition-all ${isSel ? "bg-white/[0.04]" : "hover:bg-white/[0.03]"}`}
                     >
                       <span
-                        className="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5"
-                        style={{ backgroundColor: `${p.color}20`, color: p.color }}
+                        className="w-7 h-7 rounded-md flex items-center justify-center text-[11px] font-bold shrink-0 mt-0.5"
+                        style={{
+                          backgroundColor: `${p.color}25`,
+                          color: p.color,
+                          boxShadow: isSel ? `0 0 14px ${p.color}45` : undefined,
+                        }}
                       >
                         {p.emoji}
                       </span>
                       <div className="flex-1 text-left min-w-0">
                         <p
-                          className="text-[11px] font-medium text-arena-text"
+                          className="text-[11.5px] font-medium text-arena-text"
                           style={{ color: isSel ? p.color : undefined }}
                         >
                           {p.name}
                         </p>
-                        <p className="text-[9px] text-arena-muted mt-0.5 line-clamp-1">
+                        <p className="text-[9.5px] text-arena-muted mt-0.5 line-clamp-1">
                           {p.description}
                         </p>
                       </div>
                       {isSel && (
                         <div
                           className="w-1.5 h-1.5 rounded-full mt-2 shrink-0"
-                          style={{ backgroundColor: p.color }}
+                          style={{
+                            backgroundColor: p.color,
+                            boxShadow: `0 0 8px ${p.color}`,
+                          }}
                         />
                       )}
                     </button>
@@ -378,18 +396,22 @@ export default function AISelector() {
       <button
         onClick={handleAdd}
         disabled={!selectedModel || isRunning}
-        className="w-full flex items-center justify-center gap-2 bg-arena-accent/10 border border-arena-accent/25 text-arena-accent rounded-lg px-3 py-2.5 text-[12px] font-medium hover:bg-arena-accent/15 hover:border-arena-accent/40 active:scale-[0.98] transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+        className="w-full flex items-center justify-center gap-2 bg-arena-accent/12 border border-arena-accent/40 text-arena-glow rounded-xl px-3 py-2.5 text-[12.5px] font-semibold hover:bg-arena-accent/20 hover:border-arena-accent/60 hover:shadow-glow-orange-sm active:scale-[0.98] transition-colors disabled:opacity-30 disabled:cursor-not-allowed disabled:shadow-none"
       >
-        <Plus className="w-3.5 h-3.5" /> Add to Arena
+        <Plus className="w-3.5 h-3.5" /> Seat at the Table
       </button>
 
       {/* Participants */}
       {participants.length > 0 && (
-        <div className="space-y-2 pt-4 border-t border-arena-border/50">
-          <h4 className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.15em]">
-            Participants ({participants.length})
-          </h4>
-          <div className="space-y-1.5">
+        <div className="space-y-2.5 pt-4">
+          <div className="glass-divider" />
+          <div className="flex items-center justify-between">
+            <h4 className="section-label">Participants</h4>
+            <span className="text-[10px] text-arena-glow font-mono tabular-nums px-2 py-0.5 rounded-md bg-arena-accent/12 border border-arena-accent/30">
+              {participants.length}
+            </span>
+          </div>
+          <div className="space-y-2">
             {participants.map((p) => (
               <ParticipantCard
                 key={p.id}
@@ -424,9 +446,9 @@ function ModelList({
   const others = models.filter((m) => !m.preferred);
 
   return (
-    <div className="bg-arena-surface border border-arena-border rounded-lg shadow-xl shadow-black/30 overflow-hidden min-w-[210px] max-h-[320px] overflow-y-auto ml-1">
-      <div className="px-3 py-2 border-b border-arena-border/60">
-        <p className="text-[8px] font-semibold text-arena-muted uppercase tracking-[0.2em]">
+    <div className="glass-strong rounded-2xl overflow-hidden min-w-[220px] max-h-[320px] overflow-y-auto ml-2">
+      <div className="px-3.5 py-2.5 border-b border-white/[0.06]">
+        <p className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.22em]">
           {providerName}
         </p>
       </div>
@@ -436,16 +458,20 @@ function ModelList({
           <button
             key={m.id}
             onClick={() => onSelect(m)}
-            className={`w-full flex items-center gap-2 px-3 py-2 text-[12px] transition-all ${isSel ? "bg-arena-accent/10 text-arena-accent" : "text-arena-text hover:bg-arena-accent/5"}`}
+            className={`w-full flex items-center gap-2 px-3.5 py-2 text-[12px] transition-all ${
+              isSel ? "bg-arena-accent/12 text-arena-glow" : "text-arena-text hover:bg-white/[0.03]"
+            }`}
           >
-            <Star className="w-3 h-3 shrink-0 text-arena-warning fill-arena-warning" />
-            <span className="flex-1 text-left font-medium text-[11px] truncate">{m.modelId}</span>
-            {isSel && <div className="w-1.5 h-1.5 rounded-full bg-arena-accent" />}
+            <Star className="w-3 h-3 shrink-0 text-arena-accent fill-arena-accent drop-shadow-[0_0_4px_rgba(255,98,0,0.6)]" />
+            <span className="flex-1 text-left font-medium text-[11.5px] truncate">{m.modelId}</span>
+            {isSel && (
+              <div className="w-1.5 h-1.5 rounded-full bg-arena-accent shadow-glow-orange-sm" />
+            )}
           </button>
         );
       })}
       {preferred.length > 0 && others.length > 0 && (
-        <div className="border-t border-arena-border/30 mx-2 my-0.5" />
+        <div className="border-t border-white/[0.05] mx-2 my-1" />
       )}
       {others.map((m) => {
         const isSel = selectedModelId === m.id;
@@ -453,13 +479,19 @@ function ModelList({
           <button
             key={m.id}
             onClick={() => onSelect(m)}
-            className={`w-full flex items-center gap-2 px-3 py-2 text-[12px] transition-all ${isSel ? "bg-arena-accent/10 text-arena-accent" : "text-arena-text/70 hover:bg-arena-accent/5"}`}
+            className={`w-full flex items-center gap-2 px-3.5 py-2 text-[12px] transition-all ${
+              isSel
+                ? "bg-arena-accent/12 text-arena-glow"
+                : "text-arena-text/75 hover:bg-white/[0.03]"
+            }`}
           >
             <Sparkles
-              className={`w-3 h-3 shrink-0 ${isSel ? "text-arena-accent" : "text-arena-muted/40"}`}
+              className={`w-3 h-3 shrink-0 ${isSel ? "text-arena-accent" : "text-arena-muted/45"}`}
             />
-            <span className="flex-1 text-left text-[11px] truncate">{m.modelId}</span>
-            {isSel && <div className="w-1.5 h-1.5 rounded-full bg-arena-accent" />}
+            <span className="flex-1 text-left text-[11.5px] truncate">{m.modelId}</span>
+            {isSel && (
+              <div className="w-1.5 h-1.5 rounded-full bg-arena-accent shadow-glow-orange-sm" />
+            )}
           </button>
         );
       })}
@@ -482,7 +514,6 @@ function ParticipantCard({
   onModelChange: (m: ModelInfo) => void;
   disabled: boolean;
 }) {
-  // Sibling models from the same provider, preferred first
   const siblingModels = useMemo(() => {
     const siblings = availableModels.filter(
       (m) => m.providerId === participant.modelInfo.providerId,
@@ -492,22 +523,35 @@ function ParticipantCard({
 
   return (
     <div
-      className="flex items-center gap-2 bg-arena-bg border border-arena-border/60 rounded-lg px-2.5 py-2 group hover:border-arena-border transition-colors"
-      style={{ borderLeftColor: participant.persona.color, borderLeftWidth: 3 }}
+      className="relative flex items-center gap-2.5 rounded-xl px-3 py-2.5 group transition-all overflow-hidden"
+      style={{
+        background: "linear-gradient(135deg, rgba(8, 22, 52, 0.55), rgba(4, 12, 30, 0.55))",
+        border: `1px solid rgba(77, 122, 199, 0.18)`,
+        boxShadow: `inset 3px 0 0 0 ${participant.persona.color}`,
+        backdropFilter: "blur(12px)",
+      }}
     >
+      {/* faint persona-color glow on the left */}
+      <div
+        className="absolute inset-y-0 left-0 w-12 pointer-events-none opacity-40"
+        style={{
+          background: `linear-gradient(90deg, ${participant.persona.color}28, transparent)`,
+        }}
+      />
       <span
-        className="w-4 h-4 rounded flex items-center justify-center text-[8px] font-bold shrink-0"
+        className="relative w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-bold shrink-0"
         style={{
-          backgroundColor: `${participant.persona.color}20`,
+          backgroundColor: `${participant.persona.color}28`,
           color: participant.persona.color,
+          boxShadow: `0 0 14px ${participant.persona.color}30`,
         }}
       >
         {participant.persona.emoji}
       </span>
-      <div className="flex-1 min-w-0">
-        {/* Model selector — shows provider prefix, swappable within provider */}
-        <div className="flex items-center gap-0.5 text-[11px]">
-          <span className="text-arena-muted shrink-0">{participant.modelInfo.providerName} /</span>
+      <div className="flex-1 min-w-0 relative">
+        <div className="flex items-center gap-1 text-[11.5px]">
+          <span className="text-arena-muted shrink-0">{participant.modelInfo.providerName}</span>
+          <span className="text-arena-border-strong">/</span>
           {siblingModels.length > 1 ? (
             <select
               value={participant.modelInfo.id}
@@ -516,11 +560,11 @@ function ParticipantCard({
                 if (m) onModelChange(m);
               }}
               disabled={disabled}
-              className="bg-transparent text-arena-text font-medium border-none p-0 focus:outline-none disabled:opacity-40 cursor-pointer truncate text-[11px]"
+              className="bg-transparent text-arena-text font-medium border-none p-0 focus:outline-none disabled:opacity-40 cursor-pointer truncate text-[11.5px]"
             >
               {siblingModels.map((m) => (
-                <option key={m.id} value={m.id}>
-                  {m.preferred ? "\u2605 " : ""}
+                <option key={m.id} value={m.id} className="bg-[#06112A]">
+                  {m.preferred ? "★ " : ""}
                   {m.modelId}
                 </option>
               ))}
@@ -531,7 +575,6 @@ function ParticipantCard({
             </span>
           )}
         </div>
-        {/* Persona selector */}
         <select
           value={participant.persona.id}
           onChange={(e) => {
@@ -539,10 +582,10 @@ function ParticipantCard({
             if (p) onPersonaChange(p);
           }}
           disabled={disabled}
-          className="text-[9px] bg-transparent text-arena-muted border-none p-0 focus:outline-none disabled:opacity-40 cursor-pointer"
+          className="text-[9.5px] bg-transparent text-arena-muted border-none p-0 focus:outline-none disabled:opacity-40 cursor-pointer mt-0.5"
         >
           {PERSONAS.map((p) => (
-            <option key={p.id} value={p.id}>
+            <option key={p.id} value={p.id} className="bg-[#06112A]">
               {p.emoji} {p.name}
             </option>
           ))}
@@ -551,7 +594,7 @@ function ParticipantCard({
       <button
         onClick={onRemove}
         disabled={disabled}
-        className="p-0.5 text-arena-muted/40 hover:text-arena-danger opacity-0 group-hover:opacity-100 transition-all disabled:opacity-0"
+        className="relative p-1 rounded-md text-arena-muted/40 hover:text-arena-danger hover:bg-arena-danger/10 opacity-0 group-hover:opacity-100 transition-all disabled:opacity-0"
       >
         <X className="w-3 h-3" />
       </button>
diff --git a/components/BackToTop.tsx b/components/BackToTop.tsx
index a958d01..d024ab0 100644
--- a/components/BackToTop.tsx
+++ b/components/BackToTop.tsx
@@ -1,11 +1,8 @@
 "use client";
 
 // ─────────────────────────────────────────────────────────────
-// Back to Top — Floating notch-style pill (MacBook camera style)
+// Back to Top — Floating notch-style pill
 // ─────────────────────────────────────────────────────────────
-// Appears at bottom-center when consensus is complete or when
-// user has scrolled down significantly. Styled like the MacBook
-// display notch with the camera dot.
 
 import { useArenaStore } from "@/lib/store";
 import { useEffect, useState, useCallback } from "react";
@@ -16,7 +13,6 @@ export default function BackToTop() {
   const rounds = useArenaStore((s) => s.rounds);
   const [visible, setVisible] = useState(false);
 
-  // Show when scrolled down past threshold
   useEffect(() => {
     const onScroll = () => {
       setVisible(window.scrollY > 600);
@@ -29,7 +25,6 @@ export default function BackToTop() {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }, []);
 
-  // Only show if there are results and user has scrolled
   if (rounds.length === 0 || !visible) return null;
 
   const isComplete = finalScore !== null;
@@ -39,54 +34,50 @@ export default function BackToTop() {
       <button
         onClick={scrollToTop}
         className={`
-          group relative flex items-center gap-2 px-5 py-2.5
-          rounded-full border backdrop-blur-lg
-          shadow-xl transition-all duration-300
-          hover:scale-105 active:scale-95
+          group relative flex items-center gap-2.5 px-5 py-2.5
+          rounded-full backdrop-blur-2xl border
+          transition-all duration-300
+          hover:scale-[1.04] active:scale-95
           ${
             isComplete
-              ? "bg-arena-surface/95 border-arena-accent/30 shadow-arena-accent/10"
-              : "bg-arena-surface/90 border-arena-border shadow-black/20"
+              ? "bg-[#02070F]/85 border-arena-accent/45 shadow-glow-orange"
+              : "bg-[#02070F]/80 border-white/[0.08] shadow-glass"
           }
         `}
       >
         {/* Notch camera dot */}
         <div
           className={`w-2 h-2 rounded-full transition-colors ${
-            isComplete
-              ? "bg-arena-success shadow-[0_0_6px_rgba(16,185,129,0.5)]"
-              : "bg-arena-muted/40"
+            isComplete ? "bg-arena-accent shadow-[0_0_8px_rgba(255,98,0,0.7)]" : "bg-arena-muted/40"
           }`}
         />
 
-        {/* Divider line */}
-        <div className="w-px h-3.5 bg-arena-border" />
+        <div className="w-px h-3.5 bg-white/[0.1]" />
 
-        {/* Arrow + label */}
         <ChevronUp
           className={`w-3.5 h-3.5 transition-all group-hover:-translate-y-0.5 ${
-            isComplete ? "text-arena-accent" : "text-arena-muted"
+            isComplete ? "text-arena-glow" : "text-arena-muted"
           }`}
         />
         <span
-          className={`text-xs font-medium tracking-wide ${
+          className={`text-[11.5px] font-medium tracking-wide ${
             isComplete ? "text-arena-text" : "text-arena-muted"
           }`}
         >
           Back to top
         </span>
 
-        {/* Consensus score badge (when complete) */}
         {isComplete && (
           <>
-            <div className="w-px h-3.5 bg-arena-border" />
-            <span className="text-[10px] font-mono font-bold text-arena-accent">{finalScore}%</span>
+            <div className="w-px h-3.5 bg-white/[0.1]" />
+            <span className="text-[10.5px] font-mono font-bold bg-gradient-to-r from-[#ffd0a8] to-[#ff6200] bg-clip-text text-transparent">
+              {finalScore}%
+            </span>
           </>
         )}
 
-        {/* Subtle glow behind when complete */}
         {isComplete && (
-          <div className="absolute inset-0 rounded-full bg-arena-accent/5 -z-10 blur-sm" />
+          <div className="absolute inset-0 rounded-full bg-arena-accent/10 -z-10 blur-md" />
         )}
       </button>
     </div>
diff --git a/components/ConfidenceTrajectory.tsx b/components/ConfidenceTrajectory.tsx
index ec18fc8..824e6ce 100644
--- a/components/ConfidenceTrajectory.tsx
+++ b/components/ConfidenceTrajectory.tsx
@@ -3,18 +3,16 @@
 // ─────────────────────────────────────────────────────────────
 // Confidence Trajectory — SVG sparkline per participant
 // ─────────────────────────────────────────────────────────────
-// Reads rounds + participants from the store, then draws a single
-// miniature chart with one line per participant. Hovering a line
-// highlights its current value. No chart library — plain SVG.
 
 import { useArenaStore } from "@/lib/store";
 import { useMemo } from "react";
+import { TrajectoryArt } from "./HeroArt";
 import { TrendingUp } from "lucide-react";
 
 const WIDTH = 280;
-const HEIGHT = 90;
-const PADDING_X = 18;
-const PADDING_Y = 10;
+const HEIGHT = 100;
+const PADDING_X = 22;
+const PADDING_Y = 12;
 
 export default function ConfidenceTrajectory() {
   const rounds = useArenaStore((s) => s.rounds);
@@ -42,102 +40,129 @@ export default function ConfidenceTrajectory() {
   const yFor = (v: number) => PADDING_Y + (1 - v / 100) * (HEIGHT - PADDING_Y * 2);
 
   return (
-    <div className="rounded-xl border border-arena-border/60 bg-arena-surface/60 p-4 space-y-3">
-      <div className="flex items-center gap-2">
-        <TrendingUp className="w-3.5 h-3.5 text-arena-accent" />
-        <h4 className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.15em]">
-          Confidence Trajectory
-        </h4>
-      </div>
-      <svg
-        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-        className="w-full h-auto"
-        role="img"
-        aria-label="Confidence trajectory chart"
-      >
-        {/* Axis — 50% and 100% reference lines */}
-        <line
-          x1={PADDING_X}
-          x2={WIDTH - PADDING_X}
-          y1={yFor(50)}
-          y2={yFor(50)}
-          stroke="#334155"
-          strokeWidth={0.5}
-          strokeDasharray="2 3"
-        />
-        <text x={2} y={yFor(50) + 3} fill="#64748b" fontSize={8} fontFamily="monospace">
-          50
-        </text>
-        <text x={2} y={yFor(100) + 3} fill="#64748b" fontSize={8} fontFamily="monospace">
-          100
-        </text>
-        <text x={2} y={yFor(0) + 3} fill="#64748b" fontSize={8} fontFamily="monospace">
-          0
-        </text>
-
-        {/* Round x-axis ticks */}
-        {rounds.map((r, i) => (
-          <text
-            key={`tick-${r.number}`}
-            x={xFor(i)}
-            y={HEIGHT - 1}
-            fill="#64748b"
-            fontSize={7}
-            fontFamily="monospace"
-            textAnchor="middle"
+    <div className="glass overflow-hidden">
+      <TrajectoryArt className="h-[100px]" />
+      <div className="p-5 space-y-3">
+        <p className="section-label">
+          <TrendingUp className="w-2.5 h-2.5" /> Confidence Trajectory
+        </p>
+        <div className="rounded-xl bg-black/35 p-3 border border-white/[0.05]">
+          <svg
+            viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+            className="w-full h-auto"
+            role="img"
+            aria-label="Confidence trajectory chart"
           >
-            R{r.number}
-          </text>
-        ))}
+            <defs>
+              <filter id="ct-line-glow">
+                <feGaussianBlur stdDeviation="1.5" />
+              </filter>
+            </defs>
+            <line
+              x1={PADDING_X}
+              x2={WIDTH - PADDING_X}
+              y1={yFor(50)}
+              y2={yFor(50)}
+              stroke="rgba(77, 122, 199, 0.35)"
+              strokeWidth={0.5}
+              strokeDasharray="2 3"
+            />
+            <text x={2} y={yFor(50) + 3} fill="#8B9CB8" fontSize={8} fontFamily="JetBrains Mono">
+              50
+            </text>
+            <text x={2} y={yFor(100) + 3} fill="#8B9CB8" fontSize={8} fontFamily="JetBrains Mono">
+              100
+            </text>
+            <text x={2} y={yFor(0) + 3} fill="#8B9CB8" fontSize={8} fontFamily="JetBrains Mono">
+              0
+            </text>
+
+            {rounds.map((r, i) => (
+              <text
+                key={`tick-${r.number}`}
+                x={xFor(i)}
+                y={HEIGHT - 1}
+                fill="#8B9CB8"
+                fontSize={7}
+                fontFamily="JetBrains Mono"
+                textAnchor="middle"
+              >
+                R{r.number}
+              </text>
+            ))}
 
-        {/* One polyline per participant */}
-        {series.map(({ participant, points }) => {
-          if (points.length === 0) return null;
-          const path = points
-            .map((p, i) => `${i === 0 ? "M" : "L"} ${xFor(i).toFixed(1)} ${yFor(p).toFixed(1)}`)
-            .join(" ");
-          return (
-            <g key={participant.id}>
-              <path
-                d={path}
-                stroke={participant.persona.color}
-                strokeWidth={1.6}
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              {points.map((p, i) => (
-                <circle key={i} cx={xFor(i)} cy={yFor(p)} r={2} fill={participant.persona.color}>
-                  <title>
-                    {participant.persona.name} — Round {i + 1}: {p}%
-                  </title>
-                </circle>
-              ))}
-            </g>
-          );
-        })}
-      </svg>
-      <div className="flex flex-wrap gap-1.5">
-        {series.map(({ participant, points }) => {
-          const last = points[points.length - 1];
-          return (
-            <div
-              key={participant.id}
-              className="flex items-center gap-1 text-[9px] font-medium px-1.5 py-0.5 rounded-md"
-              style={{
-                backgroundColor: `${participant.persona.color}15`,
-                color: participant.persona.color,
-              }}
-            >
+            {series.map(({ participant, points }) => {
+              if (points.length === 0) return null;
+              const path = points
+                .map((p, i) => `${i === 0 ? "M" : "L"} ${xFor(i).toFixed(1)} ${yFor(p).toFixed(1)}`)
+                .join(" ");
+              return (
+                <g key={participant.id}>
+                  <path
+                    d={path}
+                    stroke={participant.persona.color}
+                    strokeWidth={2.4}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    opacity="0.55"
+                    filter="url(#ct-line-glow)"
+                  />
+                  <path
+                    d={path}
+                    stroke={participant.persona.color}
+                    strokeWidth={1.6}
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  {points.map((p, i) => (
+                    <g key={i}>
+                      <circle
+                        cx={xFor(i)}
+                        cy={yFor(p)}
+                        r={4}
+                        fill={participant.persona.color}
+                        opacity="0.25"
+                      />
+                      <circle cx={xFor(i)} cy={yFor(p)} r={2.2} fill={participant.persona.color}>
+                        <title>
+                          {participant.persona.name} — Round {i + 1}: {p}%
+                        </title>
+                      </circle>
+                    </g>
+                  ))}
+                </g>
+              );
+            })}
+          </svg>
+        </div>
+        <div className="flex flex-wrap gap-1.5">
+          {series.map(({ participant, points }) => {
+            const last = points[points.length - 1];
+            return (
               <div
-                className="w-1.5 h-1.5 rounded-full"
-                style={{ backgroundColor: participant.persona.color }}
-              />
-              <span className="truncate max-w-[80px]">{participant.persona.name}</span>
-              {last !== undefined && <span className="font-mono tabular-nums">{last}%</span>}
-            </div>
-          );
-        })}
+                key={participant.id}
+                className="flex items-center gap-1.5 text-[9.5px] font-medium px-2 py-1 rounded-lg"
+                style={{
+                  backgroundColor: `${participant.persona.color}18`,
+                  color: participant.persona.color,
+                  border: `1px solid ${participant.persona.color}30`,
+                }}
+              >
+                <div
+                  className="w-1.5 h-1.5 rounded-full"
+                  style={{
+                    backgroundColor: participant.persona.color,
+                    boxShadow: `0 0 6px ${participant.persona.color}`,
+                  }}
+                />
+                <span className="truncate max-w-[80px]">{participant.persona.name}</span>
+                {last !== undefined && <span className="font-mono tabular-nums">{last}%</span>}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );
diff --git a/components/ConfigPanel.tsx b/components/ConfigPanel.tsx
index 891684c..2051c0c 100644
--- a/components/ConfigPanel.tsx
+++ b/components/ConfigPanel.tsx
@@ -3,10 +3,6 @@
 // ─────────────────────────────────────────────────────────────
 // Config Panel — Engine selector, toggles, judge model
 // ─────────────────────────────────────────────────────────────
-// Lives in the sidebar, below the participant section. Controls
-// the engine (CVP / Blind Jury), the CVP toggles (randomize
-// order, blind first round, early stop), and the judge (enable
-// + model picker).
 
 import { useArenaStore } from "@/lib/store";
 import { ChevronDown, Dices, Eye, ZapOff, Gavel, Sliders, GitMerge, Coins } from "lucide-react";
@@ -32,37 +28,31 @@ function Toggle({
       type="button"
       onClick={() => onChange(!checked)}
       disabled={disabled}
-      className={`w-full flex items-start gap-2.5 px-3 py-2 rounded-lg border transition-all text-left disabled:opacity-40 disabled:cursor-not-allowed ${
+      className={`w-full flex items-start gap-3 px-3.5 py-3 rounded-xl transition-colors text-left disabled:opacity-40 disabled:cursor-not-allowed border ${
         checked
-          ? "bg-arena-accent/10 border-arena-accent/30"
-          : "bg-arena-bg border-arena-border/60 hover:border-arena-border"
+          ? "bg-arena-accent/10 border-arena-accent/45 shadow-[0_0_14px_-6px_rgba(255,98,0,0.4)]"
+          : "bg-black/35 border-white/[0.06] hover:border-arena-blue/40"
       }`}
     >
       <div
-        className={`w-5 h-5 rounded flex items-center justify-center mt-0.5 ${
-          checked ? "text-arena-accent" : "text-arena-muted"
+        className={`w-7 h-7 rounded-lg flex items-center justify-center mt-0.5 shrink-0 transition-all ${
+          checked
+            ? "bg-gradient-to-br from-[#ff8a3a] to-[#e25400] text-white shadow-glow-orange-sm"
+            : "bg-black/40 text-arena-muted border border-white/[0.08]"
         }`}
       >
         {icon}
       </div>
       <div className="flex-1 min-w-0">
         <p
-          className={`text-[11px] font-medium ${checked ? "text-arena-accent" : "text-arena-text"}`}
+          className={`text-[12px] font-semibold tracking-tight ${checked ? "text-arena-glow" : "text-arena-text"}`}
         >
           {label}
         </p>
-        <p className="text-[9px] text-arena-muted leading-relaxed mt-0.5">{description}</p>
+        <p className="text-[10px] text-arena-muted leading-relaxed mt-0.5">{description}</p>
       </div>
-      <div
-        className={`w-7 h-4 rounded-full flex items-center px-0.5 transition-colors shrink-0 mt-0.5 ${
-          checked ? "bg-arena-accent" : "bg-arena-border"
-        }`}
-      >
-        <div
-          className={`w-3 h-3 bg-white rounded-full transition-transform ${
-            checked ? "translate-x-3" : "translate-x-0"
-          }`}
-        />
+      <div className={`glass-toggle ${checked ? "on" : ""} mt-1`}>
+        <div className="knob" />
       </div>
     </button>
   );
@@ -106,10 +96,10 @@ export default function ConfigPanel() {
   };
 
   return (
-    <div className="space-y-3">
-      <div>
-        <p className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.15em] flex items-center gap-1.5 mb-2">
-          <Sliders className="w-2.5 h-2.5" /> Engine
+    <div className="space-y-4">
+      <div className="space-y-2.5">
+        <p className="section-label">
+          <Sliders className="w-2.5 h-2.5" /> AI Engine
         </p>
         <div className="grid grid-cols-3 gap-1.5">
           {(["cvp", "blind-jury", "adversarial"] as const).map((eng) => {
@@ -119,18 +109,21 @@ export default function ConfigPanel() {
                 key={eng}
                 onClick={() => setOption("engine", eng)}
                 disabled={isRunning}
-                className={`px-2 py-2 rounded-lg text-[10px] font-medium border transition-all disabled:opacity-40 ${
+                className={`relative px-2 py-2 rounded-xl text-[11px] font-semibold border transition-colors disabled:opacity-40 overflow-hidden ${
                   active
-                    ? "bg-arena-accent/10 text-arena-accent border-arena-accent/40"
-                    : "bg-arena-bg text-arena-text border-arena-border/60 hover:border-arena-border"
+                    ? "bg-gradient-to-br from-[#ff6200]/22 to-[#ff8a3a]/12 text-arena-glow border-arena-accent/55 shadow-[0_0_16px_-6px_rgba(255,98,0,0.5)]"
+                    : "bg-black/40 text-arena-text border-white/[0.07] hover:border-arena-blue/40"
                 }`}
               >
+                {active && (
+                  <span className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-arena-accent to-transparent" />
+                )}
                 {engineLabels[eng]}
               </button>
             );
           })}
         </div>
-        <p className="text-[9px] text-arena-muted mt-1.5 leading-relaxed">
+        <p className="text-[10px] text-arena-muted leading-relaxed">
           {engineDescriptions[options.engine]}
         </p>
         {isAdversarial && (
@@ -142,10 +135,10 @@ export default function ConfigPanel() {
       </div>
 
       {isCvp && (
-        <div className="space-y-1.5">
+        <div className="space-y-2">
           <Toggle
             label="Randomize order"
-            description="Shuffle the speaking order in rounds 2+."
+            description="Shuffle the speaking order in rounds 2 and beyond."
             icon={<Dices className="w-3 h-3" />}
             checked={options.randomizeOrder}
             onChange={(v) => setOption("randomizeOrder", v)}
@@ -161,7 +154,7 @@ export default function ConfigPanel() {
           />
           <Toggle
             label="Early stop"
-            description="Stop once consensus score stabilises between rounds."
+            description="Stop once consensus stabilises between rounds."
             icon={<ZapOff className="w-3 h-3" />}
             checked={options.earlyStop}
             onChange={(v) => setOption("earlyStop", v)}
@@ -170,8 +163,8 @@ export default function ConfigPanel() {
         </div>
       )}
 
-      <div className="pt-1 border-t border-arena-border/30">
-        <p className="text-[9px] font-semibold text-arena-muted uppercase tracking-[0.15em] flex items-center gap-1.5 mb-1.5">
+      <div className="pt-3 border-t border-white/[0.06]">
+        <p className="section-label mb-2">
           <Coins className="w-2.5 h-2.5" /> Cost cap
         </p>
         <div className="flex items-center gap-2">
@@ -189,15 +182,15 @@ export default function ConfigPanel() {
             }}
             placeholder="off"
             disabled={isRunning}
-            className="flex-1 bg-arena-bg border border-arena-border rounded-md px-2 py-1 text-[11px] text-arena-text placeholder:text-arena-muted/40 focus:outline-none focus:border-arena-accent/60 disabled:opacity-40 font-mono tabular-nums"
+            className="glass-input flex-1 px-2.5 py-1.5 text-[11px] text-arena-text placeholder:text-arena-muted/40 disabled:opacity-40 font-mono tabular-nums"
           />
         </div>
-        <p className="text-[9px] text-arena-muted leading-relaxed mt-1">
+        <p className="text-[10px] text-arena-muted leading-relaxed mt-1.5">
           Hard-abort the run if estimated cost crosses this cap. Leave blank to disable.
         </p>
       </div>
 
-      <div className="space-y-1.5">
+      <div className="space-y-2">
         <Toggle
           label="Claim extraction"
           description="LLM pass extracts structured semantic contradictions from final responses."
@@ -208,7 +201,7 @@ export default function ConfigPanel() {
         />
         <Toggle
           label="Judge synthesis"
-          description="Non-voting model produces majority/minority summary."
+          description="A non-voting model produces a majority/minority summary."
           icon={<Gavel className="w-3 h-3" />}
           checked={options.judgeEnabled}
           onChange={(v) => {
@@ -224,24 +217,26 @@ export default function ConfigPanel() {
             <button
               onClick={() => setJudgeOpen((v) => !v)}
               disabled={isRunning}
-              className="w-full flex items-center gap-2 bg-arena-bg border border-arena-border rounded-lg px-3 py-2 text-[11px] text-arena-text hover:border-arena-accent/50 transition-all disabled:opacity-40"
+              className="glass-input w-full flex items-center gap-2 px-3 py-2.5 text-[11.5px] text-arena-text disabled:opacity-40"
             >
-              <Gavel className="w-3 h-3 text-arena-warning shrink-0" />
+              <Gavel className="w-3 h-3 text-arena-warning shrink-0 drop-shadow-[0_0_6px_rgba(251,191,36,0.6)]" />
               <span className="flex-1 text-left truncate">
                 {judgeModel ? (
                   <>
                     <span className="text-arena-muted">{judgeModel.providerName}</span>
-                    <span className="mx-1 text-arena-border">/</span>
+                    <span className="mx-1 text-arena-border-strong">/</span>
                     <span className="font-medium">{judgeModel.modelId}</span>
                   </>
                 ) : (
-                  <span className="text-arena-muted">Select judge model...</span>
+                  <span className="text-arena-muted">Select judge model…</span>
                 )}
               </span>
-              <ChevronDown className="w-3 h-3 text-arena-muted" />
+              <ChevronDown
+                className={`w-3 h-3 text-arena-muted transition-transform ${judgeOpen ? "rotate-180 text-arena-accent" : ""}`}
+              />
             </button>
             {judgeOpen && (
-              <div className="absolute z-50 left-0 right-0 top-full mt-1 max-h-[240px] overflow-y-auto bg-arena-surface border border-arena-border rounded-lg shadow-xl shadow-black/30">
+              <div className="absolute z-50 left-0 right-0 top-full mt-1.5 max-h-[260px] overflow-y-auto glass-strong rounded-2xl">
                 {availableModels.length === 0 && (
                   <p className="px-3 py-2 text-[10px] text-arena-muted">No models available.</p>
                 )}
@@ -254,13 +249,13 @@ export default function ConfigPanel() {
                         setOption("judgeModelId", m.id);
                         setJudgeOpen(false);
                       }}
-                      className={`w-full flex items-center gap-2 px-3 py-1.5 text-[11px] transition-all ${
+                      className={`w-full flex items-center gap-2 px-3.5 py-2 text-[11.5px] transition-all ${
                         isSel
-                          ? "bg-arena-accent/10 text-arena-accent"
-                          : "text-arena-text hover:bg-arena-accent/5"
+                          ? "bg-arena-accent/12 text-arena-glow"
+                          : "text-arena-text hover:bg-white/[0.03]"
                       }`}
                     >
-                      <span className="text-arena-muted text-[9px] min-w-[56px] truncate">
+                      <span className="text-arena-muted text-[9.5px] min-w-[60px] truncate">
                         {m.providerName}
                       </span>
                       <span className="flex-1 text-left truncate">{m.modelId}</span>
diff --git a/components/CostMeter.tsx b/components/CostMeter.tsx
index 155f23a..b390422 100644
--- a/components/CostMeter.tsx
+++ b/components/CostMeter.tsx
@@ -3,11 +3,10 @@
 // ─────────────────────────────────────────────────────────────
 // Cost Meter — Live token usage & estimated cost
 // ─────────────────────────────────────────────────────────────
-// Shows running total tokens and estimated USD cost. Pricing is
-// client-side and clearly flagged as an estimate in the label.
 
 import { useArenaStore } from "@/lib/store";
-import { DollarSign } from "lucide-react";
+import { CostArt } from "./HeroArt";
+import { DollarSign, ArrowUpRight, ArrowDownLeft } from "lucide-react";
 
 function formatCost(usd: number): string {
   if (usd === 0) return "$0.00";
@@ -28,24 +27,47 @@ export default function CostMeter() {
   if (total.totalTokens === 0 && !isRunning) return null;
 
   return (
-    <div className="rounded-xl border border-arena-border/60 bg-arena-surface/60 p-4 space-y-2">
-      <div className="flex items-center gap-2">
-        <DollarSign className="w-3.5 h-3.5 text-arena-success" />
-        <h4 className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.15em]">
-          Cost (estimated)
-        </h4>
-      </div>
-      <div className="flex items-baseline justify-between">
-        <span className="text-2xl font-bold text-arena-text font-mono tabular-nums">
-          {formatCost(total.estimatedCostUSD)}
-        </span>
-        <span className="text-[11px] text-arena-muted font-mono tabular-nums">
-          {formatTokens(total.totalTokens)} tokens
-        </span>
-      </div>
-      <div className="flex items-center gap-3 text-[9px] text-arena-muted font-mono tabular-nums">
-        <span>in {formatTokens(total.inputTokens)}</span>
-        <span>out {formatTokens(total.outputTokens)}</span>
+    <div className="glass overflow-hidden">
+      <CostArt className="h-[110px]" />
+      <div className="p-5 space-y-3">
+        <div className="flex items-center justify-between">
+          <p className="section-label">
+            <DollarSign className="w-2.5 h-2.5" /> Cost · Estimated
+          </p>
+          {isRunning && (
+            <span className="flex items-center gap-1 text-[9px] text-arena-glow font-medium">
+              <span className="relative flex w-1.5 h-1.5">
+                <span className="animate-ping absolute inline-flex w-full h-full rounded-full bg-arena-accent opacity-75" />
+                <span className="relative inline-flex w-1.5 h-1.5 rounded-full bg-arena-accent" />
+              </span>
+              Live
+            </span>
+          )}
+        </div>
+        <div className="flex items-baseline justify-between gap-2">
+          <span className="text-[28px] font-bold text-arena-text font-mono tabular-nums tracking-tight bg-gradient-to-br from-[#ffd0a8] to-[#ff6200] bg-clip-text text-transparent">
+            {formatCost(total.estimatedCostUSD)}
+          </span>
+          <span className="text-[11px] text-arena-muted font-mono tabular-nums">
+            {formatTokens(total.totalTokens)} tok
+          </span>
+        </div>
+        <div className="flex items-center gap-3 pt-1.5 border-t border-white/[0.05]">
+          <div className="flex items-center gap-1.5 text-[10px]">
+            <ArrowDownLeft className="w-2.5 h-2.5 text-arena-blue" />
+            <span className="text-arena-muted">in</span>
+            <span className="font-mono tabular-nums text-arena-text/85">
+              {formatTokens(total.inputTokens)}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5 text-[10px]">
+            <ArrowUpRight className="w-2.5 h-2.5 text-arena-glow" />
+            <span className="text-arena-muted">out</span>
+            <span className="font-mono tabular-nums text-arena-text/85">
+              {formatTokens(total.outputTokens)}
+            </span>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/components/DisagreementPanel.tsx b/components/DisagreementPanel.tsx
index ec9fee0..b44bc9e 100644
--- a/components/DisagreementPanel.tsx
+++ b/components/DisagreementPanel.tsx
@@ -3,12 +3,10 @@
 // ─────────────────────────────────────────────────────────────
 // Disagreement Panel — Live disagreement ledger
 // ─────────────────────────────────────────────────────────────
-// Renders the list of disagreements detected during the run.
-// Groups by round, links each row to the round heading, and
-// shows severity as a small bar. Reads straight from the store.
 
 import { useArenaStore } from "@/lib/store";
 import { useMemo } from "react";
+import { DisagreementArt } from "./HeroArt";
 import { AlertTriangle } from "lucide-react";
 
 export default function DisagreementPanel() {
@@ -35,60 +33,69 @@ export default function DisagreementPanel() {
   };
 
   return (
-    <div className="rounded-xl border border-arena-warning/20 bg-arena-surface/60 p-4 space-y-3">
-      <div className="flex items-center gap-2">
-        <AlertTriangle className="w-3.5 h-3.5 text-arena-warning" />
-        <h4 className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.15em]">
-          Disagreement Ledger
-        </h4>
-        <span className="ml-auto text-[9px] font-mono text-arena-muted/70 tabular-nums">
-          {disagreements.length}
-        </span>
-      </div>
-      <div className="space-y-2">
-        {grouped.map(([round, items]) => (
-          <div key={round} className="space-y-1">
-            <button
-              onClick={() => scrollToRound(round)}
-              className="text-[9px] font-semibold text-arena-muted uppercase tracking-wider hover:text-arena-accent transition-colors"
-            >
-              Round {round}
-            </button>
-            {items.map((d) => {
-              const a = lookup(d.participantAId);
-              const b = lookup(d.participantBId);
-              return (
-                <button
-                  key={d.id}
-                  onClick={() => scrollToRound(round)}
-                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md bg-arena-bg/50 hover:bg-arena-accent/5 transition-colors text-left"
-                >
-                  <div className="flex items-center gap-1 shrink-0">
-                    {a && (
-                      <div
-                        className="w-1.5 h-3 rounded-sm"
-                        style={{ backgroundColor: a.persona.color }}
-                        title={a.persona.name}
-                      />
-                    )}
-                    <span className="text-[9px] text-arena-muted">vs</span>
-                    {b && (
-                      <div
-                        className="w-1.5 h-3 rounded-sm"
-                        style={{ backgroundColor: b.persona.color }}
-                        title={b.persona.name}
-                      />
-                    )}
-                  </div>
-                  <span className="text-[10px] text-arena-text flex-1 truncate">{d.label}</span>
-                  <span className="text-[9px] font-mono tabular-nums text-arena-warning">
-                    Δ{d.severity}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-        ))}
+    <div className="glass overflow-hidden">
+      <DisagreementArt className="h-[100px]" />
+      <div className="p-5 space-y-3">
+        <div className="flex items-center gap-2">
+          <AlertTriangle className="w-3.5 h-3.5 text-arena-warning drop-shadow-[0_0_6px_rgba(251,191,36,0.6)]" />
+          <p className="section-label">Disagreement Ledger</p>
+          <span className="ml-auto text-[10px] font-mono text-arena-warning/90 tabular-nums px-2 py-0.5 rounded-md bg-arena-warning/12 border border-arena-warning/25">
+            {disagreements.length}
+          </span>
+        </div>
+        <div className="space-y-3">
+          {grouped.map(([round, items]) => (
+            <div key={round} className="space-y-1.5">
+              <button
+                onClick={() => scrollToRound(round)}
+                className="text-[9.5px] font-semibold text-arena-muted uppercase tracking-[0.18em] hover:text-arena-glow transition-colors"
+              >
+                Round {round}
+              </button>
+              {items.map((d) => {
+                const a = lookup(d.participantAId);
+                const b = lookup(d.participantBId);
+                return (
+                  <button
+                    key={d.id}
+                    onClick={() => scrollToRound(round)}
+                    className="w-full flex items-center gap-2 px-2.5 py-2 rounded-lg bg-black/30 hover:bg-arena-accent/8 border border-white/[0.05] hover:border-arena-accent/30 transition-colors text-left"
+                  >
+                    <div className="flex items-center gap-1 shrink-0">
+                      {a && (
+                        <div
+                          className="w-1.5 h-3.5 rounded-sm"
+                          style={{
+                            backgroundColor: a.persona.color,
+                            boxShadow: `0 0 6px ${a.persona.color}90`,
+                          }}
+                          title={a.persona.name}
+                        />
+                      )}
+                      <span className="text-[9px] text-arena-muted">vs</span>
+                      {b && (
+                        <div
+                          className="w-1.5 h-3.5 rounded-sm"
+                          style={{
+                            backgroundColor: b.persona.color,
+                            boxShadow: `0 0 6px ${b.persona.color}90`,
+                          }}
+                          title={b.persona.name}
+                        />
+                      )}
+                    </div>
+                    <span className="text-[10.5px] text-arena-text/85 flex-1 truncate">
+                      {d.label}
+                    </span>
+                    <span className="text-[9.5px] font-mono tabular-nums text-arena-warning font-semibold">
+                      Δ{d.severity}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/components/HeroArt.tsx b/components/HeroArt.tsx
new file mode 100644
index 0000000..e9e26d5
--- /dev/null
+++ b/components/HeroArt.tsx
@@ -0,0 +1,745 @@
+"use client";
+
+// ─────────────────────────────────────────────────────────────
+// Hero Art — Custom premium illustrative SVG graphics
+// ─────────────────────────────────────────────────────────────
+// A small library of luminous SVG illustrations used at the top
+// of major glass cards. Each is fully self-contained, animated,
+// and tuned to the orange / deep navy palette of the redesign.
+
+import { memo } from "react";
+
+type ArtProps = {
+  className?: string;
+};
+
+/* ── Glowing AI nodes inside glass cylinders connected by orange & blue lines ── */
+export const ConsensusNodesArt = memo(function ConsensusNodesArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 600 220"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <radialGradient id="cn-bg" cx="50%" cy="35%" r="70%">
+            <stop offset="0%" stopColor="#0a1f4a" stopOpacity="0.85" />
+            <stop offset="55%" stopColor="#04102a" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </radialGradient>
+          <radialGradient id="cn-orange" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#ffb380" stopOpacity="1" />
+            <stop offset="55%" stopColor="#ff6200" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#ff6200" stopOpacity="0" />
+          </radialGradient>
+          <radialGradient id="cn-blue" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#7ea5e6" stopOpacity="1" />
+            <stop offset="55%" stopColor="#4d7ac7" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#4d7ac7" stopOpacity="0" />
+          </radialGradient>
+          <linearGradient id="cn-line-o" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#ff6200" stopOpacity="0" />
+            <stop offset="50%" stopColor="#ff9a4d" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#ff6200" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="cn-line-b" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#4d7ac7" stopOpacity="0" />
+            <stop offset="50%" stopColor="#7ea5e6" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#4d7ac7" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="cn-cyl" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="rgba(126, 165, 230, 0.45)" />
+            <stop offset="50%" stopColor="rgba(77, 122, 199, 0.18)" />
+            <stop offset="100%" stopColor="rgba(126, 165, 230, 0.45)" />
+          </linearGradient>
+          <filter id="cn-glow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur stdDeviation="3" result="b" />
+            <feMerge>
+              <feMergeNode in="b" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        <rect width="600" height="220" fill="url(#cn-bg)" />
+
+        {/* Faint grid */}
+        <g opacity="0.12" stroke="#4d7ac7" strokeWidth="0.5">
+          {Array.from({ length: 12 }).map((_, i) => (
+            <line key={`v${i}`} x1={i * 50} y1="0" x2={i * 50} y2="220" />
+          ))}
+          {Array.from({ length: 5 }).map((_, i) => (
+            <line key={`h${i}`} x1="0" y1={i * 55} x2="600" y2={i * 55} />
+          ))}
+        </g>
+
+        {/* Light rays */}
+        <g opacity="0.55">
+          <path
+            d="M -40 30 Q 200 -10 640 60"
+            stroke="url(#cn-line-o)"
+            strokeWidth="1.6"
+            fill="none"
+          />
+          <path
+            d="M -40 70 Q 250 30 640 110"
+            stroke="url(#cn-line-b)"
+            strokeWidth="1.4"
+            fill="none"
+          />
+          <path
+            d="M -40 165 Q 260 200 640 150"
+            stroke="url(#cn-line-o)"
+            strokeWidth="1.2"
+            fill="none"
+            opacity="0.6"
+          />
+        </g>
+
+        {/* Connector arcs between nodes */}
+        <g filter="url(#cn-glow)">
+          <path
+            d="M 150 130 C 230 60, 370 60, 450 130"
+            stroke="url(#cn-line-o)"
+            strokeWidth="2"
+            fill="none"
+          />
+          <path
+            d="M 150 130 C 230 200, 370 200, 450 130"
+            stroke="url(#cn-line-b)"
+            strokeWidth="2"
+            fill="none"
+          />
+          <path
+            d="M 150 130 L 300 50"
+            stroke="url(#cn-line-o)"
+            strokeWidth="1.6"
+            fill="none"
+            opacity="0.85"
+          />
+          <path
+            d="M 300 50 L 450 130"
+            stroke="url(#cn-line-b)"
+            strokeWidth="1.6"
+            fill="none"
+            opacity="0.85"
+          />
+        </g>
+
+        {/* Three glass cylinders with glowing AI nodes */}
+        {[
+          { x: 150, color: "url(#cn-orange)", delay: "0s" },
+          { x: 300, color: "url(#cn-blue)", delay: "1.1s" },
+          { x: 450, color: "url(#cn-orange)", delay: "2.2s" },
+        ].map((c, idx) => (
+          <g key={idx} transform={`translate(${c.x}, 130)`}>
+            {/* Cylinder ellipse top */}
+            <ellipse
+              cx="0"
+              cy="-32"
+              rx="32"
+              ry="9"
+              fill="rgba(8, 22, 52, 0.8)"
+              stroke="url(#cn-cyl)"
+              strokeWidth="1"
+            />
+            {/* Cylinder body */}
+            <rect
+              x="-32"
+              y="-32"
+              width="64"
+              height="64"
+              fill="rgba(10, 28, 64, 0.45)"
+              stroke="url(#cn-cyl)"
+              strokeWidth="1"
+            />
+            {/* Cylinder ellipse bottom */}
+            <ellipse
+              cx="0"
+              cy="32"
+              rx="32"
+              ry="9"
+              fill="rgba(4, 14, 34, 0.85)"
+              stroke="rgba(126, 165, 230, 0.45)"
+              strokeWidth="1"
+            />
+            {/* Inner highlight */}
+            <ellipse cx="-12" cy="-32" rx="6" ry="2" fill="rgba(255,255,255,0.25)" />
+            {/* Glow halo */}
+            <circle cx="0" cy="0" r="32" fill={c.color} opacity="0.85">
+              <animate
+                attributeName="opacity"
+                values="0.55;0.95;0.55"
+                dur="3.4s"
+                begin={c.delay}
+                repeatCount="indefinite"
+              />
+            </circle>
+            {/* Core node */}
+            <circle cx="0" cy="0" r="10" fill="#fff" opacity="0.9" />
+            <circle cx="0" cy="0" r="5" fill={idx === 1 ? "#7ea5e6" : "#ffb380"} />
+          </g>
+        ))}
+
+        {/* Floating particles */}
+        {[
+          [80, 50, 1.5],
+          [520, 40, 1.2],
+          [560, 170, 2],
+          [40, 180, 1.4],
+          [380, 30, 1.1],
+          [220, 195, 1.6],
+        ].map(([x, y, r], i) => (
+          <circle
+            key={i}
+            cx={x}
+            cy={y}
+            r={r}
+            fill={i % 2 === 0 ? "#ffb380" : "#7ea5e6"}
+            opacity="0.7"
+          >
+            <animate
+              attributeName="opacity"
+              values="0.3;0.95;0.3"
+              dur={`${3 + i * 0.4}s`}
+              repeatCount="indefinite"
+            />
+          </circle>
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+/* ── Concentric consensus rings ── */
+export const ConsensusRingsArt = memo(function ConsensusRingsArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 320 160"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <radialGradient id="cr-bg" cx="50%" cy="50%" r="70%">
+            <stop offset="0%" stopColor="#0c2150" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </radialGradient>
+          <radialGradient id="cr-core" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="#ffd0a8" />
+            <stop offset="55%" stopColor="#ff6200" stopOpacity="0.95" />
+            <stop offset="100%" stopColor="#ff6200" stopOpacity="0" />
+          </radialGradient>
+          <linearGradient id="cr-line" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#ff6200" stopOpacity="0" />
+            <stop offset="50%" stopColor="#ffb380" />
+            <stop offset="100%" stopColor="#ff6200" stopOpacity="0" />
+          </linearGradient>
+          <filter id="cr-glow">
+            <feGaussianBlur stdDeviation="2.5" />
+          </filter>
+        </defs>
+        <rect width="320" height="160" fill="url(#cr-bg)" />
+
+        {/* Sweeping arc rays */}
+        <path
+          d="M -20 20 Q 160 -10 340 30"
+          stroke="url(#cr-line)"
+          strokeWidth="1.6"
+          fill="none"
+          opacity="0.65"
+        />
+        <path
+          d="M -20 140 Q 180 170 340 130"
+          stroke="url(#cr-line)"
+          strokeWidth="1.2"
+          fill="none"
+          opacity="0.55"
+        />
+
+        {/* Concentric rings */}
+        <g transform="translate(160 80)">
+          {[58, 46, 34, 22].map((r, i) => (
+            <circle
+              key={r}
+              cx="0"
+              cy="0"
+              r={r}
+              fill="none"
+              stroke={i % 2 === 0 ? "#4d7ac7" : "#ff6200"}
+              strokeWidth="1.1"
+              opacity={0.55 - i * 0.05}
+              strokeDasharray={i === 0 ? "3 4" : i === 2 ? "5 6" : undefined}
+            >
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0"
+                to={i % 2 === 0 ? "360" : "-360"}
+                dur={`${20 + i * 6}s`}
+                repeatCount="indefinite"
+              />
+            </circle>
+          ))}
+          {/* Glow core */}
+          <circle r="22" fill="url(#cr-core)" filter="url(#cr-glow)">
+            <animate
+              attributeName="opacity"
+              values="0.7;1;0.7"
+              dur="3.2s"
+              repeatCount="indefinite"
+            />
+          </circle>
+          <circle r="6" fill="#fff" />
+        </g>
+
+        {/* Orbiting dots */}
+        {[
+          { r: 58, off: 0, color: "#ffb380" },
+          { r: 46, off: 90, color: "#7ea5e6" },
+          { r: 34, off: 180, color: "#ff9a4d" },
+        ].map((o, i) => (
+          <g key={i} transform="translate(160 80)">
+            <g>
+              <animateTransform
+                attributeName="transform"
+                type="rotate"
+                from={`${o.off} 0 0`}
+                to={`${o.off + 360} 0 0`}
+                dur={`${10 + i * 3}s`}
+                repeatCount="indefinite"
+              />
+              <circle cx={o.r} cy="0" r="2.4" fill={o.color}>
+                <animate
+                  attributeName="opacity"
+                  values="0.5;1;0.5"
+                  dur="1.6s"
+                  repeatCount="indefinite"
+                />
+              </circle>
+            </g>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+/* ── Trajectory chart with glowing line ── */
+export const TrajectoryArt = memo(function TrajectoryArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 320 140"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <linearGradient id="tj-bg" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#0a1f4a" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </linearGradient>
+          <linearGradient id="tj-line" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#4d7ac7" />
+            <stop offset="100%" stopColor="#ff6200" />
+          </linearGradient>
+          <linearGradient id="tj-fill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#ff6200" stopOpacity="0.45" />
+            <stop offset="100%" stopColor="#ff6200" stopOpacity="0" />
+          </linearGradient>
+          <filter id="tj-glow">
+            <feGaussianBlur stdDeviation="2.5" />
+          </filter>
+        </defs>
+        <rect width="320" height="140" fill="url(#tj-bg)" />
+
+        {/* Grid */}
+        <g opacity="0.18" stroke="#4d7ac7" strokeWidth="0.5">
+          {[0, 28, 56, 84, 112].map((y) => (
+            <line key={y} x1="0" y1={y} x2="320" y2={y} />
+          ))}
+          {[0, 53, 106, 160, 213, 266].map((x) => (
+            <line key={x} x1={x} y1="0" x2={x} y2="140" />
+          ))}
+        </g>
+
+        {/* Filled area */}
+        <path
+          d="M 10 110 L 65 90 L 120 80 L 175 55 L 230 40 L 290 22 L 290 130 L 10 130 Z"
+          fill="url(#tj-fill)"
+        />
+
+        {/* Line */}
+        <path
+          d="M 10 110 L 65 90 L 120 80 L 175 55 L 230 40 L 290 22"
+          stroke="url(#tj-line)"
+          strokeWidth="2.5"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          filter="url(#tj-glow)"
+        />
+        <path
+          d="M 10 110 L 65 90 L 120 80 L 175 55 L 230 40 L 290 22"
+          stroke="url(#tj-line)"
+          strokeWidth="1.4"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Points */}
+        {[
+          [10, 110, "#4d7ac7"],
+          [65, 90, "#7ea5e6"],
+          [120, 80, "#ff9a4d"],
+          [175, 55, "#ff9a4d"],
+          [230, 40, "#ff6200"],
+          [290, 22, "#ff6200"],
+        ].map(([x, y, c], i) => (
+          <g key={i}>
+            <circle cx={x as number} cy={y as number} r="6" fill={c as string} opacity="0.25" />
+            <circle cx={x as number} cy={y as number} r="3" fill={c as string} />
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+/* ── Cost / treasury hero — glowing coin stack ── */
+export const CostArt = memo(function CostArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 320 130"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <radialGradient id="ct-bg" cx="50%" cy="50%" r="70%">
+            <stop offset="0%" stopColor="#0c2150" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </radialGradient>
+          <linearGradient id="ct-coin" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#ffd0a8" />
+            <stop offset="50%" stopColor="#ff9a4d" />
+            <stop offset="100%" stopColor="#e25400" />
+          </linearGradient>
+          <linearGradient id="ct-edge" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#ffb380" />
+            <stop offset="100%" stopColor="#a83b00" />
+          </linearGradient>
+          <filter id="ct-glow">
+            <feGaussianBlur stdDeviation="6" />
+          </filter>
+        </defs>
+        <rect width="320" height="130" fill="url(#ct-bg)" />
+
+        {/* Glow halo */}
+        <ellipse
+          cx="160"
+          cy="100"
+          rx="120"
+          ry="22"
+          fill="url(#ct-coin)"
+          opacity="0.32"
+          filter="url(#ct-glow)"
+        />
+
+        {/* Stacked coins */}
+        {[
+          { y: 92, w: 96 },
+          { y: 78, w: 92 },
+          { y: 64, w: 88 },
+          { y: 50, w: 84 },
+        ].map((c, i) => (
+          <g key={i}>
+            <ellipse cx="160" cy={c.y + 4} rx={c.w / 2} ry="8" fill="rgba(0,0,0,0.45)" />
+            <rect x={160 - c.w / 2} y={c.y - 6} width={c.w} height="10" fill="url(#ct-edge)" />
+            <ellipse
+              cx="160"
+              cy={c.y - 6}
+              rx={c.w / 2}
+              ry="6"
+              fill="url(#ct-coin)"
+              stroke="#ffe2c2"
+              strokeWidth="0.6"
+            />
+            <text
+              x="160"
+              y={c.y - 4}
+              fontSize="6"
+              fontFamily="JetBrains Mono, monospace"
+              textAnchor="middle"
+              fill="#7a2d00"
+              opacity="0.7"
+            >
+              ◎
+            </text>
+          </g>
+        ))}
+
+        {/* Particles */}
+        {[
+          [40, 30, 1.2, "#ffb380"],
+          [280, 40, 1.5, "#7ea5e6"],
+          [60, 110, 1, "#ff9a4d"],
+          [260, 110, 1.2, "#ffb380"],
+          [300, 80, 1, "#7ea5e6"],
+          [20, 70, 1, "#ffb380"],
+        ].map(([x, y, r, c], i) => (
+          <circle
+            key={i}
+            cx={x as number}
+            cy={y as number}
+            r={r as number}
+            fill={c as string}
+            opacity="0.7"
+          >
+            <animate
+              attributeName="opacity"
+              values="0.3;1;0.3"
+              dur={`${3 + i * 0.3}s`}
+              repeatCount="indefinite"
+            />
+          </circle>
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+/* ── Disagreement ledger hero — split spectrum ── */
+export const DisagreementArt = memo(function DisagreementArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 320 130"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <linearGradient id="dg-bg" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#0c2150" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </linearGradient>
+          <linearGradient id="dg-l" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#7ea5e6" />
+            <stop offset="100%" stopColor="#4d7ac7" />
+          </linearGradient>
+          <linearGradient id="dg-r" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#ffb380" />
+            <stop offset="100%" stopColor="#ff6200" />
+          </linearGradient>
+          <filter id="dg-glow">
+            <feGaussianBlur stdDeviation="3.5" />
+          </filter>
+        </defs>
+        <rect width="320" height="130" fill="url(#dg-bg)" />
+
+        {/* Two opposing nodes */}
+        <g filter="url(#dg-glow)">
+          <circle cx="80" cy="65" r="22" fill="url(#dg-l)" opacity="0.75" />
+          <circle cx="240" cy="65" r="22" fill="url(#dg-r)" opacity="0.75" />
+        </g>
+        <circle cx="80" cy="65" r="9" fill="#fff" />
+        <circle cx="240" cy="65" r="9" fill="#fff" />
+
+        {/* Tension lines */}
+        {[0, 1, 2, 3, 4].map((i) => {
+          const y = 30 + i * 18;
+          return (
+            <line
+              key={i}
+              x1="100"
+              y1={y}
+              x2="220"
+              y2={130 - y}
+              stroke={i % 2 === 0 ? "url(#dg-l)" : "url(#dg-r)"}
+              strokeWidth="1.2"
+              opacity="0.55"
+              strokeDasharray="3 4"
+            >
+              <animate
+                attributeName="stroke-dashoffset"
+                from="0"
+                to="14"
+                dur={`${1.5 + i * 0.2}s`}
+                repeatCount="indefinite"
+              />
+            </line>
+          );
+        })}
+
+        {/* Center spark */}
+        <g transform="translate(160 65)">
+          <circle r="10" fill="#ff6200" opacity="0.6" filter="url(#dg-glow)">
+            <animate
+              attributeName="opacity"
+              values="0.4;0.9;0.4"
+              dur="1.6s"
+              repeatCount="indefinite"
+            />
+          </circle>
+          <path d="M -8 0 L 0 -10 L 8 0 L 0 10 Z" fill="#ffd0a8" />
+        </g>
+      </svg>
+    </div>
+  );
+});
+
+/* ── Roundtable / message-flow hero — orbiting nodes ── */
+export const FlowArt = memo(function FlowArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 320 130"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <radialGradient id="fl-bg" cx="50%" cy="50%" r="70%">
+            <stop offset="0%" stopColor="#0c2150" stopOpacity="0.9" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </radialGradient>
+          <linearGradient id="fl-line" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#4d7ac7" stopOpacity="0" />
+            <stop offset="50%" stopColor="#ff9a4d" />
+            <stop offset="100%" stopColor="#4d7ac7" stopOpacity="0" />
+          </linearGradient>
+          <filter id="fl-glow">
+            <feGaussianBlur stdDeviation="2.4" />
+          </filter>
+        </defs>
+        <rect width="320" height="130" fill="url(#fl-bg)" />
+
+        {/* Orbiting ring */}
+        <g transform="translate(160 65)">
+          <ellipse
+            rx="100"
+            ry="40"
+            fill="none"
+            stroke="rgba(77,122,199,0.35)"
+            strokeWidth="1"
+            strokeDasharray="3 4"
+          />
+          <ellipse
+            rx="80"
+            ry="30"
+            fill="none"
+            stroke="rgba(255,98,0,0.4)"
+            strokeWidth="1"
+            strokeDasharray="4 5"
+          />
+        </g>
+
+        {/* Nodes around table */}
+        {[
+          { x: 60, y: 65, c: "#7ea5e6" },
+          { x: 110, y: 30, c: "#ffb380" },
+          { x: 160, y: 18, c: "#ff6200" },
+          { x: 210, y: 30, c: "#ff9a4d" },
+          { x: 260, y: 65, c: "#7ea5e6" },
+          { x: 210, y: 100, c: "#ffb380" },
+          { x: 110, y: 100, c: "#ff9a4d" },
+        ].map((n, i) => (
+          <g key={i}>
+            <circle cx={n.x} cy={n.y} r="10" fill={n.c} opacity="0.55" filter="url(#fl-glow)" />
+            <circle cx={n.x} cy={n.y} r="4" fill="#fff" />
+          </g>
+        ))}
+
+        {/* Center hub */}
+        <g transform="translate(160 65)" filter="url(#fl-glow)">
+          <circle r="14" fill="#ff6200" opacity="0.7" />
+          <circle r="6" fill="#fff" />
+        </g>
+
+        {/* Flowing connections (animated dashes) */}
+        {[
+          [60, 65, 160, 65],
+          [160, 18, 160, 65],
+          [260, 65, 160, 65],
+          [110, 100, 160, 65],
+          [210, 100, 160, 65],
+          [110, 30, 160, 65],
+          [210, 30, 160, 65],
+        ].map(([x1, y1, x2, y2], i) => (
+          <line
+            key={i}
+            x1={x1}
+            y1={y1}
+            x2={x2}
+            y2={y2}
+            stroke="url(#fl-line)"
+            strokeWidth="1.3"
+            strokeDasharray="2 5"
+            opacity="0.85"
+          >
+            <animate
+              attributeName="stroke-dashoffset"
+              from="0"
+              to="14"
+              dur={`${1.4 + i * 0.2}s`}
+              repeatCount="indefinite"
+            />
+          </line>
+        ))}
+      </svg>
+    </div>
+  );
+});
+
+/* ── Sidebar config hero — circuit nodes ── */
+export const ConfigArt = memo(function ConfigArt({ className }: ArtProps) {
+  return (
+    <div className={`relative w-full overflow-hidden rounded-t-[22px] ${className ?? ""}`}>
+      <svg
+        viewBox="0 0 320 110"
+        className="w-full h-full block"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        <defs>
+          <linearGradient id="cf-bg" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#0a1f4a" stopOpacity="0.85" />
+            <stop offset="100%" stopColor="#02070f" stopOpacity="0.95" />
+          </linearGradient>
+          <linearGradient id="cf-l" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#4d7ac7" stopOpacity="0" />
+            <stop offset="50%" stopColor="#ff9a4d" />
+            <stop offset="100%" stopColor="#4d7ac7" stopOpacity="0" />
+          </linearGradient>
+          <filter id="cf-glow">
+            <feGaussianBlur stdDeviation="2.2" />
+          </filter>
+        </defs>
+        <rect width="320" height="110" fill="url(#cf-bg)" />
+
+        {/* Circuit lines */}
+        <g stroke="url(#cf-l)" strokeWidth="1.2" fill="none" opacity="0.85">
+          <path d="M 10 30 L 80 30 L 100 50 L 200 50 L 220 30 L 310 30" />
+          <path d="M 10 80 L 90 80 L 110 60 L 210 60 L 230 80 L 310 80" />
+          <path d="M 160 50 L 160 60" />
+        </g>
+
+        {/* Nodes */}
+        {[
+          [80, 30, "#ff9a4d"],
+          [220, 30, "#7ea5e6"],
+          [110, 60, "#ffb380"],
+          [210, 60, "#7ea5e6"],
+          [90, 80, "#ff6200"],
+          [230, 80, "#ff9a4d"],
+          [160, 55, "#ff6200"],
+        ].map(([x, y, c], i) => (
+          <g key={i} filter="url(#cf-glow)">
+            <circle cx={x as number} cy={y as number} r="5" fill={c as string} opacity="0.6" />
+            <circle cx={x as number} cy={y as number} r="2.2" fill="#fff" />
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+});
diff --git a/components/JudgeCard.tsx b/components/JudgeCard.tsx
index 485f272..3ebb831 100644
--- a/components/JudgeCard.tsx
+++ b/components/JudgeCard.tsx
@@ -3,9 +3,6 @@
 // ─────────────────────────────────────────────────────────────
 // Judge Card — Non-voting synthesizer output
 // ─────────────────────────────────────────────────────────────
-// Renders the live judge stream (if running) or the final
-// synthesis (if complete). Does nothing if the judge was never
-// enabled for the run.
 
 import { useArenaStore } from "@/lib/store";
 import ReactMarkdown from "react-markdown";
@@ -25,21 +22,25 @@ export default function JudgeCard() {
   const displayContent = content.replace(/\nJUDGE_CONFIDENCE:\s*\d+\s*$/i, "").trim();
 
   return (
-    <div className="rounded-xl border border-arena-warning/30 bg-arena-surface overflow-hidden">
-      <div className="flex items-center gap-2.5 px-5 py-3 border-b border-arena-warning/20 bg-arena-warning/5">
-        <Gavel className="w-4 h-4 text-arena-warning" />
+    <div className="glass overflow-hidden border border-arena-warning/35 shadow-[0_0_28px_-8px_rgba(251,191,36,0.4)]">
+      <div className="flex items-center gap-3 px-5 py-3.5 border-b border-arena-warning/20 bg-arena-warning/5">
+        <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#fbbf24] to-[#b8860b] flex items-center justify-center shadow-[0_0_14px_rgba(251,191,36,0.55)]">
+          <Gavel className="w-4 h-4 text-[#1f1300]" />
+        </div>
         <div className="flex-1">
-          <p className="text-[11px] font-semibold text-arena-warning">Consensus Judge</p>
+          <p className="text-[12px] font-semibold text-arena-warning tracking-tight">
+            Consensus Judge
+          </p>
           {judge && (
-            <p className="text-[9px] text-arena-muted">
-              {judge.providerName} &middot; {judge.modelId}
+            <p className="text-[10px] text-arena-muted mt-0.5">
+              {judge.providerName} · {judge.modelId}
             </p>
           )}
         </div>
         {running && <Loader2 className="w-3.5 h-3.5 text-arena-warning animate-spin" />}
       </div>
-      <div className="px-5 py-4 prose prose-invert prose-sm max-w-none text-arena-text/90 leading-[1.75] [&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_h2]:text-[13px] [&_h2]:font-semibold [&_h2]:text-arena-warning [&_h2]:mt-3 [&_h2]:mb-1 [&_strong]:text-arena-text">
-        <ReactMarkdown remarkPlugins={remarkPlugins}>{displayContent || "..."}</ReactMarkdown>
+      <div className="px-4 sm:px-6 py-4 sm:py-5 prose prose-invert prose-sm max-w-none text-arena-text/90 leading-[1.78] [&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_h2]:text-[13px] [&_h2]:font-semibold [&_h2]:text-arena-warning [&_h2]:mt-3 [&_h2]:mb-1 [&_strong]:text-arena-text [&_pre]:!overflow-x-auto">
+        <ReactMarkdown remarkPlugins={remarkPlugins}>{displayContent || "…"}</ReactMarkdown>
       </div>
     </div>
   );
diff --git a/components/MessageFlowDiagram.tsx b/components/MessageFlowDiagram.tsx
index d1bc82a..a226f47 100644
--- a/components/MessageFlowDiagram.tsx
+++ b/components/MessageFlowDiagram.tsx
@@ -3,12 +3,6 @@
 // ─────────────────────────────────────────────────────────────
 // Message Flow Diagram — Floating right-side summary panel
 // ─────────────────────────────────────────────────────────────
-// Stacks the cost meter, confidence trajectory, disagreement
-// ledger and the UML-style message flow diagram into a single
-// scrollable floating container pinned to the right edge of the
-// viewport on xl+ screens. Each card returns null on its own
-// when it has nothing to show, so the stack collapses naturally
-// as the run starts filling in data.
 
 import { useArenaStore } from "@/lib/store";
 import { useMemo, useState, memo, useCallback } from "react";
@@ -24,15 +18,16 @@ import {
 import CostMeter from "./CostMeter";
 import ConfidenceTrajectory from "./ConfidenceTrajectory";
 import DisagreementPanel from "./DisagreementPanel";
+import { FlowArt } from "./HeroArt";
 import ClaimsPanel from "./ClaimsPanel";
 
 function scrollToResponse(responseId: string) {
   const el = document.getElementById(responseId);
   if (!el) return;
   el.scrollIntoView({ behavior: "smooth", block: "center" });
-  el.classList.add("ring-1", "ring-arena-accent/50", "ring-offset-1", "ring-offset-arena-bg");
+  el.classList.add("ring-2", "ring-arena-accent/60");
   setTimeout(() => {
-    el.classList.remove("ring-1", "ring-arena-accent/50", "ring-offset-1", "ring-offset-arena-bg");
+    el.classList.remove("ring-2", "ring-arena-accent/60");
   }, 1500);
 }
 
@@ -52,12 +47,20 @@ export default function MessageFlowDiagram() {
   const hasCost = tokenTotal.totalTokens > 0 || isRunning;
   const hasDisagreements = disagreements.length > 0;
 
-  // Hide the entire floating container when there's nothing to show.
   if (!hasRounds && !hasCost && !hasDisagreements) return null;
 
   return (
-    <div className="hidden xl:block fixed right-5 top-[69px] w-[310px] max-h-[calc(100vh-85px)] z-20">
-      <div className="flex flex-col gap-3 max-h-[calc(100vh-85px)] overflow-y-auto pr-0.5">
+    <div
+      className="hidden xl:block fixed right-6 w-[330px] z-20"
+      style={{
+        top: "calc(var(--rt-header-h) + 18px)",
+        maxHeight: "calc(100vh - var(--rt-header-h) - 36px)",
+      }}
+    >
+      <div
+        className="flex flex-col gap-4 overflow-y-auto pr-1"
+        style={{ maxHeight: "calc(100vh - var(--rt-header-h) - 36px)" }}
+      >
         <CostMeter />
         <ConfidenceTrajectory />
         <DisagreementPanel />
@@ -68,8 +71,6 @@ export default function MessageFlowDiagram() {
   );
 }
 
-// ── Message Flow card — the collapsible sequence diagram ──
-
 function MessageFlowCard() {
   const rounds = useArenaStore((s) => s.rounds);
   const participants = useArenaStore((s) => s.participants);
@@ -98,7 +99,7 @@ function MessageFlowCard() {
           fromColor: p.persona.color,
           persona: p.persona.name,
           confidence: response.confidence,
-          snippet: raw.length > 70 ? raw.slice(0, 70) + "..." : raw,
+          snippet: raw.length > 70 ? raw.slice(0, 70) + "…" : raw,
         });
       }
     }
@@ -113,16 +114,17 @@ function MessageFlowCard() {
   if (rounds.length === 0) return null;
 
   return (
-    <div className="bg-arena-surface border border-arena-border/60 rounded-xl shadow-lg shadow-black/20 overflow-hidden flex flex-col">
+    <div className="glass overflow-hidden flex flex-col">
+      <FlowArt className="h-[100px]" />
       <button
         onClick={() => setCollapsed(!collapsed)}
-        className="flex items-center gap-2 px-4 py-3 border-b border-arena-border/40 hover:bg-arena-accent/5 transition-colors w-full"
+        className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.05] hover:bg-white/[0.03] transition-colors w-full"
       >
         <GitBranch className="w-3.5 h-3.5 text-arena-accent" />
-        <span className="text-[10px] font-semibold text-arena-muted uppercase tracking-[0.12em] flex-1 text-left">
-          Message Flow
+        <span className="section-label flex-1 text-left">Message Flow</span>
+        <span className="text-[9.5px] text-arena-glow font-mono tabular-nums px-1.5 py-0.5 rounded-md bg-arena-accent/12 border border-arena-accent/25">
+          {msgCount}
         </span>
-        <span className="text-[9px] text-arena-muted/70 font-mono tabular-nums">{msgCount}</span>
         {collapsed ? (
           <ChevronDown className="w-3 h-3 text-arena-muted" />
         ) : (
@@ -131,18 +133,24 @@ function MessageFlowCard() {
       </button>
 
       {!collapsed && (
-        <div className="p-3 space-y-0.5">
-          {/* Participant badges */}
-          <div className="flex flex-wrap items-center gap-1.5 pb-2.5 mb-2 border-b border-arena-border/30">
+        <div className="p-3.5 space-y-1">
+          <div className="flex flex-wrap items-center gap-1.5 pb-3 mb-2 border-b border-white/[0.04]">
             {participants.map((p) => (
               <div
                 key={p.id}
                 className="flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[9px] font-medium"
-                style={{ backgroundColor: `${p.persona.color}15`, color: p.persona.color }}
+                style={{
+                  backgroundColor: `${p.persona.color}18`,
+                  color: p.persona.color,
+                  border: `1px solid ${p.persona.color}30`,
+                }}
               >
                 <div
                   className="w-1.5 h-1.5 rounded-full"
-                  style={{ backgroundColor: p.persona.color }}
+                  style={{
+                    backgroundColor: p.persona.color,
+                    boxShadow: `0 0 4px ${p.persona.color}`,
+                  }}
                 />
                 <span className="truncate max-w-[75px]">{p.modelInfo.modelId}</span>
               </div>
@@ -154,9 +162,9 @@ function MessageFlowCard() {
           ))}
 
           {isRunning && (
-            <div className="flex items-center gap-2 px-2 py-2 text-[9px] text-arena-muted">
+            <div className="flex items-center gap-2 px-2 py-2 text-[9.5px] text-arena-glow">
               <Loader2 className="w-2.5 h-2.5 animate-spin text-arena-accent" />
-              Round {currentRound}...
+              Round {currentRound}…
             </div>
           )}
         </div>
@@ -188,23 +196,23 @@ const FlowEventRow = memo(function FlowEventRow({ event }: { event: FlowEvent })
     return (
       <button
         onClick={handleClick}
-        className="flex items-center gap-2 py-2 mt-1 w-full hover:opacity-70 transition-opacity cursor-pointer"
+        className="flex items-center gap-2 py-2 mt-1 w-full hover:opacity-80 transition-opacity cursor-pointer"
       >
-        <div className="flex-1 h-px bg-arena-border/40" />
+        <div className="flex-1 h-px bg-gradient-to-r from-transparent to-arena-blue/30" />
         <div className="flex items-center gap-1.5">
           {event.consensusScore > 0 ? (
-            <CheckCircle2 className="w-3 h-3 text-arena-success" />
+            <CheckCircle2 className="w-3 h-3 text-arena-success drop-shadow-[0_0_4px_rgba(52,211,153,0.6)]" />
           ) : (
-            <Circle className="w-3 h-3 text-arena-accent/60" />
+            <Circle className="w-3 h-3 text-arena-accent/70" />
           )}
-          <span className="text-[9px] font-semibold text-arena-muted uppercase tracking-wider whitespace-nowrap">
-            R{event.round} {event.label}
+          <span className="text-[9.5px] font-semibold text-arena-glow uppercase tracking-[0.15em] whitespace-nowrap">
+            R{event.round} · {event.label}
           </span>
           {event.consensusScore > 0 && (
-            <span className="text-[8px] font-mono text-arena-success">{event.consensusScore}%</span>
+            <span className="text-[9px] font-mono text-arena-success">{event.consensusScore}%</span>
           )}
         </div>
-        <div className="flex-1 h-px bg-arena-border/40" />
+        <div className="flex-1 h-px bg-gradient-to-l from-transparent to-arena-blue/30" />
       </button>
     );
   }
@@ -212,24 +220,29 @@ const FlowEventRow = memo(function FlowEventRow({ event }: { event: FlowEvent })
   return (
     <button
       onClick={handleClick}
-      className="flex items-start gap-2 px-2 py-1.5 rounded-lg hover:bg-arena-accent/5 transition-colors group w-full text-left cursor-pointer"
+      className="flex items-start gap-2 px-2 py-1.5 rounded-lg hover:bg-white/[0.04] transition-colors group w-full text-left cursor-pointer"
     >
       <div
         className="w-[3px] min-h-[20px] rounded-full shrink-0 mt-0.5 self-stretch"
-        style={{ backgroundColor: event.fromColor }}
+        style={{
+          backgroundColor: event.fromColor,
+          boxShadow: `0 0 6px ${event.fromColor}90`,
+        }}
       />
       <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-1">
-          <span className="text-[10px] font-medium truncate" style={{ color: event.fromColor }}>
+        <div className="flex items-center gap-1.5">
+          <span className="text-[10.5px] font-semibold truncate" style={{ color: event.fromColor }}>
             {event.from}
           </span>
-          <ArrowRight className="w-2 h-2 text-arena-muted/40 shrink-0" />
-          <span className="text-[9px] text-arena-accent font-medium shrink-0">CVP</span>
-          <span className="ml-auto text-[8px] font-mono text-arena-muted/70 shrink-0 tabular-nums">
+          <ArrowRight className="w-2 h-2 text-arena-muted/45 shrink-0" />
+          <span className="text-[9px] text-arena-glow font-medium shrink-0 px-1.5 py-0.5 rounded bg-arena-accent/10">
+            CVP
+          </span>
+          <span className="ml-auto text-[8.5px] font-mono text-arena-muted/80 shrink-0 tabular-nums">
             {event.confidence}%
           </span>
         </div>
-        <p className="text-[9px] text-arena-muted/60 mt-0.5 line-clamp-1 group-hover:text-arena-muted transition-colors leading-relaxed">
+        <p className="text-[9.5px] text-arena-muted/65 mt-0.5 line-clamp-1 group-hover:text-arena-muted transition-colors leading-relaxed">
           {event.snippet}
         </p>
       </div>
diff --git a/components/PromptLibrary.tsx b/components/PromptLibrary.tsx
index 9a5dc01..a02a1b0 100644
--- a/components/PromptLibrary.tsx
+++ b/components/PromptLibrary.tsx
@@ -17,23 +17,20 @@ export default function PromptLibrary() {
   if (prompt.trim().length > 0) return null;
 
   return (
-    <div className="mt-3 space-y-2">
-      <p className="text-[10px] text-arena-muted uppercase tracking-[0.15em] flex items-center gap-1.5">
+    <div className="space-y-2.5">
+      <p className="section-label">
         <Sparkles className="w-2.5 h-2.5" />
         Try a preset
       </p>
-      <div className="flex flex-wrap gap-1.5">
+      <div className="flex flex-wrap gap-2">
         {PROMPT_LIBRARY.map((preset) => (
           <button
             key={preset.id}
             onClick={() => setPrompt(preset.prompt)}
-            className="group flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-arena-surface border border-arena-border/60 hover:border-arena-accent/60 hover:bg-arena-accent/5 text-[11px] text-arena-text/80 hover:text-arena-text transition-all"
+            className="group flex items-center gap-2 px-3 py-1.5 rounded-xl bg-black/35 border border-white/[0.06] hover:border-arena-accent/45 hover:bg-arena-accent/8 hover:shadow-glow-orange-sm text-[11.5px] text-arena-text/85 hover:text-arena-glow transition-colors"
             title={preset.prompt}
           >
-            <span
-              className="text-[8px] font-semibold uppercase tracking-wider px-1 py-0.5 rounded"
-              style={{ backgroundColor: "#1e2937", color: "#94a3b8" }}
-            >
+            <span className="text-[8.5px] font-semibold uppercase tracking-[0.15em] px-1.5 py-0.5 rounded bg-arena-blue/15 text-arena-blue border border-arena-blue/25 group-hover:bg-arena-accent/15 group-hover:text-arena-glow group-hover:border-arena-accent/30 transition-colors">
               {preset.category}
             </span>
             <span className="truncate max-w-[210px]">{preset.label}</span>
diff --git a/components/ResultPanel.tsx b/components/ResultPanel.tsx
index 772cc4d..ffdedc8 100644
--- a/components/ResultPanel.tsx
+++ b/components/ResultPanel.tsx
@@ -7,9 +7,10 @@
 import { useArenaStore } from "@/lib/store";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { useEffect, useRef, memo, useCallback, useState } from "react";
+import { useEffect, useRef, memo, useCallback, useState, useMemo } from "react";
 import JudgeCard from "./JudgeCard";
 import SessionMenu from "./SessionMenu";
+import { ConsensusRingsArt } from "./HeroArt";
 import {
   CheckCircle,
   Circle,
@@ -48,7 +49,7 @@ export default function ResultPanel() {
     scrollTimerRef.current = setTimeout(() => {
       bottomRef.current?.scrollIntoView({ behavior: "smooth" });
       scrollTimerRef.current = null;
-    }, 300);
+    }, 350);
   }, []);
 
   useEffect(() => {
@@ -67,11 +68,14 @@ export default function ResultPanel() {
   if (rounds.length === 0 && !isRunning && !judge && !judgeRunning) return null;
 
   return (
-    <div className="w-full max-w-4xl mx-auto px-6 pb-8 space-y-8">
-      {/* Progress bar */}
-      <div className="sticky top-[53px] z-20 bg-arena-bg/95 backdrop-blur-xl py-4 -mx-6 px-6">
+    <div className="w-full space-y-7">
+      {/* Progress bar — sticky, single backdrop-filter (acceptable). */}
+      <div
+        className="sticky z-20 glass-fixed border rounded-2xl px-4 sm:px-5 py-3 sm:py-3.5 shadow-glass"
+        style={{ top: "calc(var(--rt-header-h) - 9px)" }}
+      >
         <div className="flex items-center gap-3">
-          <span className="text-[10px] text-arena-muted font-semibold uppercase tracking-[0.12em] whitespace-nowrap">
+          <span className="text-[10px] text-arena-glow font-semibold uppercase tracking-[0.18em] whitespace-nowrap">
             {isRunning ? (
               <>
                 Round {currentRound}/{roundCount}
@@ -80,23 +84,23 @@ export default function ResultPanel() {
               "Complete"
             )}
           </span>
-          <div className="flex-1 h-1 bg-arena-surface rounded-full overflow-hidden">
+          <div className="flex-1 h-1.5 bg-black/55 rounded-full overflow-hidden border border-white/[0.04]">
             <div
               className={`h-full rounded-full transition-all duration-700 ease-out ${
                 isRunning
-                  ? "bg-arena-accent"
-                  : "bg-gradient-to-r from-arena-accent to-arena-success"
+                  ? "progress-orange"
+                  : "bg-gradient-to-r from-arena-accent via-arena-glow to-arena-success"
               }`}
               style={{ width: `${progress * 100}%` }}
             />
           </div>
-          <span className="text-[10px] text-arena-muted font-mono tabular-nums w-8 text-right">
+          <span className="text-[10.5px] text-arena-text/85 font-mono tabular-nums w-9 text-right">
             {Math.round(progress * 100)}%
           </span>
           {isRunning && (
             <button
               onClick={cancelConsensus}
-              className="flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-arena-danger/10 border border-arena-danger/20 text-arena-danger text-[10px] font-medium hover:bg-arena-danger/20 active:scale-95 transition-all"
+              className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-arena-danger/12 border border-arena-danger/35 text-arena-danger text-[10px] font-semibold hover:bg-arena-danger/20 active:scale-95 transition-all"
               title="Cancel (Esc)"
             >
               <Square className="w-2.5 h-2.5 fill-current" />
@@ -108,28 +112,30 @@ export default function ResultPanel() {
 
       {/* Rounds */}
       {rounds.map((round) => (
-        <div key={round.number} id={`round-${round.number}`} className="space-y-5">
+        <div key={round.number} id={`round-${round.number}`} className="space-y-4 scroll-mt-32">
           <div className="flex items-center gap-3">
-            {round.number < currentRound || !isRunning ? (
-              <CheckCircle className="w-[18px] h-[18px] text-arena-success shrink-0" />
-            ) : round.number === currentRound ? (
-              <Loader2 className="w-[18px] h-[18px] text-arena-accent animate-spin shrink-0" />
-            ) : (
-              <Circle className="w-[18px] h-[18px] text-arena-muted/40 shrink-0" />
-            )}
-            <h3 className="text-[15px] font-semibold text-arena-text tracking-tight">
+            <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-black/35 border border-white/[0.06]">
+              {round.number < currentRound || !isRunning ? (
+                <CheckCircle className="w-[16px] h-[16px] text-arena-success drop-shadow-[0_0_5px_rgba(52,211,153,0.55)]" />
+              ) : round.number === currentRound ? (
+                <Loader2 className="w-[16px] h-[16px] text-arena-accent animate-spin" />
+              ) : (
+                <Circle className="w-[16px] h-[16px] text-arena-muted/40" />
+              )}
+            </div>
+            <h3 className="text-[16px] font-semibold text-arena-text tracking-tight">
               Round {round.number}
               <span className="font-normal text-arena-muted ml-2">{round.label}</span>
             </h3>
             {round.consensusScore > 0 && (
-              <span className="ml-auto flex items-center gap-1 text-[10px] font-semibold text-arena-success bg-arena-success/10 px-2 py-0.5 rounded-md">
+              <span className="ml-auto flex items-center gap-1.5 text-[11px] font-semibold text-arena-success bg-arena-success/12 border border-arena-success/30 px-2.5 py-1 rounded-lg">
                 <TrendingUp className="w-3 h-3" />
                 {round.consensusScore}%
               </span>
             )}
           </div>
 
-          <div className="space-y-3 pl-7">
+          <div className="space-y-3 pl-0 sm:pl-10">
             {round.responses.map((response) => {
               const participant = participants.find((p) => p.id === response.participantId);
               if (!participant) return null;
@@ -158,13 +164,15 @@ export default function ResultPanel() {
 
       {/* Early stop notice */}
       {earlyStopped && (
-        <div className="flex items-start gap-3 rounded-xl border border-arena-warning/20 bg-arena-warning/5 px-5 py-3">
-          <ZapOff className="w-4 h-4 text-arena-warning mt-0.5 shrink-0" />
+        <div className="glass flex items-start gap-3 px-5 py-4 border border-arena-warning/35">
+          <ZapOff className="w-4 h-4 text-arena-warning mt-0.5 shrink-0 drop-shadow-[0_0_5px_rgba(251,191,36,0.55)]" />
           <div className="flex-1">
-            <p className="text-[12px] font-semibold text-arena-warning">
+            <p className="text-[12.5px] font-semibold text-arena-warning">
               Stopped early after round {earlyStopped.round}
             </p>
-            <p className="text-[11px] text-arena-muted leading-relaxed">{earlyStopped.reason}</p>
+            <p className="text-[11px] text-arena-muted leading-relaxed mt-0.5">
+              {earlyStopped.reason}
+            </p>
           </div>
         </div>
       )}
@@ -174,28 +182,33 @@ export default function ResultPanel() {
 
       {/* Final consensus */}
       {finalScore !== null && (
-        <div className="rounded-xl border border-arena-accent/20 bg-arena-surface p-7 space-y-3">
-          <div className="flex items-center gap-3">
-            <Award className="w-5 h-5 text-arena-accent" />
-            <h3 className="text-[15px] font-semibold text-arena-text tracking-tight">
-              Consensus Reached
-            </h3>
-            <span className="ml-auto text-2xl font-bold text-arena-accent font-mono tabular-nums">
-              {finalScore}%
-            </span>
-            <SessionMenu />
+        <div className="glass-strong overflow-hidden">
+          <ConsensusRingsArt className="h-[110px] sm:h-[140px]" />
+          <div className="p-5 sm:p-7 space-y-3">
+            <div className="flex items-center gap-3 flex-wrap">
+              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-[#ff8a3a] to-[#e25400] flex items-center justify-center shadow-glow-orange-sm">
+                <Award className="w-4.5 h-4.5 text-white" />
+              </div>
+              <h3 className="text-[16px] font-semibold text-arena-text tracking-tight">
+                Consensus Reached
+              </h3>
+              <span className="ml-auto text-3xl font-bold font-mono tabular-nums tracking-tight bg-gradient-to-br from-[#ffd0a8] via-[#ff9a4d] to-[#ff6200] bg-clip-text text-transparent">
+                {finalScore}%
+              </span>
+              <SessionMenu />
+            </div>
+            {finalSummary && (
+              <p className="text-[13px] text-arena-text/85 leading-relaxed">{finalSummary}</p>
+            )}
           </div>
-          {finalSummary && (
-            <p className="text-[13px] text-arena-muted leading-relaxed">{finalSummary}</p>
-          )}
         </div>
       )}
 
       {rounds.length > 0 && (
-        <div className="flex justify-center pt-2 pb-6">
+        <div className="flex justify-center pt-2 pb-8">
           <button
             onClick={scrollToTop}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-[11px] text-arena-muted hover:text-arena-text transition-colors"
+            className="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-[11px] text-arena-muted hover:text-arena-glow hover:bg-white/[0.04] transition-all"
           >
             <ChevronUp className="w-3 h-3" />
             Back to top
@@ -268,7 +281,10 @@ const CompletedResponseCard = memo(function CompletedResponseCard({
   content: string;
   error?: string;
 }) {
-  const displayContent = content.replace(/\nCONFIDENCE:\s*\d+\s*$/i, "").trim();
+  const displayContent = useMemo(
+    () => content.replace(/\nCONFIDENCE:\s*\d+\s*$/i, "").trim(),
+    [content],
+  );
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(() => {
@@ -278,13 +294,21 @@ const CompletedResponseCard = memo(function CompletedResponseCard({
     });
   }, [displayContent]);
 
+  // Stable per-card style — only rebuilt when persona color changes.
+  const cardStyle = useMemo(
+    () => ({
+      boxShadow: `inset 4px 0 0 0 ${personaColor}, 0 10px 28px -10px rgba(0,0,0,0.55)`,
+    }),
+    [personaColor],
+  );
+
   if (error) {
     return (
       <div
         id={responseId}
         data-response-id={responseId}
-        className="group/card rounded-xl border border-arena-danger/40 bg-arena-danger/5 overflow-hidden scroll-mt-24 relative"
-        style={{ borderLeftColor: "#f87171", borderLeftWidth: 3 }}
+        className="group/card glass card-result overflow-hidden scroll-mt-32 relative border border-arena-danger/40"
+        style={{ boxShadow: `inset 4px 0 0 0 #f87171, 0 8px 24px -10px rgba(248,113,113,0.18)` }}
       >
         <Header
           modelName={modelName}
@@ -313,8 +337,8 @@ const CompletedResponseCard = memo(function CompletedResponseCard({
     <div
       id={responseId}
       data-response-id={responseId}
-      className="group/card rounded-xl border border-arena-border/60 bg-arena-surface overflow-hidden scroll-mt-24 transition-all hover:border-arena-border relative"
-      style={{ borderLeftColor: personaColor, borderLeftWidth: 3 }}
+      className="group/card glass card-result overflow-hidden scroll-mt-32 transition-colors hover:border-arena-blue/40 relative"
+      style={cardStyle}
     >
       <Header
         modelName={modelName}
@@ -324,18 +348,18 @@ const CompletedResponseCard = memo(function CompletedResponseCard({
         personaEmoji={personaEmoji}
         confidence={confidence}
       />
-      <div className="px-5 py-4 prose prose-invert prose-sm max-w-none text-arena-text/90 leading-[1.75] [&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_li]:my-0.5 [&_h1]:text-[15px] [&_h2]:text-[14px] [&_h3]:text-[13px] [&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-medium [&_code]:text-arena-glow [&_code]:bg-arena-accent/10 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[12px] [&_strong]:text-arena-text [&_strong]:font-semibold">
-        <ReactMarkdown remarkPlugins={remarkPlugins}>{displayContent || "..."}</ReactMarkdown>
+      <div className="px-4 sm:px-6 py-4 sm:py-5 prose prose-invert prose-sm max-w-none text-arena-text/90 leading-[1.78] [&_p]:my-2 [&_ul]:my-2 [&_ol]:my-2 [&_li]:my-0.5 [&_h1]:text-[15px] [&_h2]:text-[14px] [&_h3]:text-[13px] [&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-medium [&_code]:text-arena-glow [&_code]:bg-arena-accent/10 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[12px] [&_strong]:text-arena-text [&_strong]:font-semibold [&_pre]:!my-3 [&_pre]:!overflow-x-auto">
+        <ReactMarkdown remarkPlugins={remarkPlugins}>{displayContent || "…"}</ReactMarkdown>
       </div>
-      {/* Copy button */}
       <button
         onClick={handleCopy}
-        className={`absolute bottom-3 right-3 p-1.5 rounded-md transition-all ${
+        className={`absolute bottom-3 right-3 p-1.5 rounded-lg transition-colors ${
           copied
-            ? "bg-arena-success/15 text-arena-success"
-            : "bg-arena-bg/80 text-arena-muted/40 opacity-0 group-hover/card:opacity-100 hover:text-arena-accent hover:bg-arena-accent/10"
+            ? "bg-arena-success/15 text-arena-success border border-arena-success/35"
+            : "bg-black/55 text-arena-muted/55 opacity-0 group-hover/card:opacity-100 hover:text-arena-glow hover:bg-arena-accent/12 border border-white/[0.08]"
         }`}
         title={copied ? "Copied!" : "Copy to clipboard"}
+        aria-label={copied ? "Copied to clipboard" : "Copy response"}
       >
         {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
       </button>
@@ -344,8 +368,10 @@ const CompletedResponseCard = memo(function CompletedResponseCard({
 });
 
 // ── Streaming Card ─────────────────────────────────────────
+// Memoized so only the participant whose tokens changed re-renders.
+// Stable inline style avoids object churn in the diff tree.
 
-function StreamingCard({
+const StreamingCard = memo(function StreamingCard({
   modelName,
   providerName,
   personaName,
@@ -360,10 +386,17 @@ function StreamingCard({
   personaEmoji: string;
   content: string;
 }) {
+  const cardStyle = useMemo(
+    () => ({
+      boxShadow: `inset 4px 0 0 0 ${personaColor}, 0 0 18px rgba(255,98,0,0.14)`,
+    }),
+    [personaColor],
+  );
+
   return (
     <div
-      className="rounded-xl border border-arena-accent/20 bg-arena-surface overflow-hidden"
-      style={{ borderLeftColor: personaColor, borderLeftWidth: 3 }}
+      className="glass card-streaming overflow-hidden border border-arena-accent/30"
+      style={cardStyle}
     >
       <Header
         modelName={modelName}
@@ -373,13 +406,16 @@ function StreamingCard({
         personaEmoji={personaEmoji}
         streaming
       />
-      <div className="px-5 py-4 text-[13px] text-arena-text/80 whitespace-pre-wrap break-words font-mono leading-[1.75]">
-        {content || "..."}
-        <span className="inline-block w-[6px] h-[14px] bg-arena-accent animate-pulse ml-0.5 align-middle rounded-sm" />
+      <div className="px-4 sm:px-6 py-4 sm:py-5 text-[12.5px] sm:text-[13px] text-arena-text/85 whitespace-pre-wrap break-words font-mono leading-[1.78]">
+        {content || "…"}
+        <span
+          className="inline-block w-[6px] h-[14px] bg-arena-accent ml-0.5 align-middle rounded-sm animate-pulse"
+          aria-hidden
+        />
       </div>
     </div>
   );
-}
+});
 
 // ── Header ─────────────────────────────────────────────────
 
@@ -402,30 +438,47 @@ const Header = memo(function Header({
   streaming?: boolean;
   errored?: boolean;
 }) {
+  const emojiStyle = useMemo(
+    () => ({
+      backgroundColor: `${personaColor}25`,
+      color: personaColor,
+      boxShadow: `0 0 8px ${personaColor}33`,
+    }),
+    [personaColor],
+  );
+  const confidenceStyle = useMemo(
+    () => ({
+      backgroundColor: `${personaColor}18`,
+      color: personaColor,
+      border: `1px solid ${personaColor}35`,
+    }),
+    [personaColor],
+  );
+
   return (
-    <div className="flex items-center gap-2.5 px-5 py-3 border-b border-arena-border/40 bg-arena-bg/30">
+    <div className="flex items-center gap-2.5 px-5 py-3 border-b border-white/[0.05] bg-black/40">
       <span
-        className="w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold"
-        style={{ backgroundColor: `${personaColor}20`, color: personaColor }}
+        className="w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-bold"
+        style={emojiStyle}
       >
         {personaEmoji}
       </span>
       <div className="flex-1 min-w-0">
-        <span className="text-[13px] font-medium text-arena-text">{modelName}</span>
+        <span className="text-[13px] font-semibold text-arena-text">{modelName}</span>
         <span className="text-[11px] text-arena-muted ml-2">
-          {providerName} &middot; {personaName}
+          {providerName} · {personaName}
         </span>
       </div>
       {streaming && <Loader2 className="w-3.5 h-3.5 text-arena-accent animate-spin" />}
       {errored && (
-        <span className="text-[10px] font-mono font-semibold px-2 py-0.5 rounded-md bg-arena-danger/15 text-arena-danger">
+        <span className="text-[10px] font-mono font-semibold px-2 py-0.5 rounded-md bg-arena-danger/15 text-arena-danger border border-arena-danger/30">
           ERROR
         </span>
       )}
       {!errored && confidence != null && (
         <span
-          className="text-[10px] font-mono font-semibold px-2 py-0.5 rounded-md"
-          style={{ backgroundColor: `${personaColor}15`, color: personaColor }}
+          className="text-[10.5px] font-mono font-semibold px-2.5 py-1 rounded-lg"
+          style={confidenceStyle}
         >
           {confidence}%
         </span>
diff --git a/components/SessionMenu.tsx b/components/SessionMenu.tsx
index 0b5eac5..1a91952 100644
--- a/components/SessionMenu.tsx
+++ b/components/SessionMenu.tsx
@@ -3,9 +3,6 @@
 // ─────────────────────────────────────────────────────────────
 // Session Menu — Export & Share dropdown
 // ─────────────────────────────────────────────────────────────
-// Shows up once a run has finished. Lets the user download the
-// session as Markdown/JSON or copy a permalink that rehydrates
-// the run into the read-only viewer.
 
 import { useArenaStore } from "@/lib/store";
 import {
@@ -69,31 +66,31 @@ export default function SessionMenu() {
     <div className="relative" ref={ref}>
       <button
         onClick={() => setOpen((v) => !v)}
-        className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md bg-arena-surface border border-arena-border/60 text-[11px] text-arena-muted hover:text-arena-text hover:border-arena-accent/40 transition-colors"
+        className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg glass-pill text-[11.5px] text-arena-muted hover:text-arena-glow hover:border-arena-accent/40 transition-colors"
       >
         <Share2 className="w-3 h-3" />
         Export
       </button>
       {open && (
-        <div className="absolute right-0 top-full mt-1 w-52 bg-arena-surface border border-arena-border rounded-lg shadow-xl shadow-black/30 overflow-hidden z-50">
+        <div className="absolute right-0 top-full mt-2 w-56 glass-strong rounded-2xl overflow-hidden z-50">
           <button
             onClick={handleMarkdown}
-            className="w-full flex items-center gap-2 px-3 py-2.5 text-[11px] text-arena-text hover:bg-arena-accent/5"
+            className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[11.5px] text-arena-text hover:bg-white/[0.04] transition-colors"
           >
             <FileText className="w-3.5 h-3.5 text-arena-accent" />
             <span className="flex-1 text-left">Download Markdown</span>
           </button>
           <button
             onClick={handleJSON}
-            className="w-full flex items-center gap-2 px-3 py-2.5 text-[11px] text-arena-text hover:bg-arena-accent/5"
+            className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[11.5px] text-arena-text hover:bg-white/[0.04] transition-colors"
           >
             <FileJson className="w-3.5 h-3.5 text-arena-accent" />
             <span className="flex-1 text-left">Download JSON</span>
           </button>
-          <div className="h-px bg-arena-border/40" />
+          <div className="h-px bg-white/[0.05]" />
           <button
             onClick={handleLink}
-            className="w-full flex items-center gap-2 px-3 py-2.5 text-[11px] text-arena-text hover:bg-arena-accent/5"
+            className="w-full flex items-center gap-2.5 px-3.5 py-2.5 text-[11.5px] text-arena-text hover:bg-white/[0.04] transition-colors"
           >
             {copied ? (
               <Check className="w-3.5 h-3.5 text-arena-success" />
@@ -124,7 +121,7 @@ export function DownloadIconButton() {
   return (
     <button
       onClick={handleClick}
-      className="p-1.5 rounded-md bg-arena-surface border border-arena-border/60 text-arena-muted hover:text-arena-text transition-colors"
+      className="p-1.5 rounded-lg glass-pill text-arena-muted hover:text-arena-glow transition-colors"
       title="Download as Markdown"
     >
       <Download className="w-3 h-3" />
diff --git a/public/background.jpg b/public/background.jpg
new file mode 100644
index 0000000..268e0a5
Binary files /dev/null and b/public/background.jpg differ
diff --git a/screenshots/newscreenshot.png b/screenshots/newscreenshot.png
deleted file mode 100644
index 66ffd86..0000000
Binary files a/screenshots/newscreenshot.png and /dev/null differ
diff --git a/screenshots/screenshot.jpeg b/screenshots/screenshot.jpeg
new file mode 100644
index 0000000..340f363
Binary files /dev/null and b/screenshots/screenshot.jpeg differ
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3c6cfe6..a79b772 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,24 +7,92 @@ const config: Config = {
     extend: {
       colors: {
         arena: {
-          bg: "#0f172a",
-          surface: "#1e2937",
-          border: "#334155",
-          accent: "#60a5fa",
-          glow: "#93c5fd",
+          bg: "#02070F",
+          surface: "rgba(8, 20, 44, 0.55)",
+          "surface-solid": "#06112A",
+          border: "rgba(77, 122, 199, 0.22)",
+          "border-strong": "rgba(77, 122, 199, 0.45)",
+          accent: "#FF6200",
+          glow: "#FF9A4D",
+          blue: "#4D7AC7",
+          "blue-deep": "#003087",
           success: "#34d399",
           warning: "#fbbf24",
           danger: "#f87171",
-          muted: "#94a3b8",
-          text: "#f1f5f9",
+          muted: "#8B9CB8",
+          text: "#F1F5FF",
         },
       },
       fontFamily: {
         mono: ["JetBrains Mono", "Fira Code", "monospace"],
+        sans: [
+          "Inter",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "system-ui",
+          "sans-serif",
+        ],
+      },
+      backdropBlur: {
+        xs: "2px",
+      },
+      boxShadow: {
+        glass:
+          "0 8px 32px 0 rgba(0, 0, 0, 0.45), 0 2px 8px 0 rgba(0, 48, 135, 0.18), inset 0 1px 0 0 rgba(255, 255, 255, 0.04)",
+        "glass-lg":
+          "0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 12px 24px -8px rgba(0, 48, 135, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)",
+        "glass-xl":
+          "0 40px 80px -20px rgba(0, 0, 0, 0.65), 0 20px 40px -10px rgba(0, 48, 135, 0.32), inset 0 1px 0 0 rgba(255, 255, 255, 0.06)",
+        "glow-orange": "0 0 24px 0 rgba(255, 98, 0, 0.35), 0 0 48px 0 rgba(255, 98, 0, 0.18)",
+        "glow-orange-sm": "0 0 12px 0 rgba(255, 98, 0, 0.4)",
+        "glow-blue": "0 0 24px 0 rgba(77, 122, 199, 0.3), 0 0 48px 0 rgba(77, 122, 199, 0.15)",
+        "inner-glow":
+          "inset 0 1px 0 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(77, 122, 199, 0.18)",
       },
       animation: {
         "pulse-slow": "pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite",
         "spin-slow": "spin 20s linear infinite",
+        "spin-slower": "spin 40s linear infinite",
+        "float-1": "float1 18s ease-in-out infinite",
+        "float-2": "float2 22s ease-in-out infinite",
+        "float-3": "float3 26s ease-in-out infinite",
+        "ray-sweep": "raySweep 24s linear infinite",
+        "ray-sweep-2": "raySweep 32s linear infinite reverse",
+        "glow-pulse": "glowPulse 4s ease-in-out infinite",
+        shimmer: "shimmer 3s linear infinite",
+        "node-pulse": "nodePulse 3.5s ease-in-out infinite",
+      },
+      keyframes: {
+        float1: {
+          "0%,100%": { transform: "translate(0,0)" },
+          "50%": { transform: "translate(30px, -22px)" },
+        },
+        float2: {
+          "0%,100%": { transform: "translate(0,0)" },
+          "50%": { transform: "translate(-26px, 30px)" },
+        },
+        float3: {
+          "0%,100%": { transform: "translate(0,0)" },
+          "50%": { transform: "translate(18px, 26px)" },
+        },
+        raySweep: {
+          "0%": { transform: "translateX(-15%) rotate(-8deg)", opacity: "0.4" },
+          "50%": { opacity: "0.85" },
+          "100%": { transform: "translateX(15%) rotate(-8deg)", opacity: "0.4" },
+        },
+        glowPulse: {
+          "0%,100%": { opacity: "0.55", filter: "blur(20px)" },
+          "50%": { opacity: "0.95", filter: "blur(28px)" },
+        },
+        shimmer: {
+          "0%": { backgroundPosition: "-200% 0" },
+          "100%": { backgroundPosition: "200% 0" },
+        },
+        nodePulse: {
+          "0%,100%": { opacity: "0.7", transform: "scale(1)" },
+          "50%": { opacity: "1", transform: "scale(1.08)" },
+        },
       },
     },
   },
diff --git a/tests/ai-selector-extended.test.tsx b/tests/ai-selector-extended.test.tsx
index a6959bc..131f1a2 100644
--- a/tests/ai-selector-extended.test.tsx
+++ b/tests/ai-selector-extended.test.tsx
@@ -32,7 +32,7 @@ describe("AISelector — portal dropdowns", () => {
     render(<AISelector />);
 
     // Open dropdown
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
 
     // Click Solo provider (1 model — should select directly)
     fireEvent.click(screen.getByText("Solo"));
@@ -46,7 +46,7 @@ describe("AISelector — portal dropdowns", () => {
     const { default: AISelector } = await import("@/components/AISelector");
     render(<AISelector />);
 
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
 
     // Hover over Prov (2 models)
     fireEvent.mouseEnter(screen.getByText("Prov"));
@@ -77,14 +77,15 @@ describe("AISelector — portal dropdowns", () => {
     render(<AISelector />);
 
     // Select a model first
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     fireEvent.click(screen.getByText("Solo")); // single model, selects directly
 
     // Click add
-    fireEvent.click(screen.getByText("Add to Arena"));
+    fireEvent.click(screen.getByText("Seat at the Table"));
 
     expect(useArenaStore.getState().participants).toHaveLength(1);
-    expect(screen.getByText("Participants (1)")).toBeInTheDocument();
+    expect(screen.getByText("Participants")).toBeInTheDocument();
+    expect(screen.getByText("1")).toBeInTheDocument();
   });
 
   it("changes participant model via inline select", async () => {
@@ -132,7 +133,7 @@ describe("AISelector — portal dropdowns", () => {
     render(<AISelector />);
 
     // Open model dropdown
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     expect(screen.getByText("Providers")).toBeInTheDocument();
 
     // Click outside (on document body)
@@ -145,7 +146,7 @@ describe("AISelector — portal dropdowns", () => {
     const { default: AISelector } = await import("@/components/AISelector");
     render(<AISelector />);
 
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     fireEvent.mouseEnter(screen.getByText("Prov"));
 
     // The star icon should be present for the preferred model
diff --git a/tests/components-extended.test.tsx b/tests/components-extended.test.tsx
index 3adf953..e4c26b3 100644
--- a/tests/components-extended.test.tsx
+++ b/tests/components-extended.test.tsx
@@ -44,7 +44,7 @@ describe("AISelector — interactions", () => {
     const { default: AISelector } = await import("@/components/AISelector");
     render(<AISelector />);
 
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     expect(screen.getByText("Providers")).toBeInTheDocument();
   });
 
@@ -52,7 +52,7 @@ describe("AISelector — interactions", () => {
     const { default: AISelector } = await import("@/components/AISelector");
     render(<AISelector />);
 
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     expect(screen.getByText("Prov")).toBeInTheDocument();
     expect(screen.getByText("Other")).toBeInTheDocument();
   });
@@ -87,7 +87,7 @@ describe("AISelector — interactions", () => {
     const { default: AISelector } = await import("@/components/AISelector");
     render(<AISelector />);
 
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     expect(screen.getByText("Providers")).toBeInTheDocument();
 
     fireEvent.keyDown(document, { key: "Escape" });
@@ -100,7 +100,7 @@ describe("AISelector — interactions", () => {
     useArenaStore.setState({ isRunning: true });
 
     render(<AISelector />);
-    const addBtn = screen.getByText("Add to Arena").closest("button");
+    const addBtn = screen.getByText("Seat at the Table").closest("button");
     expect(addBtn).toBeDisabled();
   });
 
@@ -108,7 +108,7 @@ describe("AISelector — interactions", () => {
     const { default: AISelector } = await import("@/components/AISelector");
     render(<AISelector />);
 
-    fireEvent.click(screen.getByText("Select model..."));
+    fireEvent.click(screen.getByText("Select a model…"));
     expect(screen.getByText("2 models")).toBeInTheDocument(); // prov has 2
     expect(screen.getByText("1 model")).toBeInTheDocument(); // other has 1
   });
diff --git a/tests/components.test.tsx b/tests/components.test.tsx
index e8d7efe..e1ff65f 100644
--- a/tests/components.test.tsx
+++ b/tests/components.test.tsx
@@ -197,7 +197,7 @@ describe("AISelector", () => {
     useArenaStore.setState({ modelsLoading: true });
 
     render(<AISelector />);
-    expect(screen.getByText("Fetching providers...")).toBeInTheDocument();
+    expect(screen.getByText("Fetching providers…")).toBeInTheDocument();
   });
 
   it("shows error when no models available", async () => {
@@ -212,15 +212,15 @@ describe("AISelector", () => {
     const { default: AISelector } = await import("@/components/AISelector");
 
     render(<AISelector />);
-    expect(screen.getByText("Select model...")).toBeInTheDocument();
-    expect(screen.getByText("Add to Arena")).toBeInTheDocument();
+    expect(screen.getByText("Select a model…")).toBeInTheDocument();
+    expect(screen.getByText("Seat at the Table")).toBeInTheDocument();
   });
 
   it("add button is disabled without model selection", async () => {
     const { default: AISelector } = await import("@/components/AISelector");
 
     render(<AISelector />);
-    const addBtn = screen.getByText("Add to Arena").closest("button");
+    const addBtn = screen.getByText("Seat at the Table").closest("button");
     expect(addBtn).toBeDisabled();
   });
 
@@ -231,6 +231,7 @@ describe("AISelector", () => {
     useArenaStore.getState().addParticipant(mockModel2, PERSONAS[1]);
 
     render(<AISelector />);
-    expect(screen.getByText("Participants (2)")).toBeInTheDocument();
+    expect(screen.getByText("Participants")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
   });
 });
diff --git a/tests/new-components.test.tsx b/tests/new-components.test.tsx
index bce378e..3125bcb 100644
--- a/tests/new-components.test.tsx
+++ b/tests/new-components.test.tsx
@@ -101,8 +101,13 @@ describe("ConfidenceTrajectory", () => {
 
     const { default: Comp } = await import("@/components/ConfidenceTrajectory");
     const { container } = render(<Comp />);
-    const paths = container.querySelectorAll("path");
-    expect(paths.length).toBe(2);
+    // Scope to the chart SVG so we don't count paths from the
+    // hero illustration that sits above the chart.
+    const chart = container.querySelector('svg[aria-label="Confidence trajectory chart"]');
+    expect(chart).not.toBeNull();
+    // 2 paths per participant (glow underlay + main line) × 2 participants.
+    const paths = chart!.querySelectorAll("path");
+    expect(paths.length).toBe(4);
     expect(screen.getByText("Confidence Trajectory")).toBeInTheDocument();
   });
 
@@ -211,7 +216,7 @@ describe("CostMeter", () => {
     const { default: Comp } = await import("@/components/CostMeter");
     render(<Comp />);
     expect(screen.getByText("$0.01")).toBeInTheDocument();
-    expect(screen.getByText(/2.0K tokens/)).toBeInTheDocument();
+    expect(screen.getByText(/2\.0K tok/)).toBeInTheDocument();
   });
 
   it("shows 4-decimal precision for sub-cent totals", async () => {
@@ -240,7 +245,7 @@ describe("CostMeter", () => {
     const { default: Comp } = await import("@/components/CostMeter");
     render(<Comp />);
     expect(screen.getByText("$1.23")).toBeInTheDocument();
-    expect(screen.getByText(/2.00M tokens/)).toBeInTheDocument();
+    expect(screen.getByText(/2\.00M tok/)).toBeInTheDocument();
   });
 
   it("shows running state even with zero tokens", async () => {
diff --git a/tests/page.test.tsx b/tests/page.test.tsx
index 86465df..662dc45 100644
--- a/tests/page.test.tsx
+++ b/tests/page.test.tsx
@@ -78,16 +78,16 @@ describe("HomePage", () => {
   it("shows onboarding overlay on first visit", async () => {
     const { default: HomePage } = await import("@/app/page");
     render(<HomePage />);
-    expect(screen.getByText("Add Participants to Begin")).toBeInTheDocument();
+    expect(screen.getByText("Convene the RoundTable")).toBeInTheDocument();
   });
 
   it("dismisses onboarding on click", async () => {
     const { default: HomePage } = await import("@/app/page");
     render(<HomePage />);
-    const overlay = screen.getByText("Add Participants to Begin").closest("[class*='fixed']");
+    const overlay = screen.getByText("Convene the RoundTable").closest("[class*='fixed']");
     if (overlay) fireEvent.click(overlay);
     await waitFor(() => {
-      expect(screen.queryByText("Add Participants to Begin")).not.toBeInTheDocument();
+      expect(screen.queryByText("Convene the RoundTable")).not.toBeInTheDocument();
     });
   });
 
@@ -137,7 +137,8 @@ describe("HomePage", () => {
     useArenaStore.setState({ finalScore: 88 });
     render(<HomePage />);
 
-    expect(screen.getByText("Final Consensus: 88%")).toBeInTheDocument();
+    expect(screen.getByText("Final Consensus")).toBeInTheDocument();
+    expect(screen.getByText("88%")).toBeInTheDocument();
   });
 
   it("fetches providers on mount", async () => {
@@ -161,7 +162,7 @@ describe("HomePage", () => {
   it("shows askgrokmcp link in header", async () => {
     const { default: HomePage } = await import("@/app/page");
     render(<HomePage />);
-    const link = screen.getByText("Protocol inspired by askgrokmcp");
+    const link = screen.getByText(/Protocol inspired by askgrokmcp/);
     expect(link).toHaveAttribute("href", "https://github.com/marceloceccon/askgrokmcp");
   });
 
@@ -176,6 +177,6 @@ describe("HomePage", () => {
     const { default: HomePage } = await import("@/app/page");
     useArenaStore.setState({ finalScore: 90 });
     render(<HomePage />);
-    expect(screen.getByText("Reset")).toBeInTheDocument();
+    expect(screen.getByText(/Reset session/)).toBeInTheDocument();
   });
 });