diff --git a/src/theme/globals.css b/src/theme/globals.css
index 2589071..ab0a527 100644
--- a/src/theme/globals.css
+++ b/src/theme/globals.css
@@ -69,6 +69,18 @@ the System / Light / Dark theme without a second palette.
   --color-destructive-foreground: var(--dan);
 }
 /*
+No preflight means a `<button>` keeps the browser's own `1px 6px` padding. The ReUI
+parts that are buttons with a fixed size (the switch, the checkbox, the dialog's close)
+would push their content off the edge by it: the switch's knob sat 7px in from the
+left when off. In the base layer, so a ReUI size utility (`px-2.5`) and the console's
+own unlayered styles still win over it.
+*/
+@layer base {
+  button[data-slot] {
+    padding: 0;
+  }
+}
+/*
 ---break---
 */
 .dark {
diff --git a/src/ui/Check.module.css b/src/ui/Check.module.css
index c1e60da..00ce3f7 100644
--- a/src/ui/Check.module.css
+++ b/src/ui/Check.module.css
@@ -44,57 +44,5 @@
   max-width: 720px;
 }
 
-/*
-The switch. It is the same `input[type=checkbox]`, redrawn: the track is the
-input's own box and the knob is its offset inset shadow, so neither an extra
-element nor a pseudo-element the browser paints its own way is needed.
-*/
-.toggle input {
-  width: var(--ctrl-track-w);
-  height: var(--ctrl-track-h);
-  border-radius: var(--r-full);
-  background: var(--field);
-  background-image: none;
-  box-shadow:
-    var(--sunken),
-    inset calc(var(--ctrl-track-w) - var(--ctrl-track-h)) 0 0 -1px transparent;
-  position: relative;
-  transition:
-    background-color var(--t-fast),
-    border-color var(--t-fast);
-}
-
-/* The knob: a circle that travels from one end of the track to the other. */
-.toggle input::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: calc(var(--ctrl-track-h) - 6px);
-  height: calc(var(--ctrl-track-h) - 6px);
-  border-radius: var(--r-full);
-  background: var(--mute);
-  box-shadow: var(--shadow-knob);
-  transition: transform var(--t-medium), background var(--t-fast);
-}
-
-.toggle input:checked {
-  background-color: var(--acc);
-  background-image: none;
-  border-color: var(--acc-ink);
-  box-shadow: var(--edge-strong);
-}
-
-.toggle input:checked::after {
-  background: var(--on-acc);
-  transform: translateX(calc(var(--ctrl-track-w) - var(--ctrl-track-h)));
-}
-
-.toggle input:active:not(:disabled) { transform: none; }
-
-.toggle .help { margin-left: calc(var(--ctrl-track-w) + var(--s-6)); }
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle input,
-  .toggle input::after { transition: none; }
-}
+/* The switch is ReUI's (32px wide), so its help lines up under the label by that width. */
+.helpSwitch { margin-left: calc(32px + var(--s-6)); }
diff --git a/src/ui/Check.tsx b/src/ui/Check.tsx
index ae3611d..de179d0 100644
--- a/src/ui/Check.tsx
+++ b/src/ui/Check.tsx
@@ -56,7 +56,7 @@ export function Check({
           {label}
         </span>
       </div>
-      {help && <div className={styles.help}>{help}</div>}
+      {help && <div className={toggle ? `${styles.help} ${styles.helpSwitch}` : styles.help}>{help}</div>}
     </div>
   )
 }