diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52c426a..90bb54f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@
 - Scoped Sidebar navigation styles to the sidebar's direct child `nav` (`.sidebar > nav`), so other `nav` elements inside a sidebar, such as a Tabs list, are no longer fixed and stacked.
 - Stopped Dialogs and Command Dialogs from closing when a press starts inside the dialog and the drag ends on the backdrop. Updated the Nunjucks and Jinja templates and the docs examples. Based on [#104](https://github.com/hunvreus/basecoat/pull/104) by [@PhilipdeRijk](https://github.com/PhilipdeRijk).
 - Fixed iOS auto-zoom when tapping the Combobox input, the Combobox chips input, the Command search input, native Selects, and Input Group inputs and textareas by using `text-base` below the `md` breakpoint, like regular inputs. The compact Lyra and Mira styles keep their smaller sizes.
+- Fixed Slider thumb hover and focus rings, the RTL Sidebar submenu chevron, and some dark mode and tooltip arrow styles not applying in the unminified CDN files, because the rules were nested under pseudo-elements.
 - Stopped the Toast docs example from pushing its fragment URL into the browser history with HTMX.
 - Replaced the `.form` migration snippet in the 1.0.0 notes, which fails in Tailwind v4, with markup that works.
 
diff --git a/src/css/components/sidebar.css b/src/css/components/sidebar.css
index 63dcb1d..a565115 100644
--- a/src/css/components/sidebar.css
+++ b/src/css/components/sidebar.css
@@ -79,7 +79,10 @@
               &:not([open]) {
                 > summary {
                   &::after {
-                    @apply -rotate-90 rtl:rotate-90;
+                    @apply -rotate-90;
+                  }
+                  &:where(:dir(rtl), [dir='rtl'], [dir='rtl'] *)::after {
+                    @apply rotate-90;
                   }
                 }
               }
diff --git a/src/css/styles/luma.css b/src/css/styles/luma.css
index 998080b..283311a 100644
--- a/src/css/styles/luma.css
+++ b/src/css/styles/luma.css
@@ -791,7 +791,11 @@
   }
 
   :is(.field > input[type='radio'], .input[type='radio']):checked:before {
-    @apply bg-primary-foreground size-2 dark:size-2.5;
+    @apply bg-primary-foreground size-2;
+  }
+
+  html.dark :is(.field > input[type='radio'], .input[type='radio']):checked:before {
+    @apply size-2.5;
   }
 
   /* Switch */
@@ -809,7 +813,11 @@
   }
 
   :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
-    @apply bg-background rounded-full shadow-sm not-dark:bg-clip-padding;
+    @apply bg-background rounded-full shadow-sm;
+  }
+
+  html:not(.dark) :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
+    @apply bg-clip-padding;
   }
 
   html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
@@ -1332,7 +1340,15 @@
   }
 
   [data-tooltip][data-arrow]::after {
-    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
+  }
+
+  [data-tooltip][data-arrow][data-side='left']::after {
+    @apply translate-x-[-1.5px];
+  }
+
+  [data-tooltip][data-arrow][data-side='right']::after {
+    @apply translate-x-[1.5px];
   }
 
   /* Toast */
@@ -1366,15 +1382,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color] hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 h-4 w-6 rounded-full bg-white shadow-md transition-[color,box-shadow,background-color];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
+    @apply bg-clip-padding;
+  }
+
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
   }
 
 }
diff --git a/src/css/styles/lyra.css b/src/css/styles/lyra.css
index 07352ea..941f759 100644
--- a/src/css/styles/lyra.css
+++ b/src/css/styles/lyra.css
@@ -1365,15 +1365,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] hover:ring-1 focus-visible:ring-1 active:ring-1 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] hover:ring-1 focus-visible:ring-1 active:ring-1 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] hover:ring-1 focus-visible:ring-1 active:ring-1 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-1;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-1;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-1;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-1 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-1 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-1 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+    @apply ring-1;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+    @apply ring-1;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-ms-thumb {
+    @apply ring-1;
   }
 
 }
diff --git a/src/css/styles/maia.css b/src/css/styles/maia.css
index f0a4659..0ac2219 100644
--- a/src/css/styles/maia.css
+++ b/src/css/styles/maia.css
@@ -1320,7 +1320,15 @@
   }
 
   [data-tooltip][data-arrow]::after {
-    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
+  }
+
+  [data-tooltip][data-arrow][data-side='left']::after {
+    @apply translate-x-[-1.5px];
+  }
+
+  [data-tooltip][data-arrow][data-side='right']::after {
+    @apply translate-x-[1.5px];
   }
 
   /* Toast */
@@ -1354,15 +1362,42 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors;
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors;
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 outline-hidden;
   }
 
 }
diff --git a/src/css/styles/mira.css b/src/css/styles/mira.css
index 34926bf..a5f487a 100644
--- a/src/css/styles/mira.css
+++ b/src/css/styles/mira.css
@@ -1359,15 +1359,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 active:ring-2 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 active:ring-2 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow] hover:ring-2 focus-visible:ring-2 active:ring-2 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/30 relative size-3 rounded-md border bg-white transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-2;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-2;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-2;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-2 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-2 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-2 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+    @apply ring-2;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+    @apply ring-2;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-ms-thumb {
+    @apply ring-2;
   }
 
 }
diff --git a/src/css/styles/nova.css b/src/css/styles/nova.css
index 7e09e8f..0ad2472 100644
--- a/src/css/styles/nova.css
+++ b/src/css/styles/nova.css
@@ -1377,15 +1377,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] hover:ring-3 focus-visible:ring-3 active:ring-3 focus-visible:outline-hidden;
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-3;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-3;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-3;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-3 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-3 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-3 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-webkit-slider-thumb {
+    @apply ring-3;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-moz-range-thumb {
+    @apply ring-3;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):active::-ms-thumb {
+    @apply ring-3;
   }
 
 }
diff --git a/src/css/styles/rhea.css b/src/css/styles/rhea.css
index 968adef..5d59685 100644
--- a/src/css/styles/rhea.css
+++ b/src/css/styles/rhea.css
@@ -791,7 +791,11 @@
   }
 
   :is(.field > input[type='radio'], .input[type='radio']):checked:before {
-    @apply bg-primary-foreground size-2 dark:size-2.5;
+    @apply bg-primary-foreground size-2;
+  }
+
+  html.dark :is(.field > input[type='radio'], .input[type='radio']):checked:before {
+    @apply size-2.5;
   }
 
   /* Switch */
@@ -809,7 +813,11 @@
   }
 
   :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
-    @apply bg-background rounded-2xl shadow-sm not-dark:bg-clip-padding;
+    @apply bg-background rounded-2xl shadow-sm;
+  }
+
+  html:not(.dark) :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):before {
+    @apply bg-clip-padding;
   }
 
   html.dark :is(.field > input[type='checkbox'][role='switch'], .input[type='checkbox'][role='switch']):not(:checked):before {
@@ -1337,7 +1345,15 @@
   }
 
   [data-tooltip][data-arrow]::after {
-    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply bg-foreground absolute z-[60] size-2.5 rotate-45 rounded-[2px];
+  }
+
+  [data-tooltip][data-arrow][data-side='left']::after {
+    @apply translate-x-[-1.5px];
+  }
+
+  [data-tooltip][data-arrow][data-side='right']::after {
+    @apply translate-x-[1.5px];
   }
 
   /* Toast */
@@ -1371,15 +1387,54 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200;
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply ring-black/10 not-dark:bg-clip-padding ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200 hover:ring-4 hover:ring-ring/30 focus-visible:ring-4 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply ring-black/10 ring-1 size-4 rounded-2xl bg-white shadow-md transition-[color,box-shadow] duration-200;
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
+    @apply bg-clip-padding;
+  }
+
+  html:not(.dark) :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
+    @apply bg-clip-padding;
+  }
+
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4 ring-ring/30;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 ring-ring/30 outline-hidden;
   }
 
 }
diff --git a/src/css/styles/sera.css b/src/css/styles/sera.css
index 80867dc..3cb13fe 100644
--- a/src/css/styles/sera.css
+++ b/src/css/styles/sera.css
@@ -1387,15 +1387,42 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply size-3 border-none bg-primary transition-colors -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply size-3 border-none bg-primary transition-colors;
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply size-3 border-none bg-primary transition-colors hover:ring-2 hover:ring-ring/30 focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-hidden;
+    @apply size-3 border-none bg-primary transition-colors;
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-2 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-2 ring-ring/30;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-2 ring-ring/30;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-2 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-2 ring-ring/30 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-2 ring-ring/30 outline-hidden;
   }
 
 }
diff --git a/src/css/styles/vega.css b/src/css/styles/vega.css
index fa6f661..b50b8a3 100644
--- a/src/css/styles/vega.css
+++ b/src/css/styles/vega.css
@@ -1376,15 +1376,42 @@
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-webkit-slider-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)] focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] -mt-[calc((var(--slider-thumb-size)-var(--slider-track-height))/2)];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-moz-range-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow];
   }
 
   :is(.field > input[type='range'], .input[type='range'])::-ms-thumb {
-    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
+    @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow];
+  }
+
+  /* States go before the thumb pseudo-element so they still apply with native CSS nesting. */
+  @media (hover: hover) {
+    :is(.field > input[type='range'], .input[type='range']):hover::-webkit-slider-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-moz-range-thumb {
+      @apply ring-4;
+    }
+
+    :is(.field > input[type='range'], .input[type='range']):hover::-ms-thumb {
+      @apply ring-4;
+    }
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-webkit-slider-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-moz-range-thumb {
+    @apply ring-4 outline-hidden;
+  }
+
+  :is(.field > input[type='range'], .input[type='range']):focus-visible::-ms-thumb {
+    @apply ring-4 outline-hidden;
   }
 
 }