sandbox/studio: brushed-metal effect on .knobs and .seq sub-panels

Same lighting language as the knob disc, adapted for rectangular
panels (horizontal brushing instead of concentric).

Layered backgrounds:
- (1) horizontal specular band on the upper portion of the panel
- (2) very fine repeating horizontal stripes (brushed steel feel)
- (3) base vertical gradient (light from above on dark anodised metal)

Bevel via inset box-shadows: bright top edge + dark bottom edge +
faint side highlights/shadows. Drop shadow under each panel gives
visual depth so they read as separate plates mounted on the rack.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/sandbox/studio.html

@@ -212,15 +212,43 @@
   /*  Right column                                                           */
   /* ===================================================================== */
 
-  /* knobs sub-panel inside hardware */
+  /* shared brushed-metal panel treatment for sub-panels inside the rack.
-  .knobs {
+     Applied to .knobs and .seq. Multiple layered backgrounds + bevels. */
-    background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
+  .knobs, .seq {
     border: 1px solid var(--hw-edge);
     border-radius: 6px;
-    padding: 14px 12px;
+    background:
+      /* (1) horizontal specular band on the upper portion */
+      linear-gradient(180deg,
+        rgba(255, 248, 230, 0.08) 0%,
+        rgba(255, 248, 230, 0.03) 28%,
+        rgba(255, 248, 230, 0)    45%,
+        rgba(0, 0, 0, 0)          70%,
+        rgba(0, 0, 0, 0.10)      100%),
+      /* (2) brushed horizontal stripes — very fine, very subtle */
+      repeating-linear-gradient(0deg,
+        rgba(255, 250, 235, 0.018) 0px,
+        rgba(255, 250, 235, 0.018) 1px,
+        rgba(0, 0, 0, 0.030)       1px,
+        rgba(0, 0, 0, 0.030)       2px),
+      /* (3) base vertical gradient (light from above on dark anodised metal) */
+      linear-gradient(180deg, #2a2622 0%, #1a1612 55%, #110d09 100%);
     box-shadow:
-      inset 0 1px 0 rgba(255,220,180,0.04),
+      /* bevel — bright top edge + dark bottom edge + side strokes */
-      inset 0 -1px 0 rgba(0,0,0,0.6);
+      inset 0 1px 0 rgba(255, 248, 230, 0.18),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.70),
+      inset 1px 0 0 rgba(255, 248, 230, 0.06),
+      inset -1px 0 0 rgba(0, 0, 0, 0.45),
+      /* warm rim light pooling at the very bottom */
+      inset 0 -10px 14px -10px rgba(255, 220, 180, 0.10),
+      /* drop shadow under the panel for depth */
+      0 2px 4px rgba(0, 0, 0, 0.45),
+      0 6px 14px rgba(0, 0, 0, 0.30);
+  }
+
+  /* knobs sub-panel inside hardware */
+  .knobs {
+    padding: 14px 12px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px 10px;
@@ -242,15 +270,9 @@
   .hw-knob { cursor: grab; touch-action: none; }
   .hw-knob.dragging { cursor: grabbing; }
 
-  /* sequencer sub-panel */
+  /* sequencer sub-panel — inherits brushed-metal background from .knobs,.seq */
   .seq {
-    background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
-    border: 1px solid var(--hw-edge);
-    border-radius: 6px;
     padding: 8px 10px;
-    box-shadow:
-      inset 0 1px 0 rgba(255,220,180,0.04),
-      inset 0 -1px 0 rgba(0,0,0,0.6);
     display: flex; flex-direction: column; gap: 5px;
   }
   .seq-row {