fix(ui): device colour now actually shows on the canvas

CSS .device-rect hard-coded stroke + fill, overriding the
stroke=${d.color} SVG attribute the JS wrote. Author CSS beats
presentation attributes, so changing the device colour via the
inspector picker was invisible.

Drop the stroke/fill overrides from .device-rect; set both inline
on the rect element instead — stroke = the chosen colour, fill =
a 12% tint via color-mix so the device reads coloured without
becoming garish. Inline style beats class CSS, so the picker works.

Frames + IO markers don't currently expose a colour picker, so no
analogous fix needed there.

web/static/main.js

@@ -293,10 +293,14 @@ function renderCanvas() {
 
   for (const d of state.devices) {
     const g = svgEl("g", { "data-device-id": d.id });
+    // Stroke = the user-picked colour; fill = a 12% tint of it via
+    // color-mix so the device "reads" coloured without becoming garish.
+    // Inline style beats the .device-rect class CSS, which is why CSS
+    // no longer hard-codes stroke/fill on that class.
     const rect = svgEl("rect", {
       x: d.x, y: d.y, width: d.width, height: d.height,
       class: "device-rect svg-draggable",
-      stroke: d.color,
+      style: `stroke: ${d.color}; fill: color-mix(in srgb, ${d.color} 12%, white);`,
       rx: 3, ry: 3,
     });
     if (state.selection?.kind === "device" && state.selection.id === d.id) {

web/static/style.css

@@ -183,9 +183,10 @@ body {
   pointer-events: none;
 }
 
+/* Stroke + fill come from the device's user-set colour, written as
+   inline style in renderCanvas — leaving them out of .device-rect so
+   the author CSS doesn't override the inline style. */
 .device-rect {
-  fill: #fff;
-  stroke: var(--text);
   stroke-width: 1.5;
 }
 .device-rect.selected { stroke-width: 3; }