feat(viz): interactive algorithm viz system

frontend/src/app/globals.css

@@ -61,6 +61,15 @@
   /* Badge colors - Optimal (green) */
   --badge-optimal: #16a34a;
   --badge-optimal-bg: #dcfce7;
+
+  /* Visualization colors */
+  --viz-default: #f3f4f6;
+  --viz-active: #3b82f6;
+  --viz-comparing: #f59e0b;
+  --viz-found: #22c55e;
+  --viz-visited: #9ca3af;
+  --viz-swapping: #8b5cf6;
+  --viz-transition: 300ms;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -125,6 +134,14 @@
     /* Badge colors - Optimal (green, dark mode) */
     --badge-optimal: #4ade80;
     --badge-optimal-bg: rgba(34, 197, 94, 0.2);
+
+    /* Visualization colors (dark mode) */
+    --viz-default: #374151;
+    --viz-active: #3b82f6;
+    --viz-comparing: #f59e0b;
+    --viz-found: #22c55e;
+    --viz-visited: #6b7280;
+    --viz-swapping: #8b5cf6;
   }
 }
 
@@ -139,3 +156,26 @@ body {
 .prose-content {
   line-height: 1.7;
 }
+
+/* Visualization element transitions */
+.viz-element {
+  transition:
+    background-color var(--viz-transition) ease,
+    transform var(--viz-transition) ease,
+    opacity var(--viz-transition) ease;
+}
+
+.viz-cell-bg {
+  transition:
+    fill var(--viz-transition) ease;
+}
+
+.viz-value {
+  transition:
+    fill var(--viz-transition) ease;
+}
+
+.viz-pointer {
+  transition:
+    transform var(--viz-transition) ease;
+}