Keep units styled and prevent zero reverse examples

hdyc-svelte/src/app.css

@@ -113,8 +113,8 @@ a:hover {
 .theme-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
-  padding: 0.35rem 0.9rem;
+  justify-content: center;
+  padding: 0.35rem 0.7rem;
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--input-bg);
@@ -125,6 +125,7 @@ a:hover {
   line-height: 1;
   cursor: pointer;
   transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
+  min-width: 42px;
 }
 .theme-toggle:hover {
   border-color: var(--accent);
@@ -133,17 +134,59 @@ a:hover {
   outline: none;
   box-shadow: 0 0 0 3px var(--accent-glow);
 }
-.theme-toggle__label {
-  font-size: 0.78rem;
-  letter-spacing: 0.02em;
+
+.floating-palette-controls {
+  position: fixed;
+  bottom: clamp(1rem, 2vw, 1.5rem);
+  right: clamp(1rem, 2vw, 1.5rem);
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.65rem;
+  border-radius: 999px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  z-index: 200;
+}
+.palette-dots {
+  display: flex;
+  gap: 0.35rem;
+}
+.palette-dot {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  padding: 0;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.palette-dot:hover {
+  transform: translateY(-1px);
+}
+.palette-dot.active,
+.palette-dot:focus-visible {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+.palette-dot:focus-visible {
+  outline: none;
 }
 
 @media (max-width: 520px) {
-  .theme-toggle__label {
-    display: none;
+  .floating-palette-controls {
+    gap: 0.25rem;
+    padding: 0.25rem 0.55rem;
+    right: 0.75rem;
   }
-  .theme-toggle {
-    padding-inline: 0.75rem;
+  .palette-dot {
+    width: 30px;
+    height: 30px;
   }
 }