docs: fix timeline order + multi-session note

- Permission prompt moved before plan approved (fires on tool approval request)
- Hooks section: "Run multiple Claude sessions at once — each bound to a different light"
- Dot stagger delays updated to match new row order

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Roach

docs/index.html

@@ -208,8 +208,8 @@
     .tl-cyan    > .timeline-item::before { background: var(--cyan);    animation-delay:  0s; }
     .tl-magenta > .timeline-item::before { background: var(--magenta); animation-delay: -0.25s; }
     .tl-cyan2   > .timeline-item::before { background: var(--cyan);    animation-delay: -0.5s; }
-    .tl-green   > .timeline-item::before { background: var(--green);   animation-delay: -0.75s; }
-    .tl-red     > .timeline-item::before { background: var(--red);     animation-delay: -1.0s; }
+    .tl-red     > .timeline-item::before { background: var(--red);     animation-delay: -0.75s; }
+    .tl-green   > .timeline-item::before { background: var(--green);   animation-delay: -1.0s; }
     .tl-warm    > .timeline-item::before { background: var(--amber);   animation-delay: -1.25s; }
 
     @keyframes dot-pulse {
@@ -353,8 +353,8 @@ <h1>
     <h2>Every Claude session state, lit up</h2>
     <p>
       <code>hue-status.js</code> hooks into Claude Code's event system and drives a dedicated light
-      for each session. Bind different projects to different lights. Claude saves your light state
-      at session start and restores it when it stops.
+      for each session. Run multiple Claude sessions at once — each bound to a different light.
+      Claude saves your light state at session start and restores it when it stops.
     </p>
 
     <div class="timeline">
@@ -385,22 +385,22 @@ <h2>Every Claude session state, lit up</h2>
           <span class="tl-badge" style="background:rgba(0,212,255,0.12);color:var(--cyan)">thinking</span>
         </div>
       </div>
-      <div class="tl-green">
+      <div class="tl-red">
         <div class="timeline-item">
           <div class="tl-text">
-            <strong>Plan approved</strong>
-            <span>exit_plan_mode → solid green flash, then resumes</span>
+            <strong>Permission prompt</strong>
+            <span>Notification → red pulse, 30s auto-expire → idle</span>
           </div>
-          <span class="tl-badge" style="background:rgba(0,255,136,0.12);color:var(--green)">success</span>
+          <span class="tl-badge" style="background:rgba(255,51,85,0.12);color:var(--red)">prompt</span>
         </div>
       </div>
-      <div class="tl-red">
+      <div class="tl-green">
         <div class="timeline-item">
           <div class="tl-text">
-            <strong>Permission prompt</strong>
-            <span>Notification → red pulse, 30s auto-expire → idle</span>
+            <strong>Plan approved</strong>
+            <span>exit_plan_mode → solid green flash, then resumes</span>
           </div>
-          <span class="tl-badge" style="background:rgba(255,51,85,0.12);color:var(--red)">prompt</span>
+          <span class="tl-badge" style="background:rgba(0,255,136,0.12);color:var(--green)">success</span>
         </div>
       </div>
       <div class="tl-warm">