Context Update: The studio.html database interception is working flawlessly. I
now want to add a real-time graphical renderer to the dashboard to visualize
the simulation as it runs.

The Data Schema:
When the CRDT_MUTATION event fires for gamelib/mesh/genesis_grid, the
msg.value contains the state.

For the cells property, msg.value is an object with string coordinates as keys
(e.g., "x,y") and integer states as values (0 = empty, 1 = alive cell, 2 =
solid gravity block). The grid is 20x20.

For the thermal_map property, msg.value has the same "x,y" keys, but with
float values representing heat.

The Goal: I need you to update the studio.html code to include a live HTML5
<canvas> renderer.

Strict Implementation Requirements:

UI Addition: Add a third panel to the .panels flex container titled "Live Grid
Render" containing a <canvas id="grid-canvas" width="400" height="400"></canvas
>.

The Render Loop: Inside socket.onmessage, intercept payloads where
msg.property === 'cells'. Pass msg.value to a new drawGrid(cellData) function.

Visuals (Cyberpunk Theme):

Calculate a cell size of 20px (400px / 20 cells).

Empty space (State 0): Fill with a very dark gray (e.g., #111).

Alive cells (State 1): Fill with neon green (e.g., #00ff00).

Solid blocks (State 2): Fill with solid white or light gray (e.g., #dddddd).

Heat Overlay (Bonus): If you can, also intercept msg.property ===
'thermal_map' and store it globally. When drawGrid runs, if a cell has heat >
10.0, render a faint red overlay rgba(255, 0, 0, opacity) over the cell to
visualize the thermodynamic dissipation.

Provide the updated studio.html code incorporating these rendering features
while keeping the existing SQLite telemetry intact.