sandbox/studio: brushed-metal language across the whole rack

Same metal treatment now applies to the outer hardware frame, the
top/bottom bars and the sub-panels (knobs + seq). Three CSS custom
properties capture the shared visual language so each frame just
plugs them in:

- --metal-specular: vertical gradient with a soft bright band on the
  upper portion
- --metal-brush: very fine repeating horizontal stripes
- --metal-bevel: 4-edge inset shadow set (bright top + dark bottom +
  highlighted left + dark right)

Per-element base colours retain a depth hierarchy: the outer
.hardware is the darkest, top/bottom bars sit slightly brighter, and
.knobs/.seq are the brightest plates so they read as mounted on top.

Drop shadows scaled to scope: .hardware gets a strong 0 8px 32px,
the bars get a small 0 2px 4px, and the sub-panels keep their two
layered drop shadows for depth.

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

web/sandbox/studio.html

@@ -29,6 +29,24 @@
     --hw-syn-fn:  #c8a878;
     --hw-syn-id:  #b8b0a0;
     --hw-syn-op:  #6c6660;
+
+    /* shared brushed-metal language for all rack frames + sub-panels */
+    --metal-specular: 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%);
+    --metal-brush: 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);
+    --metal-bevel:
+      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);
   }
   * { box-sizing: border-box; }
   html, body { height: 100%; margin: 0; background: var(--bg); color: var(--hw-fg);
@@ -49,16 +67,18 @@
   /* ===================================================================== */
   .hardware {
     position: relative;
+    /* darker base than the sub-panels so they stand out against it */
     background:
-      radial-gradient(ellipse at 30% 0%, var(--hw-bg-hi) 0%, var(--hw-bg) 50%, var(--hw-bg-lo) 100%);
+      var(--metal-specular),
+      var(--metal-brush),
+      linear-gradient(180deg, #181513 0%, #100c08 60%, #080604 100%);
     border: 1px solid var(--hw-edge);
     border-radius: 10px;
     box-shadow:
-      inset 0 1px 0 rgba(255, 220, 180, 0.05),
+      var(--metal-bevel),
-      inset 0 -1px 0 rgba(0, 0, 0, 0.7),
       inset 0 0 0 1px rgba(232, 160, 80, 0.04),
-      0 1px 0 rgba(255, 220, 180, 0.02),
+      0 8px 32px rgba(0, 0, 0, 0.65),
-      0 8px 24px rgba(0, 0, 0, 0.55);
+      0 1px 0 rgba(255, 220, 180, 0.04);
     padding: 14px;
     display: grid;
     grid-template-columns: 1fr 220px;
@@ -104,12 +124,14 @@
     font-size: 10px;
     letter-spacing: 0.08em;
     background:
-      linear-gradient(180deg, #1f1d1a 0%, #14130f 100%);
+      var(--metal-specular),
+      var(--metal-brush),
+      linear-gradient(180deg, #25211d 0%, #16130f 100%);
     border: 1px solid var(--hw-edge);
     border-radius: 4px;
     box-shadow:
-      inset 0 1px 0 rgba(255,220,180,0.05),
+      var(--metal-bevel),
-      inset 0 -1px 0 rgba(0,0,0,0.6);
+      0 2px 4px rgba(0, 0, 0, 0.4);
   }
   .top-bar > *, .bottom-bar > * { align-self: center; }
   .top-bar .btn-group { align-self: stretch; }
@@ -212,36 +234,18 @@
   /*  Right column                                                           */
   /* ===================================================================== */
 
-  /* shared brushed-metal panel treatment for sub-panels inside the rack.
+  /* shared brushed-metal panel treatment for sub-panels inside the rack */
-     Applied to .knobs and .seq. Multiple layered backgrounds + bevels. */
   .knobs, .seq {
     border: 1px solid var(--hw-edge);
     border-radius: 6px;
     background:
-      /* (1) horizontal specular band on the upper portion */
+      var(--metal-specular),
-      linear-gradient(180deg,
+      var(--metal-brush),
-        rgba(255, 248, 230, 0.08) 0%,
+      /* brighter base than .hardware so they read as plates mounted on top */
-        rgba(255, 248, 230, 0.03) 28%,
+      linear-gradient(180deg, #2c2823 0%, #1a1612 55%, #110d09 100%);
-        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:
-      /* bevel — bright top edge + dark bottom edge + side strokes */
+      var(--metal-bevel),
-      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);
   }