diff --git a/website/src/styles/globals.css b/website/src/styles/globals.css
index 7ba0a5f..91449c8 100644
--- a/website/src/styles/globals.css
+++ b/website/src/styles/globals.css
@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @plugin "@tailwindcss/typography";
 
@@ -38,7 +38,7 @@
     --sidebar-border: oklch(0.92 0.004 286.32);
     --sidebar-ring: oklch(0.871 0.006 286.286);
 }
-.dark {
+@variant dark {
     --background: oklch(0.21 0.006 285.885);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.21 0.006 285.885);
diff --git a/website/src/styles/liveline-prism.css b/website/src/styles/liveline-prism.css
index f1df927..a14305a 100644
--- a/website/src/styles/liveline-prism.css
+++ b/website/src/styles/liveline-prism.css
@@ -135,92 +135,96 @@ pre[class*="language-"] {
 }
 
 /* ======================================================================
-   Dark mode - GitHub Dark inspired palette
+   Dark mode - GitHub Dark inspired palette.
+   Uses @variant dark so it follows whatever strategy is configured
+   in @custom-variant dark (globals.css).
    ====================================================================== */
 
-.dark code[class*="language-"],
-.dark pre[class*="language-"] {
-  color: #e6edf3;
-}
+@variant dark {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #e6edf3;
+  }
 
-.dark .token.keyword,
-.dark .token.module,
-.dark .token.imports,
-.dark .token.control-flow {
-  color: #ff7b72;
-}
+  .token.keyword,
+  .token.module,
+  .token.imports,
+  .token.control-flow {
+    color: #ff7b72;
+  }
 
-.dark .token.string,
-.dark .token.template-string,
-.dark .token.attr-value {
-  color: #a5d6ff;
-}
+  .token.string,
+  .token.template-string,
+  .token.attr-value {
+    color: #a5d6ff;
+  }
 
-.dark .token.function,
-.dark .token.class-name {
-  color: #d2a8ff;
-}
+  .token.function,
+  .token.class-name {
+    color: #d2a8ff;
+  }
 
-.dark .token.property,
-.dark .token.parameter {
-  color: #ffa657;
-}
+  .token.property,
+  .token.parameter {
+    color: #ffa657;
+  }
 
-.dark .token.tag .token.tag {
-  color: #7ee787;
-}
+  .token.tag .token.tag {
+    color: #7ee787;
+  }
 
-.dark .token.tag .token.class-name {
-  color: #7ee787;
-}
+  .token.tag .token.class-name {
+    color: #7ee787;
+  }
 
-.dark .token.tag .token.attr-name,
-.dark .token.attr-name {
-  color: #79c0ff;
-}
+  .token.tag .token.attr-name,
+  .token.attr-name {
+    color: #79c0ff;
+  }
 
-.dark .token.number {
-  color: #79c0ff;
-}
+  .token.number {
+    color: #79c0ff;
+  }
 
-.dark .token.operator {
-  color: #ff7b72;
-}
+  .token.operator {
+    color: #ff7b72;
+  }
 
-.dark .token.punctuation {
-  color: #e6edf3;
-}
+  .token.punctuation {
+    color: #e6edf3;
+  }
 
-.dark .token.boolean,
-.dark .token.constant,
-.dark .token.builtin {
-  color: #79c0ff;
-}
+  .token.boolean,
+  .token.constant,
+  .token.builtin {
+    color: #79c0ff;
+  }
 
-.dark .token.comment,
-.dark .token.prolog,
-.dark .token.doctype,
-.dark .token.cdata {
-  color: #8b949e;
-  font-style: italic;
-}
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #8b949e;
+    font-style: italic;
+  }
 
-.dark .token.tag .token.punctuation {
-  color: #e6edf3;
-}
+  .token.tag .token.punctuation {
+    color: #e6edf3;
+  }
 
-.dark .token.spread {
-  color: #ff7b72;
-}
+  .token.spread {
+    color: #ff7b72;
+  }
 
-.dark .token.plain-text {
-  color: #e6edf3;
-}
+  .token.plain-text {
+    color: #e6edf3;
+  }
 
-.dark .token.regex {
-  color: #a5d6ff;
-}
+  .token.regex {
+    color: #a5d6ff;
+  }
 
-.dark .language-bash .token.function {
-  color: #79c0ff;
+  .language-bash .token.function {
+    color: #79c0ff;
+  }
 }
diff --git a/website/src/styles/liveline.css b/website/src/styles/liveline.css
index 525b6e6..9f902ba 100644
--- a/website/src/styles/liveline.css
+++ b/website/src/styles/liveline.css
@@ -96,51 +96,54 @@
   --ll-fade-12: rgba(255, 255, 255, 0);
 }
 
-/* Dark mode overrides */
-.dark .liveline-page {
-  --ll-text-primary: rgba(255, 255, 255, 0.9);
-  --ll-text-secondary: rgba(255, 255, 255, 0.45);
-  --ll-text-tertiary: rgba(255, 255, 255, 0.25);
-  --ll-text-muted: rgba(255, 255, 255, 0.35);
-  --ll-text-hover: rgba(255, 255, 255, 0.7);
-  --ll-bg: rgb(17, 17, 17);
-  --ll-border: rgba(255, 255, 255, 0.1);
-  --ll-divider: rgba(255, 255, 255, 0.06);
-  --ll-code-bg: rgba(255, 255, 255, 0.05);
-  --ll-code-line-nr: rgba(255, 255, 255, 0.15);
-  --ll-selection-bg: rgba(255, 255, 255, 0.1);
+/* Dark mode overrides — uses @variant dark so it follows whatever
+   strategy is configured in @custom-variant dark (globals.css) */
+@variant dark {
+  .liveline-page {
+    --ll-text-primary: rgba(255, 255, 255, 0.9);
+    --ll-text-secondary: rgba(255, 255, 255, 0.45);
+    --ll-text-tertiary: rgba(255, 255, 255, 0.25);
+    --ll-text-muted: rgba(255, 255, 255, 0.35);
+    --ll-text-hover: rgba(255, 255, 255, 0.7);
+    --ll-bg: rgb(17, 17, 17);
+    --ll-border: rgba(255, 255, 255, 0.1);
+    --ll-divider: rgba(255, 255, 255, 0.06);
+    --ll-code-bg: rgba(255, 255, 255, 0.05);
+    --ll-code-line-nr: rgba(255, 255, 255, 0.15);
+    --ll-selection-bg: rgba(255, 255, 255, 0.1);
 
-  --ll-btn-bg: rgb(30, 30, 30);
-  --ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
-    rgba(255, 255, 255, 0.02) 0px 4px 16px,
-    rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
+    --ll-btn-bg: rgb(30, 30, 30);
+    --ll-btn-shadow: rgba(255, 255, 255, 0.05) 0px 2px 8px,
+      rgba(255, 255, 255, 0.02) 0px 4px 16px,
+      rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
 
-  --ll-primary: #60a5fa;
-  --ll-secondary: #f5a623;
+    --ll-primary: #60a5fa;
+    --ll-secondary: #f5a623;
 
-  --ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
-  --ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
-    0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
-    0 1rem 2rem rgba(0, 0, 0, 0.2),
-    0 0.625rem 1rem rgba(0, 0, 0, 0.15),
-    0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
-    0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
-    0 0 0.125rem rgba(0, 0, 0, 0.05);
+    --ll-overlay-bg: hsla(0, 0%, 7%, 0.8);
+    --ll-overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
+      0 1.625rem 3.375rem rgba(0, 0, 0, 0.3),
+      0 1rem 2rem rgba(0, 0, 0, 0.2),
+      0 0.625rem 1rem rgba(0, 0, 0, 0.15),
+      0 0.3125rem 0.5rem rgba(0, 0, 0, 0.1),
+      0 0.125rem 0.25rem rgba(0, 0, 0, 0.08),
+      0 0 0.125rem rgba(0, 0, 0, 0.05);
 
-  /* Header fade gradient stops (dark) */
-  --ll-fade-0: rgb(17, 17, 17);
-  --ll-fade-1: rgba(17, 17, 17, 0.737);
-  --ll-fade-2: rgba(17, 17, 17, 0.541);
-  --ll-fade-3: rgba(17, 17, 17, 0.382);
-  --ll-fade-4: rgba(17, 17, 17, 0.278);
-  --ll-fade-5: rgba(17, 17, 17, 0.194);
-  --ll-fade-6: rgba(17, 17, 17, 0.126);
-  --ll-fade-7: rgba(17, 17, 17, 0.075);
-  --ll-fade-8: rgba(17, 17, 17, 0.042);
-  --ll-fade-9: rgba(17, 17, 17, 0.021);
-  --ll-fade-10: rgba(17, 17, 17, 0.008);
-  --ll-fade-11: rgba(17, 17, 17, 0.002);
-  --ll-fade-12: rgba(17, 17, 17, 0);
+    /* Header fade gradient stops (dark) */
+    --ll-fade-0: rgb(17, 17, 17);
+    --ll-fade-1: rgba(17, 17, 17, 0.737);
+    --ll-fade-2: rgba(17, 17, 17, 0.541);
+    --ll-fade-3: rgba(17, 17, 17, 0.382);
+    --ll-fade-4: rgba(17, 17, 17, 0.278);
+    --ll-fade-5: rgba(17, 17, 17, 0.194);
+    --ll-fade-6: rgba(17, 17, 17, 0.126);
+    --ll-fade-7: rgba(17, 17, 17, 0.075);
+    --ll-fade-8: rgba(17, 17, 17, 0.042);
+    --ll-fade-9: rgba(17, 17, 17, 0.021);
+    --ll-fade-10: rgba(17, 17, 17, 0.008);
+    --ll-fade-11: rgba(17, 17, 17, 0.002);
+    --ll-fade-12: rgba(17, 17, 17, 0);
+  }
 }
 
 @supports (color: color(display-p3 1 1 1)) {