visuals, fixes & storybook upd

src/components/spinner/index.tsx

@@ -6,7 +6,9 @@ export const Spinner = ({
   className,
   ...props
 }: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
-  const gid = `modern-sk-groove-${useId()}`;
+  const uid = useId();
+  const grooveId = `modern-sk-groove-${uid}`;
+  const glowId = `modern-sk-glow-${uid}`;
   return (
     <span
       role="status"
@@ -16,29 +18,56 @@ export const Spinner = ({
     >
       <svg viewBox="0 0 36 36" fill="none">
         <defs>
-          <linearGradient
-            id={gid}
-            x1="18"
-            y1="4"
-            x2="18"
-            y2="32"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop offset="0" stopColor="var(--spin-groove-1)" />
-            <stop offset="1" stopColor="var(--spin-groove-2)" />
-          </linearGradient>
+          {/* Carved channel: flat ring sunk by a top inner shadow — like the switch well. */}
+          <filter id={grooveId} x="-30%" y="-30%" width="160%" height="160%">
+            <feComponentTransfer in="SourceAlpha" result="inv">
+              <feFuncA type="table" tableValues="1 0" />
+            </feComponentTransfer>
+            <feGaussianBlur in="inv" stdDeviation="1" result="blur" />
+            <feOffset in="blur" dy="1" result="off" />
+            <feFlood floodColor="#000" floodOpacity="0.7" />
+            <feComposite in2="off" operator="in" />
+            <feComposite in2="SourceAlpha" operator="in" result="shadow" />
+            <feMerge>
+              <feMergeNode in="SourceGraphic" />
+              <feMergeNode in="shadow" />
+            </feMerge>
+          </filter>
+          {/* Soft round glow — generous region so it never clips to a square. */}
+          <filter id={glowId} x="-100%" y="-100%" width="300%" height="300%">
+            <feGaussianBlur stdDeviation="1.6" />
+          </filter>
         </defs>
-        <circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
         <circle
-          className="modern-sk-spinner__arc"
           cx="18"
           cy="18"
           r="14"
-          stroke="var(--lime)"
-          strokeWidth="3"
-          strokeLinecap="round"
-          strokeDasharray="22 88"
+          stroke="var(--spin-track)"
+          strokeWidth="5"
+          filter={`url(#${grooveId})`}
         />
+        <g className="modern-sk-spinner__arc">
+          <circle
+            cx="18"
+            cy="18"
+            r="14"
+            stroke="var(--lime)"
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeDasharray="22 88"
+            opacity="0.8"
+            filter={`url(#${glowId})`}
+          />
+          <circle
+            cx="18"
+            cy="18"
+            r="14"
+            stroke="var(--lime)"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeDasharray="22 88"
+          />
+        </g>
       </svg>
     </span>
   );