Cascading rainbow top to bottom

Colors now flow red → purple from top to bottom:
- Regulate: SOMA (red), LOVE (orange-red)
- Understand: FEEL (orange), NEED (yellow), STORY (lime)
- Express: SEND (green), TEND (teal), NVC (cyan)
- Reconnect: REPAIR (blue), APPRECIATE (indigo), WISDOM (violet)

Both sidebar and button rows match the same cascade.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/index.html

@@ -129,49 +129,54 @@
         }
 
         /* Rainbow sidebar colors */
-        .tool-desc.send-desc {
+        /* Rainbow sidebar colors: Cascading Red → Purple (top to bottom) */
+        /* Regulate */
+        .tool-desc.soma-desc {
             border-left-color: #ef4444;
             background: rgba(239, 68, 68, 0.1);
         }
-        .tool-desc.tend-desc {
+        .tool-desc.love-desc {
             border-left-color: #f97316;
             background: rgba(249, 115, 22, 0.1);
         }
-        .tool-desc.soma-desc {
+        /* Understand */
+        .tool-desc.feel-desc {
             border-left-color: #f59e0b;
             background: rgba(245, 158, 11, 0.1);
         }
-        .tool-desc.feel-desc {
+        .tool-desc.need-desc {
             border-left-color: #eab308;
             background: rgba(234, 179, 8, 0.1);
         }
-        .tool-desc.need-desc {
+        .tool-desc.story-desc {
+            border-left-color: #84cc16;
+            background: rgba(132, 204, 22, 0.1);
+        }
+        /* Express */
+        .tool-desc.send-desc {
             border-left-color: #22c55e;
             background: rgba(34, 197, 94, 0.1);
         }
-        .tool-desc.nvc-desc {
+        .tool-desc.tend-desc {
             border-left-color: #14b8a6;
             background: rgba(20, 184, 166, 0.1);
         }
-        .tool-desc.story-desc {
+        .tool-desc.nvc-desc {
             border-left-color: #0ea5e9;
             background: rgba(14, 165, 233, 0.1);
         }
+        /* Reconnect */
         .tool-desc.repair-desc {
             border-left-color: #3b82f6;
             background: rgba(59, 130, 246, 0.1);
         }
         .tool-desc.appreciate-desc {
-            border-left-color: #8b5cf6;
-            background: rgba(139, 92, 246, 0.1);
-        }
-        .tool-desc.wisdom-desc {
             border-left-color: #6366f1;
             background: rgba(99, 102, 241, 0.1);
         }
-        .tool-desc.love-desc {
-            border-left-color: #a855f7;
-            background: rgba(168, 85, 247, 0.1);
+        .tool-desc.wisdom-desc {
+            border-left-color: #8b5cf6;
+            background: rgba(139, 92, 246, 0.1);
         }
 
         /* Settings */
@@ -493,70 +498,83 @@
             gap: 4px;
         }
 
-        /* Rainbow button colors: Red → Purple */
-        .tool-btn.send {
+        /* Rainbow button colors: Cascading Red → Purple (top to bottom) */
+        /* Regulate row */
+        .tool-btn.soma {
             border-color: #ef4444;
             color: #ef4444;
         }
-        .tool-btn.send:hover, .tool-btn.send.active {
+        .tool-btn.soma:hover, .tool-btn.soma.active {
             background: #ef4444;
             color: white;
         }
 
-        .tool-btn.tend {
+        .tool-btn.love {
             border-color: #f97316;
             color: #f97316;
         }
-        .tool-btn.tend:hover, .tool-btn.tend.active {
+        .tool-btn.love:hover, .tool-btn.love.active {
             background: #f97316;
             color: white;
         }
 
-        .tool-btn.soma {
+        /* Understand row */
+        .tool-btn.feel {
             border-color: #f59e0b;
             color: #f59e0b;
         }
-        .tool-btn.soma:hover, .tool-btn.soma.active {
+        .tool-btn.feel:hover, .tool-btn.feel.active {
             background: #f59e0b;
             color: white;
         }
 
-        .tool-btn.feel {
+        .tool-btn.need {
             border-color: #eab308;
             color: #eab308;
         }
-        .tool-btn.feel:hover, .tool-btn.feel.active {
+        .tool-btn.need:hover, .tool-btn.need.active {
             background: #eab308;
             color: white;
         }
 
-        .tool-btn.need {
+        .tool-btn.story {
+            border-color: #84cc16;
+            color: #84cc16;
+        }
+        .tool-btn.story:hover, .tool-btn.story.active {
+            background: #84cc16;
+            color: white;
+        }
+
+        /* Express row */
+        .tool-btn.send {
             border-color: #22c55e;
             color: #22c55e;
         }
-        .tool-btn.need:hover, .tool-btn.need.active {
+        .tool-btn.send:hover, .tool-btn.send.active {
             background: #22c55e;
             color: white;
         }
 
-        .tool-btn.nvc {
+        .tool-btn.tend {
             border-color: #14b8a6;
             color: #14b8a6;
         }
-        .tool-btn.nvc:hover, .tool-btn.nvc.active {
+        .tool-btn.tend:hover, .tool-btn.tend.active {
             background: #14b8a6;
             color: white;
         }
 
-        .tool-btn.story {
+        .tool-btn.nvc {
             border-color: #0ea5e9;
             color: #0ea5e9;
         }
-        .tool-btn.story:hover, .tool-btn.story.active {
+        .tool-btn.nvc:hover, .tool-btn.nvc.active {
             background: #0ea5e9;
             color: white;
         }
 
+        /* Reconnect row */
         .tool-btn.repair {
             border-color: #3b82f6;
             color: #3b82f6;
@@ -567,29 +585,20 @@
         }
 
         .tool-btn.appreciate {
-            border-color: #8b5cf6;
-            color: #8b5cf6;
-        }
-        .tool-btn.appreciate:hover, .tool-btn.appreciate.active {
-            background: #8b5cf6;
-            color: white;
-        }
-
-        .tool-btn.wisdom {
             border-color: #6366f1;
             color: #6366f1;
         }
-        .tool-btn.wisdom:hover, .tool-btn.wisdom.active {
+        .tool-btn.appreciate:hover, .tool-btn.appreciate.active {
             background: #6366f1;
             color: white;
         }
 
-        .tool-btn.love {
-            border-color: #a855f7;
-            color: #a855f7;
+        .tool-btn.wisdom {
+            border-color: #8b5cf6;
+            color: #8b5cf6;
         }
-        .tool-btn.love:hover, .tool-btn.love.active {
-            background: #a855f7;
+        .tool-btn.wisdom:hover, .tool-btn.wisdom.active {
+            background: #8b5cf6;
             color: white;
         }