diff --git a/frontend/index.html b/frontend/index.html
index 3c415c2..1a51cb8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,10 +8,12 @@
     <meta name="theme-color" content="#09090b" />
     <meta name="mobile-web-app-capable" content="yes" />
     <title>UMBRA</title>
+    <!-- Static style tag — survives Vite's head cleanup (unlike dynamically created elements).
+         The inline script below populates it with accent color from localStorage cache. -->
+    <style id="umbra-accent"></style>
     <script>
-      // Inject a <style> tag with !important accent color vars.
-      // Inline style attr gets stripped during page load (unknown cause),
-      // but a <style> tag with !important persists and beats @layer base defaults.
+      // Populate the static style tag with cached accent color before first paint.
+      // Uses textContent (safe from XSS) and !important (beats @layer base defaults).
       (function() {
         var h = '187', s = '85.7%', l = '53.3%';
         try {
@@ -23,10 +25,8 @@
             if (p.l) l = p.l;
           }
         } catch(e) {}
-        var el = document.createElement('style');
-        el.id = 'umbra-accent';
-        el.textContent = ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
-        document.head.appendChild(el);
+        document.getElementById('umbra-accent').textContent =
+          ':root{--accent-h:' + h + ' !important;--accent-s:' + s + ' !important;--accent-l:' + l + ' !important}';
       })();
     </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />