add color updates to timer for feedback

src/roast.css

@@ -15,6 +15,24 @@ body {
     margin: 0;
 }
 
+/* Roast phase backgrounds */
+#timer.initial-phase {
+    background-color: #ffffff; /* white before Charge */
+}
+
+#timer.charge-phase {
+    background-color: #e6ffe6; /* pale green after Charge */
+}
+
+#timer.yellow-phase {
+    background-color: #fffdd0; /* light yellow after Yellow */
+}
+
+/* Dynamic muddy yellow-brown transition (0–40% dev) */
+#timer.dev-phase {
+    transition: background-color 0.5s ease;
+}
+
 #create-plan {
     padding: 20px;
     text-align: center;

src/roast.ts

@@ -61,6 +61,34 @@ function updateTimerDisplay(): void {
     } else {
         devPercentEl.style.display = 'none';
     }
+
+    const timerEl = document.getElementById("timer")!;
+
+    // Reset classes
+    timerEl.className = "";
+
+    // Determine phase
+    if (!log.some(e => e.event === "Charge")) {
+        timerEl.classList.add("initial-phase");
+    } else if (!log.some(e => e.event === "Yellow")) {
+        timerEl.classList.add("charge-phase");
+    } else if (firstCrackTime === null) {
+        timerEl.classList.add("yellow-phase");
+    } else {
+        // Development phase
+        timerEl.classList.add("dev-phase");
+
+        const devTime = timer - firstCrackTime;
+        const devRatio = Math.min(devTime / timer, 0.4); // clamp to 0–0.4
+
+        // Interpolate from yellow (255,255,208) to muddy brown (215,195,158)
+        const r = Math.round(255 - devRatio * 100);
+        const g = Math.round(255 - devRatio * 150);
+        const b = Math.round(208 - devRatio * 125);
+
+        timerEl.style.backgroundColor = `rgb(${r},${g},${b})`;
+    }
+
 }
 
 function logEvent(eventName: string): void {
@@ -97,12 +125,21 @@ function logEvent(eventName: string): void {
 function resetSystem(): void {
     stopTimer();
     log = [];
+    timer = 0;
+    firstCrackTime = null;
     updateLog();
+    updateTimerDisplay();
+
+    const devPercentEl = document.getElementById("devPercent")!;
+    devPercentEl.style.display = "none";
+
+    const timerEl = document.getElementById("timer")!;
+    timerEl.className = "initial-phase"; // back to white background
+    timerEl.style.backgroundColor = "";  // clear inline style
+
     document.getElementById("create-plan")!.classList.remove("hidden");
     const tempButtons = document.getElementById("temp-buttons")!;
     tempButtons.innerHTML = "";
-    const devPercentEl = document.getElementById("devPercent")!;
-    devPercentEl.style.display = "none";
 }
 
 function formatTime(seconds: number): string {