Add animated fire visualization and fix step pot param reading

- SVG fire group with 3 layered flame paths (red/orange/yellow gradients)
- CSS keyframe flicker animations with different timings per flame layer
- JS controls fire opacity and scaleY proportional to heater power
- Fix buildStep() reading grain_mass/water_mass from nested step.pot
  instead of flat step keys, matching the JSON structure

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DGKe8JzTM2Gr1fdx9wYXTi

web/index.html

@@ -47,7 +47,7 @@
 </div>
 
 <div id="pot-view">
-  <svg id="pot-svg" viewBox="0 0 290 205" xmlns="http://www.w3.org/2000/svg">
+  <svg id="pot-svg" viewBox="0 0 290 255" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <clipPath id="pot-clip">
         <rect x="63" y="30" width="114" height="142"/>
@@ -55,8 +55,37 @@
       <clipPath id="tube-clip">
         <rect x="215" y="28" width="8" height="146"/>
       </clipPath>
+      <!-- Flame gradients: solid at base (y=1), transparent at tip (y=0) -->
+      <linearGradient id="fg-red" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#ff2200" stop-opacity="0.95"/>
+        <stop offset="100%" stop-color="#ff5500" stop-opacity="0"/>
+      </linearGradient>
+      <linearGradient id="fg-orange" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#ff7700" stop-opacity="0.9"/>
+        <stop offset="100%" stop-color="#ffaa00" stop-opacity="0"/>
+      </linearGradient>
+      <linearGradient id="fg-yellow" x1="0" y1="1" x2="0" y2="0">
+        <stop offset="0%" stop-color="#ffe000" stop-opacity="0.85"/>
+        <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+      </linearGradient>
     </defs>
 
+    <!-- Fire (shown when heater is on, JS controls scale+opacity) -->
+    <g id="fire-group">
+      <!-- Outer red flame -->
+      <path id="flame-outer" class="flame"
+        d="M76,248 C79,215 92,192 101,208 C106,192 113,177 120,180 C127,177 134,192 139,208 C148,192 161,215 164,248 Z"
+        fill="url(#fg-red)"/>
+      <!-- Middle orange flame -->
+      <path id="flame-mid" class="flame"
+        d="M88,248 C91,222 101,204 109,217 C113,204 118,191 122,195 C126,191 131,204 135,217 C143,204 153,222 156,248 Z"
+        fill="url(#fg-orange)"/>
+      <!-- Inner yellow flame -->
+      <path id="flame-inner" class="flame"
+        d="M100,248 C102,230 110,215 116,224 C118,215 121,205 124,208 C127,205 130,215 132,224 C138,215 147,230 148,248 Z"
+        fill="url(#fg-yellow)"/>
+    </g>
+
     <!-- Water fill (behind pot walls) -->
     <rect id="water-fill" x="63" y="172" width="114" height="0"
           fill="#1a4a72" clip-path="url(#pot-clip)"/>