visuals, fixes & storybook upd

src/styles/index.css

@@ -7,7 +7,13 @@
 @import './tokens.css';
 @import './components.css';
 
-/* Non-invasive box-sizing for our own components only (zero specificity). */
+/* Non-invasive box-sizing + branded font for our own components only
+   (zero specificity, so consumer elements are never touched and the
+   --font-mono / --font-display classes still win by class specificity).
+   This is what carries the typeface onto portalled content (tooltips,
+   menus, dialogs) and bare text nodes (control labels) that never set
+   their own font-family. */
 :where([class^='modern-sk-'], [class*=' modern-sk-']) {
   box-sizing: border-box;
+  font-family: var(--font-sans);
 }

src/styles/tokens.css

@@ -178,10 +178,9 @@
   --grain-opacity: 0.45;
 
   /* ---------- SPINNER GROOVE ----------
-     Carved donut channel — dark at the top rim, catching light at the
-     bottom, exactly like the sunk wells (switch / field). */
-  --spin-groove-1: #090a07;  /* top — in shadow */
-  --spin-groove-2: #34352b;  /* bottom — catches light */
+     Solid carved channel — flat base felt, sunk by an SVG inner shadow,
+     exactly like the switch well (no gradient). */
+  --spin-track: #23241c;
 }
 
 /* ============================================================
@@ -264,9 +263,8 @@
     radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.08), transparent 60%),
     radial-gradient(100% 100% at 50% 50%, #f2f2ea 0%, #ecece3 60%, #e2e2d6 100%);
 
-  /* carved groove on warm paper — top grey shadow, bottom near-white */
-  --spin-groove-1: #c2c3b6;
-  --spin-groove-2: #ffffff;
+  /* carved groove on warm paper — flat base, sunk by inner shadow */
+  --spin-track: #dcdcd2;
 }
 
 /* ============================================================