diff --git a/packages/client/index.html b/packages/client/index.html
index 46bfb0a..b979379 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -6,7 +6,7 @@
   <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
   <link rel="apple-touch-icon" href="/logo.png" />
   <link rel="manifest" href="/manifest.webmanifest" />
-  <meta name="theme-color" content="#f7f7f4" />
+  <meta name="theme-color" content="#1a1d23" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-title" content="hermes-ui" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,25 +20,17 @@
 
     body {
       margin: 0;
-      background: #f7f7f4;
-    }
-
-    html.dark body {
-      background: #1a1a1a;
+      background: oklch(0.155 0.012 250);
     }
 
     .boot-fallback {
       min-height: 100vh;
       display: grid;
       place-items: center;
-      color: #222222;
+      color: oklch(0.945 0.006 200);
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
     }
 
-    html.dark .boot-fallback {
-      color: #f0f0f0;
-    }
-
     .boot-fallback__logo-wrap {
       position: relative;
       display: block;
@@ -52,7 +44,7 @@
       content: "";
       position: absolute;
       inset: 0;
-      background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%);
+      background: linear-gradient(105deg, transparent 30%, rgba(45, 212, 191, 0.55) 48%, transparent 66%);
       transform: translateX(-140%);
       mix-blend-mode: screen;
       pointer-events: none;
@@ -80,33 +72,9 @@
     }
   </style>
 
-  <!-- Prevent FOUC by applying theme classes immediately -->
+  <!-- CYBER is a single dark theme: pin Arco's dark tokens before first paint -->
   <script>
-    (function() {
-      try {
-        const brightness = localStorage.getItem('hermes_brightness') || 'system';
-        const style = localStorage.getItem('hermes_style') || 'ink';
-
-        // Resolve dark mode
-        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        const isDark = brightness === 'dark' || (brightness === 'system' && prefersDark);
-
-        // Resolve comic style
-        const isComic = style === 'comic';
-
-        // Apply classes immediately
-        if (isDark) {
-          document.documentElement.classList.add('dark');
-        }
-        if (isComic) {
-          document.documentElement.classList.add('comic');
-        }
-        // Arco Design dark theme mechanism (Phase 005)
-        document.documentElement.setAttribute('arco-theme', isDark ? 'dark' : 'light');
-      } catch (e) {
-        console.warn('Failed to apply theme:', e);
-      }
-    })();
+    document.documentElement.setAttribute('arco-theme', 'dark');
   </script>
 </head>