From 64620ef75ada07e70b97f3ff9d176e625dd1bcaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Luis=20Monta=C3=B1es?= <josele.96@gmail.com>
Date: Fri, 1 May 2026 17:56:39 +0200
Subject: [PATCH] sandbox/studio: knobs in charcoal black, neutral palette,
 drop sidebar

Aligning the mockup more closely with the reference image:

- Knob body is now a pure charcoal/black radial gradient (no warm
  brown tint). Top-left specular dim, top crescent gloss, outer dark
  ring. Drop shadow underneath so the knob "sits on" the panel.
- Value readouts ("120.0", "2.50", ...) in cream/white, no inset
  amber LCD frame. Amber is reserved for arcs / LEDs / bullet labels
  exclusively.
- Panel palette pulled toward neutral dark (less brown saturation).
- Sidebar with the description bullets removed; layout is just the
  hardware unit at full width.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/sandbox/studio.html | 686 +++++++++++++++++++---------------------
 1 file changed, 333 insertions(+), 353 deletions(-)

diff --git a/web/sandbox/studio.html b/web/sandbox/studio.html
index b529b58..a73f17c 100644
--- a/web/sandbox/studio.html
+++ b/web/sandbox/studio.html
@@ -4,293 +4,309 @@
 <meta charset="utf-8">
 <title>code-sinth — studio hardware emulation</title>
 <style>
-  /* === warm palette inspired by Moog / Roland / Korg vintage rack gear === */
   :root {
-    --hw-bg:        #1a1612;
-    --hw-panel:     #2b2620;
-    --hw-panel-hi:  #342f28;
-    --hw-panel-lo:  #1f1b16;
-    --hw-divider:   #11100d;
-    --hw-screw:     #6a635a;
-    --hw-screw-dk:  #2a2520;
-    --hw-amber:     #ffae5c;
-    --hw-amber-hi:  #ffd5a0;
-    --hw-amber-mut: #5a3d20;
-    --hw-amber-off: #2a2118;
-    --hw-amber-glow: rgba(255, 174, 92, 0.55);
-    --hw-fg:        #b9a98c;
-    --hw-fg-bright: #d8c9a8;
-    --hw-fg-dim:    #786a55;
-    --hw-engrave:   #8c7d62;
-    --hw-screen-bg: #1d1814;
-    --hw-syn-com:   #5a4a3a;
-    --hw-syn-kw:    #e0916a;
-    --hw-syn-num:   #d8a060;
-    --hw-syn-fn:    #c8a878;
-    --hw-syn-atom:  #b8a070;
-    --hw-syn-str:   #a08862;
-    --hw-led-red:   #e85a3a;
+    --bg:        #131210;
+    --hw-bg:     #1a1916;       /* panel: neutral dark, very faint warm tint */
+    --hw-bg-hi:  #232220;
+    --hw-bg-lo:  #0e0d0b;
+    --hw-edge:   #050505;
+    --hw-screw:  #5a5550;
+    --hw-amber:  #e8a050;       /* used ONLY for arcs / LEDs / labels */
+    --hw-amber-hi: #f4c890;
+    --hw-amber-mut: rgba(232, 160, 80, 0.18);
+    --hw-amber-glow: rgba(232, 160, 80, 0.45);
+    --hw-amber-off: #28201a;
+    --hw-fg:     #a8a39a;       /* general text: warm-neutral cream */
+    --hw-fg-hi:  #d8d0c0;
+    --hw-fg-dim: #6c6660;
+    --hw-engrave: #8a847a;
+    --hw-screen: #161412;
+    --hw-led-red: #c84838;
     --hw-led-green: #6aca8a;
+    --hw-syn-com: #5a554f;
+    --hw-syn-kw:  #d68868;
+    --hw-syn-num: #d6a268;
+    --hw-syn-fn:  #c8a878;
+    --hw-syn-id:  #b8b0a0;
+    --hw-syn-op:  #6c6660;
   }
   * { box-sizing: border-box; }
-  html, body { height: 100%; margin: 0;
-               background:
-                 radial-gradient(circle at 30% 20%, #221c16 0%, #14110d 70%),
-                 var(--hw-bg);
-               color: var(--hw-fg);
+  html, body { height: 100%; margin: 0; background: var(--bg); color: var(--hw-fg);
                font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
-               font-size: 13px; }
-  body { padding: 28px; min-height: 100vh; }
+               font-size: 12px; }
+  body { padding: 32px; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
 
   /* ===================================================================== */
-  /*  Panel chrome — beveled metal panels with corner screws                */
+  /*  Outer layout: sidebar (description) + hardware unit                     */
   /* ===================================================================== */
-  .panel {
+  .layout {
+    width: 100%;
+    max-width: 980px;
+  }
+
+  /* ===================================================================== */
+  /*  Hardware unit — single large rounded panel containing everything       */
+  /* ===================================================================== */
+  .hardware {
     position: relative;
     background:
-      linear-gradient(180deg, var(--hw-panel-hi) 0%, var(--hw-panel) 50%, var(--hw-panel-lo) 100%);
-    border: 1px solid #0a0805;
-    border-radius: 6px;
+      radial-gradient(ellipse at 30% 0%, var(--hw-bg-hi) 0%, var(--hw-bg) 50%, var(--hw-bg-lo) 100%);
+    border: 1px solid var(--hw-edge);
+    border-radius: 10px;
     box-shadow:
-      inset 0 1px 0 rgba(255, 220, 180, 0.04),
-      inset 0 -1px 0 rgba(0, 0, 0, 0.6),
-      0 1px 0 rgba(255, 220, 180, 0.03),
-      0 6px 16px rgba(0, 0, 0, 0.45);
-  }
-  .panel::before, .panel::after, .panel > .screw-tl, .panel > .screw-tr,
-  .panel > .screw-bl, .panel > .screw-br {
-    /* nothing; pseudo-elements not enough — using real spans below */
+      inset 0 1px 0 rgba(255, 220, 180, 0.05),
+      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 24px rgba(0, 0, 0, 0.55);
+    padding: 12px;
+    display: grid;
+    grid-template-columns: 1fr 220px;
+    grid-template-rows: auto 1fr;
+    gap: 10px;
   }
+
+  /* corner screws — only on the outermost frame */
   .screw {
-    position: absolute; width: 10px; height: 10px; border-radius: 50%;
+    position: absolute;
+    width: 8px; height: 8px; border-radius: 50%;
     background:
-      radial-gradient(circle at 30% 25%, #9a8e7c 0%, #4a4138 55%, #1a1510 100%);
+      radial-gradient(circle at 30% 25%, #8a7d6a 0%, #3a3025 60%, #100c08 100%);
     box-shadow:
       inset 0 -1px 1px rgba(0,0,0,0.7),
-      inset 0 1px 0 rgba(255,220,180,0.2),
+      inset 0 1px 0 rgba(255,220,180,0.18),
       0 1px 1px rgba(0,0,0,0.6);
     pointer-events: none;
+    z-index: 5;
   }
   .screw::after {
     content: ''; position: absolute; inset: 0;
-    background: linear-gradient(45deg, transparent 44%, rgba(0,0,0,0.65) 47%,
-                                 rgba(0,0,0,0.65) 53%, transparent 56%);
+    background: linear-gradient(45deg, transparent 44%, rgba(0,0,0,0.55) 47%,
+                                 rgba(0,0,0,0.55) 53%, transparent 56%);
     border-radius: 50%;
   }
-  .screw-tl { top: 6px; left: 6px; }
-  .screw-tr { top: 6px; right: 6px; }
-  .screw-bl { bottom: 6px; left: 6px; }
-  .screw-br { bottom: 6px; right: 6px; }
+  .hardware > .screw.tl { top: 8px; left: 8px; }
+  .hardware > .screw.tr { top: 8px; right: 8px; }
+  .hardware > .screw.bl { bottom: 8px; left: 8px; }
+  .hardware > .screw.br { bottom: 8px; right: 8px; }
 
   /* ===================================================================== */
-  /*  Layout                                                                 */
+  /*  Header bar inside the hardware unit                                    */
   /* ===================================================================== */
-  .frame { display: grid; grid-template-rows: auto 1fr; gap: 14px;
-           max-width: 1100px; margin: 0 auto; }
-
-  /* --- header bar --- */
-  header.panel { display: flex; align-items: center; gap: 18px; padding: 10px 36px; height: 50px; }
-  .hw-btn { background: linear-gradient(180deg, #3a342c 0%, #1f1b16 100%);
-            border: 1px solid #0a0805; border-radius: 4px;
-            color: var(--hw-fg-bright); padding: 6px 14px;
-            font-family: inherit; font-size: 11px; cursor: pointer;
-            letter-spacing: 0.12em; text-transform: uppercase;
-            box-shadow: inset 0 1px 0 rgba(255,220,180,0.1),
-                        inset 0 -1px 0 rgba(0,0,0,0.6),
-                        0 1px 2px rgba(0,0,0,0.5);
-            transition: all 80ms; }
+  .hw-header {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 4px 26px;
+    height: 36px;
+    color: var(--hw-fg-dim);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+  }
+  .hw-btn {
+    background: linear-gradient(180deg, #2c261f 0%, #14110d 100%);
+    border: 1px solid var(--hw-edge);
+    border-radius: 12px;
+    color: var(--hw-fg-hi);
+    padding: 4px 12px;
+    font-family: inherit;
+    font-size: 10px;
+    cursor: pointer;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    box-shadow:
+      inset 0 1px 0 rgba(255,220,180,0.08),
+      inset 0 -1px 0 rgba(0,0,0,0.55),
+      0 1px 1px rgba(0,0,0,0.4);
+    display: inline-flex; align-items: center; gap: 5px;
+    transition: color 80ms;
+  }
   .hw-btn:hover { color: var(--hw-amber); }
   .hw-btn:active { transform: translateY(1px);
-                   box-shadow: inset 0 1px 4px rgba(0,0,0,0.6); }
-  .hw-btn .ico { display: inline-block; width: 0; height: 0;
-                 border-left: 7px solid var(--hw-led-green);
-                 border-top: 5px solid transparent;
-                 border-bottom: 5px solid transparent;
-                 vertical-align: middle; margin-right: 6px;
-                 filter: drop-shadow(0 0 4px var(--hw-led-green)); }
-  .hw-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
-            background: var(--hw-led-red);
-            box-shadow: 0 0 6px var(--hw-led-red),
-                        inset 0 0 2px rgba(0,0,0,0.7);
-            vertical-align: middle; margin-right: 6px;
-            animation: led-pulse 2s ease-in-out infinite; }
+                   box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
+  .hw-btn .led-red {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--hw-led-red);
+    box-shadow: 0 0 4px var(--hw-led-red);
+    animation: led-pulse 2.2s ease-in-out infinite;
+  }
+  .hw-btn .ico-play {
+    width: 0; height: 0;
+    border-left: 6px solid var(--hw-led-green);
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    filter: drop-shadow(0 0 3px var(--hw-led-green));
+  }
   @keyframes led-pulse {
-    0%, 100% { box-shadow: 0 0 4px var(--hw-led-red); }
-    50%      { box-shadow: 0 0 10px var(--hw-led-red); }
+    0%, 100% { box-shadow: 0 0 3px var(--hw-led-red); }
+    50%      { box-shadow: 0 0 8px var(--hw-led-red); }
   }
-  .engrave { color: var(--hw-engrave); font-size: 10px;
-             letter-spacing: 0.18em; text-transform: uppercase;
-             text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 -1px 0 rgba(255,220,180,0.04); }
-  .stat { color: var(--hw-fg-dim); font-size: 11px; letter-spacing: 0.05em; }
-  .stat strong { color: var(--hw-fg-bright); font-weight: 500;
-                 font-variant-numeric: tabular-nums; }
+  .hw-header .num { color: var(--hw-amber); font-variant-numeric: tabular-nums; }
+  .hw-header .right { margin-left: auto; color: var(--hw-engrave); letter-spacing: 0.18em; }
 
-  /* --- main split --- */
-  main.row { display: grid; grid-template-columns: 1fr 320px; gap: 14px;
-             min-height: 0; }
-
-  /* --- code area (the "screen") --- */
-  .screen.panel { padding: 14px 18px 26px; min-height: 460px;
-                  display: flex; flex-direction: column;
-                  background:
-                    linear-gradient(180deg, #181410 0%, var(--hw-screen-bg) 12%,
-                                            var(--hw-screen-bg) 88%, #181410 100%);
-                  border-color: #050402; }
-  .screen .glass {
-    flex: 1; padding: 14px 18px;
-    background: var(--hw-screen-bg);
-    border: 1px solid #0a0805;
-    border-radius: 4px;
+  /* ===================================================================== */
+  /*  Code "screen" — left, big                                              */
+  /* ===================================================================== */
+  .screen {
+    background: var(--hw-screen);
+    border: 1px solid var(--hw-edge);
+    border-radius: 6px;
+    padding: 14px 18px 10px;
     box-shadow:
-      inset 0 0 18px rgba(0,0,0,0.6),
-      inset 0 0 1px rgba(255, 174, 92, 0.06),
-      inset 0 0 60px rgba(255, 174, 92, 0.02);
-    font-size: 13px; line-height: 22px;
-    overflow: auto;
+      inset 0 0 0 1px rgba(232,160,80,0.04),
+      inset 0 1px 8px rgba(0,0,0,0.5);
+    display: flex; flex-direction: column;
+    min-height: 320px;
+    overflow: hidden;
   }
-  .code-line { display: flex; gap: 18px; white-space: pre; }
-  .ln { color: var(--hw-syn-com); user-select: none; min-width: 22px; text-align: right; }
+  .glass {
+    flex: 1; overflow: auto;
+    font-size: 12px; line-height: 19px;
+  }
+  .code-line { display: flex; gap: 14px; white-space: pre; }
+  .ln { color: var(--hw-syn-com); user-select: none; min-width: 16px; text-align: right; }
+  .syn-com { color: var(--hw-syn-com); font-style: italic; }
   .syn-kw  { color: var(--hw-syn-kw); }
   .syn-num { color: var(--hw-syn-num); }
   .syn-fn  { color: var(--hw-syn-fn); }
-  .syn-atom{ color: var(--hw-syn-atom); }
-  .syn-str { color: var(--hw-syn-str); }
-  .syn-com { color: var(--hw-syn-com); font-style: italic; }
-  .syn-id  { color: var(--hw-fg-bright); }
-  .syn-op  { color: var(--hw-fg-dim); }
+  .syn-id  { color: var(--hw-syn-id); }
+  .syn-op  { color: var(--hw-syn-op); }
+  .syn-arrow { color: var(--hw-amber); }
 
-  .screen .status-line {
-    margin-top: 10px; padding: 0 4px;
-    font-size: 11px; color: var(--hw-amber);
+  .status-line {
+    margin-top: 8px;
+    color: var(--hw-amber);
+    font-size: 11px;
+    letter-spacing: 0.16em;
     text-shadow: 0 0 6px var(--hw-amber-glow);
-    letter-spacing: 0.12em; }
+  }
   .blink { animation: blink 1.1s step-end infinite; }
   @keyframes blink { 50% { opacity: 0; } }
 
-  /* --- right column --- */
-  aside.col { display: flex; flex-direction: column; gap: 14px; }
+  /* ===================================================================== */
+  /*  Right column                                                           */
+  /* ===================================================================== */
+  .right-col {
+    display: flex; flex-direction: column; gap: 10px;
+    min-width: 0;
+  }
 
-  /* --- knobs panel --- */
-  .knobs.panel { padding: 22px 14px; }
-  .knobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
-  .knob-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
-  .knob-cell .label { font-size: 9px; letter-spacing: 0.18em;
-                      text-transform: uppercase; color: var(--hw-engrave);
-                      text-shadow: 0 1px 0 rgba(0,0,0,0.7),
-                                   0 -1px 0 rgba(255,220,180,0.05); }
+  /* knobs sub-panel inside hardware */
+  .knobs {
+    background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
+    border: 1px solid var(--hw-edge);
+    border-radius: 6px;
+    padding: 14px 12px;
+    box-shadow:
+      inset 0 1px 0 rgba(255,220,180,0.04),
+      inset 0 -1px 0 rgba(0,0,0,0.6);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px 10px;
+  }
+  .knob-cell {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+  }
+  .knob-cell .label {
+    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--hw-engrave);
+    text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 -1px 0 rgba(255,220,180,0.04);
+  }
   .knob-cell .value {
-    font-size: 12px; font-variant-numeric: tabular-nums;
-    color: var(--hw-amber); text-shadow: 0 0 6px var(--hw-amber-glow);
-    letter-spacing: 0.04em;
-    /* slight inset / engraved feel for the digital readout */
-    background: var(--hw-screen-bg);
-    border: 1px solid #0a0805;
-    border-radius: 3px;
-    padding: 1px 8px; min-width: 56px; text-align: center;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
+    font-size: 10px; font-variant-numeric: tabular-nums;
+    color: var(--hw-fg-hi); letter-spacing: 0.05em;
+    background: transparent;
+    padding: 0; min-width: 46px; text-align: center;
   }
   .hw-knob { cursor: grab; touch-action: none; }
   .hw-knob.dragging { cursor: grabbing; }
 
-  /* --- sequencer panel --- */
-  .seq.panel { padding: 16px 14px 18px; }
-  .seq-row { display: flex; align-items: center; gap: 10px; padding: 4px 4px;
-             border-top: 1px solid #0a0805; }
-  .seq-row:first-of-type { border-top: none; }
-  .seq-row .label { width: 56px; font-size: 9px; letter-spacing: 0.18em;
-                    text-transform: uppercase; color: var(--hw-engrave);
-                    text-shadow: 0 1px 0 rgba(0,0,0,0.7),
-                                 0 -1px 0 rgba(255,220,180,0.05); }
-  .leds { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; flex: 1; }
-  .led {
-    height: 14px; border-radius: 2px;
-    background:
-      linear-gradient(180deg, #100c08 0%, var(--hw-amber-off) 100%);
-    border: 1px solid #050402;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,0.7),
-                inset 0 -1px 0 rgba(255,220,180,0.03);
-    cursor: pointer;
-    transition: background 80ms, box-shadow 80ms;
+  /* sequencer sub-panel */
+  .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;
   }
-  .led:hover { background: linear-gradient(180deg, #1c160e 0%, #3a2a18 100%); }
+  .seq-row {
+    display: flex; align-items: center; gap: 8px;
+  }
+  .seq-row .label {
+    width: 44px;
+    font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--hw-engrave);
+    text-shadow: 0 1px 0 rgba(0,0,0,0.6);
+  }
+  .leds {
+    display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px;
+    flex: 1;
+  }
+  .led {
+    height: 12px; border-radius: 1px;
+    background: linear-gradient(180deg, #0a0805 0%, var(--hw-amber-off) 100%);
+    border: 1px solid var(--hw-edge);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.7);
+    cursor: pointer; position: relative;
+    transition: background 60ms;
+  }
+  .led:hover { background: linear-gradient(180deg, #181208 0%, #382818 100%); }
   .led.on {
     background:
-      radial-gradient(circle at 50% 30%, var(--hw-amber-hi) 0%,
-                      var(--hw-amber) 40%, #c87830 100%);
+      radial-gradient(circle at 50% 25%, var(--hw-amber-hi) 0%,
+                      var(--hw-amber) 55%, #a06820 100%);
     box-shadow:
-      inset 0 0 4px rgba(255,255,255,0.4),
-      inset 0 -1px 1px rgba(0,0,0,0.3),
-      0 0 8px var(--hw-amber-glow);
+      inset 0 0 2px rgba(255,255,255,0.4),
+      0 0 5px var(--hw-amber-glow);
   }
-  .led.beat { border-left: 1px solid #281e12; }
-  .led.playhead::after {
-    content: ''; position: absolute; inset: -2px;
-    border: 1px solid rgba(255, 220, 180, 0.4);
-    border-radius: 3px; pointer-events: none;
+  .led.beat::before {
+    content: ''; position: absolute; left: -1px; top: -3px; bottom: -3px;
+    width: 1px; background: var(--hw-amber-mut);
+  }
+  .led.playhead {
+    outline: 1px solid rgba(232, 160, 80, 0.6);
+    outline-offset: 1px;
   }
-  .led { position: relative; }
-
-  /* --- title scaffold --- */
-  .titlecard { color: var(--hw-fg-dim); font-size: 11px; line-height: 1.6;
-               max-width: 240px; padding: 18px 14px;
-               border-left: 2px solid var(--hw-amber-mut); }
-  .titlecard h1 { color: var(--hw-fg-bright); font-size: 13px; font-weight: 500;
-                  letter-spacing: 0.18em; text-transform: uppercase;
-                  margin: 0 0 8px;
-                  text-shadow: 0 1px 0 rgba(0,0,0,0.7),
-                               0 -1px 0 rgba(255,220,180,0.05); }
-  .titlecard ul { padding-left: 14px; margin: 8px 0 0; }
-  .titlecard li { margin-bottom: 3px; }
 </style>
 </head>
 <body>
 
-<div class="frame">
+<div class="layout">
 
-<!-- ===================== header bar ===================== -->
-<header class="panel">
-  <span class="screw screw-tl"></span>
-  <span class="screw screw-tr"></span>
-  <span class="screw screw-bl"></span>
-  <span class="screw screw-br"></span>
+  <!-- ===================== hardware unit ===================== -->
+  <div class="hardware">
+    <span class="screw tl"></span>
+    <span class="screw tr"></span>
+    <span class="screw bl"></span>
+    <span class="screw br"></span>
 
-  <button class="hw-btn"><span class="hw-led"></span>STOP</button>
-  <button class="hw-btn"><span class="ico"></span>RUN</button>
-  <span class="engrave">48 kHz</span>
-  <span class="stat">TAPS: <strong>14</strong></span>
-  <span class="stat">CPU: <strong>9%</strong></span>
-  <span style="flex: 1"></span>
-  <span class="engrave">code · sinth</span>
-</header>
+    <!-- header bar, full width -->
+    <div class="hw-header">
+      <button class="hw-btn"><span class="led-red"></span>STOP</button>
+      <button class="hw-btn"><span class="ico-play"></span>RUN</button>
+      <span>48 KHZ</span>
+      <span>TAPS: <span class="num">14</span></span>
+      <span>CPU: <span class="num">9%</span></span>
+      <span class="right">CODE · SINTH</span>
+    </div>
 
-<main class="row">
+    <!-- code area -->
+    <section class="screen">
+      <div class="glass" id="glass"></div>
+      <div class="status-line">&gt; RUNNING<span class="blink">_</span></div>
+    </section>
 
-  <!-- ===================== code area ===================== -->
-  <section class="screen panel">
-    <span class="screw screw-tl"></span>
-    <span class="screw screw-tr"></span>
-    <span class="screw screw-bl"></span>
-    <span class="screw screw-br"></span>
+    <!-- right column with knobs + seq -->
+    <div class="right-col">
 
-    <div class="glass" id="glass"></div>
-
-    <div class="status-line">&gt; RUNNING<span class="blink">_</span></div>
-  </section>
-
-  <!-- ===================== right column ===================== -->
-  <aside class="col">
-
-    <!-- knobs -->
-    <section class="knobs panel">
-      <span class="screw screw-tl"></span>
-      <span class="screw screw-tr"></span>
-      <span class="screw screw-bl"></span>
-      <span class="screw screw-br"></span>
-
-      <div class="knobs-grid">
+      <section class="knobs">
         <div class="knob-cell">
           <span class="label">tempo</span>
-          <canvas class="hw-knob" data-min="60" data-max="200" data-value="120" data-unit=""></canvas>
+          <canvas class="hw-knob" data-min="60" data-max="200" data-value="120" data-decimals="1"></canvas>
           <span class="value">120.0</span>
         </div>
         <div class="knob-cell">
@@ -308,80 +324,77 @@
           <canvas class="hw-knob" data-min="0" data-max="1" data-value="0.35" data-decimals="2"></canvas>
           <span class="value">0.35</span>
         </div>
-      </div>
-    </section>
+      </section>
 
-    <!-- step sequencers -->
-    <section class="seq panel">
-      <span class="screw screw-tl"></span>
-      <span class="screw screw-tr"></span>
-      <span class="screw screw-bl"></span>
-      <span class="screw screw-br"></span>
+      <section class="seq">
+        <div class="seq-row" data-pattern="1000100010001000">
+          <span class="label">kicks</span>
+          <div class="leds"></div>
+        </div>
+        <div class="seq-row" data-pattern="0010001000100010">
+          <span class="label">hat</span>
+          <div class="leds"></div>
+        </div>
+        <div class="seq-row" data-pattern="1001010001010010">
+          <span class="label">melody</span>
+          <div class="leds"></div>
+        </div>
+      </section>
 
-      <div class="seq-row" data-pattern="1000100010001000">
-        <span class="label">kicks</span>
-        <div class="leds"></div>
-      </div>
-      <div class="seq-row" data-pattern="0010001000100010">
-        <span class="label">hat</span>
-        <div class="leds"></div>
-      </div>
-      <div class="seq-row" data-pattern="1001010001010010">
-        <span class="label">melody</span>
-        <div class="leds"></div>
-      </div>
-    </section>
+    </div>
+  </div>
 
-  </aside>
-
-</main>
 </div>
 
 <script>
 // ===========================================================================
-//  syntax-highlighted snippet rendering (static — this is a visual mockup)
+//  static syntax-highlighted code (matches reference layout)
 // ===========================================================================
-const PATCH_LINES = [
-  ['com',  '# studio hardware emulation — visual exploration'],
+const PATCH = [
+  ['# studio hardware emulation — visual exploration', 'com'],
   null,
-  ['mix',  ['kw','node'], ['id','kick'], ['op','='], ['fn','step_seq'], ['op','('],
-           ['id','rate'], ['op','='], ['id','tempo'], ['op',','], ['id','steps'], ['op','='], ['num','16'], ['op',','] ],
-  ['mix',  ['op','  '], ['id','default'], ['op','='], ['op','['],
-           ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
-           ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
-           ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
-           ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',']'], ['op',')'] ],
+  [['kw','node'], ['id','kick'], ['op','='], ['fn','step_seq'], ['op','('],
+   ['id','rate'], ['op','='], ['id','tempo'], ['op',','], ['id','steps'], ['op','='], ['num','16'], ['op',',']],
+  [['op','  '], ['id','default'], ['op','='], ['op','['],
+   ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
+   ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
+   ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',', '],
+   ['num','1'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',','], ['num','0'], ['op',']'], ['op',')']],
   null,
-  ['mix',  ['kw','node'], ['id','bass'], ['op','='], ['fn','osc'], ['op','('],
-           ['atom','saw'], ['op',', '], ['id','freq'], ['op','='], ['num','55'], ['op',')'] ],
-  ['mix',  ['kw','node'], ['id','lp'],   ['op','='], ['fn','filter'], ['op','('],
-           ['id','bass'], ['op',', '], ['id','cutoff'], ['op','='], ['num','800'], ['op',', '], ['id','q'], ['op','='], ['num','2.5'], ['op',')'] ],
+  [['kw','node'], ['id','bass'], ['op','='], ['fn','osc'], ['op','('],
+   ['id','saw'], ['op',','], ['id','freq'], ['op','='], ['num','55'], ['op',')']],
+  [['kw','node'], ['id','lp'], ['op','='], ['fn','filter'], ['op','('],
+   ['id','bass'], ['op',','], ['id','cutoff'], ['op','='], ['num','800'], ['op',','],
+   ['id','q'], ['op','='], ['num','2.5'], ['op',')']],
   null,
-  ['mix',  ['kw','out'], ['op','<- '], ['id','bass'], ['op',' * '], ['num','0.6'],
-           ['op',' + '], ['id','kick'], ['op',' * '], ['num','0.4'] ],
+  [['kw','out'], ['arrow','← '], ['id','bass'], ['op','*'], ['num','0.6'],
+   ['op','+'], ['id','kick'], ['op','*'], ['num','0.4']],
   null,
-  ['mix',  ['kw','node'], ['id','melody'], ['op','='], ['fn','piano_roll'], ['op','('],
-           ['id','voice'], ['op','='], ['id','synth'], ['op',','] ],
-  ['mix',  ['op','    '], ['id','rate'], ['op','='], ['id','tempo'], ['op',', '], ['id','length'], ['op','='], ['num','16'], ['op',','] ],
-  ['mix',  ['op','    '], ['id','octaves'], ['op','='], ['num','2'], ['op',', '], ['id','gate'], ['op','='], ['num','0.18'], ['op',')'] ],
+  [['kw','node'], ['id','melody'], ['op','='], ['fn','piano_roll'], ['op','('],
+   ['id','voice'], ['op','='], ['id','synth'], ['op',',']],
+  [['op','    '], ['id','rate'], ['op','='], ['id','tempo'], ['op',','],
+   ['id','length'], ['op','='], ['num','16'], ['op',',']],
+  [['op','    '], ['id','octaves'], ['op','='], ['num','2'], ['op',','],
+   ['id','gate'], ['op','='], ['num','0.18'], ['op',')']],
 ];
 const glass = document.getElementById('glass');
 let lineNum = 0;
-for (const line of PATCH_LINES) {
+for (const line of PATCH) {
   const div = document.createElement('div');
   div.className = 'code-line';
   if (line === null) {
     lineNum++;
-    div.innerHTML = `<span class="ln">${lineNum}</span><span>&nbsp;</span>`;
-  } else if (line[0] === 'com') {
+    div.innerHTML = `<span class="ln">${lineNum}</span><span> </span>`;
+  } else if (Array.isArray(line) && typeof line[0] === 'string' && line[1] === 'com') {
     lineNum++;
-    div.innerHTML = `<span class="ln">${lineNum}</span><span class="syn-com">${line[1]}</span>`;
-  } else if (line[0] === 'mix') {
+    div.innerHTML = `<span class="ln">${lineNum}</span><span class="syn-com">${line[0]}</span>`;
+  } else {
     lineNum++;
     let html = `<span class="ln">${lineNum}</span><span>`;
-    for (let i = 1; i < line.length; i++) {
-      const [cls, txt] = line[i];
-      html += `<span class="syn-${cls}">${txt}</span>${cls !== 'op' ? ' ' : ''}`;
+    for (const [cls, txt] of line) {
+      const sep = cls === 'op' ? '' : ' ';
+      const klass = cls === 'arrow' ? 'syn-arrow' : `syn-${cls}`;
+      html += `<span class="${klass}">${txt}</span>${sep}`;
     }
     html += `</span>`;
     div.innerHTML = html;
@@ -390,9 +403,10 @@ for (const line of PATCH_LINES) {
 }
 
 // ===========================================================================
-//  knob drawing — metallic radial gradient + amber indicator
+//  knob — restrained: dark gradient + thin amber arc + single tickmark.
+//  No knurled ridges, no brushed metal. Closer to the reference image.
 // ===========================================================================
-const KNOB_SIZE = 64;
+const KNOB_SIZE = 50;
 function setupCanvas(canvas, size) {
   const dpr = window.devicePixelRatio || 1;
   canvas.style.width  = size + 'px';
@@ -404,107 +418,74 @@ function setupCanvas(canvas, size) {
   return ctx;
 }
 
-function drawHwKnob(ctx, size, norm) {
+function drawKnob(ctx, size, norm) {
   const cx = size / 2, cy = size / 2 + 1;
-  const outerR = size * 0.46;
-  const bezelR = size * 0.42;
-  const dialR  = size * 0.34;
+  const dialR = size * 0.40;
   ctx.clearRect(0, 0, size, size);
 
-  // outer bezel (darker ring)
-  const bezel = ctx.createRadialGradient(cx - outerR*0.4, cy - outerR*0.5, 0, cx, cy, outerR);
-  bezel.addColorStop(0, '#3a342c');
-  bezel.addColorStop(0.6, '#1f1b16');
-  bezel.addColorStop(1, '#0c0a07');
-  ctx.fillStyle = bezel;
+  // soft outer drop shadow under the knob (sits ON the panel)
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.6)';
+  ctx.shadowBlur = 6;
+  ctx.shadowOffsetY = 2;
+  ctx.fillStyle = '#000';
   ctx.beginPath();
-  ctx.arc(cx, cy, outerR, 0, Math.PI * 2);
+  ctx.arc(cx, cy, dialR, 0, Math.PI * 2);
   ctx.fill();
+  ctx.restore();
 
-  // value arc — amber, with glow
+  // value arc — amber, only the active portion is drawn (no background track)
   const startA = Math.PI * 0.78, endA = Math.PI * 2.22;
   ctx.lineCap = 'round';
-  ctx.lineWidth = 2;
-  ctx.strokeStyle = 'rgba(255,174,92,0.18)';
+  ctx.lineWidth = 1.6;
+  ctx.strokeStyle = 'rgba(232,160,80,0.10)';   // very faint full track
   ctx.beginPath();
-  ctx.arc(cx, cy, bezelR + 2, startA, endA);
+  ctx.arc(cx, cy, dialR + 2.5, startA, endA);
   ctx.stroke();
-  ctx.strokeStyle = '#ffae5c';
-  ctx.shadowBlur = 5;
-  ctx.shadowColor = 'rgba(255,174,92,0.7)';
+  ctx.strokeStyle = '#e8a050';
+  ctx.shadowBlur = 3;
+  ctx.shadowColor = 'rgba(232,160,80,0.5)';
   ctx.beginPath();
-  ctx.arc(cx, cy, bezelR + 2, startA, startA + norm * (endA - startA));
+  ctx.arc(cx, cy, dialR + 2.5, startA, startA + norm * (endA - startA));
   ctx.stroke();
   ctx.shadowBlur = 0;
 
-  // inner dial — brushed metal radial gradient
-  const dial = ctx.createRadialGradient(
-    cx - dialR * 0.45, cy - dialR * 0.55, dialR * 0.05,
+  // dial body — neutral charcoal black, NOT warm brown
+  const grad = ctx.createRadialGradient(
+    cx - dialR * 0.35, cy - dialR * 0.5, 0,
     cx, cy, dialR * 1.1
   );
-  dial.addColorStop(0,    '#5a5246');
-  dial.addColorStop(0.45, '#2c2820');
-  dial.addColorStop(1,    '#0a0805');
-  ctx.fillStyle = dial;
+  grad.addColorStop(0,    '#2a2a28');   // top-left highlight
+  grad.addColorStop(0.5,  '#141312');
+  grad.addColorStop(1,    '#040404');
+  ctx.fillStyle = grad;
   ctx.beginPath();
   ctx.arc(cx, cy, dialR, 0, Math.PI * 2);
   ctx.fill();
 
-  // brushed metal striations (faint concentric arcs)
-  ctx.strokeStyle = 'rgba(255,220,180,0.04)';
-  ctx.lineWidth = 0.5;
-  for (let i = 0; i < 5; i++) {
-    ctx.beginPath();
-    ctx.arc(cx, cy, dialR * (0.55 + i * 0.07), -0.3, 0.3 + Math.PI);
-    ctx.stroke();
-  }
-
-  // knurled edge (small ridges around perimeter)
-  ctx.strokeStyle = 'rgba(0,0,0,0.55)';
+  // outer dark ring (separates dial from panel)
+  ctx.strokeStyle = 'rgba(0,0,0,0.85)';
   ctx.lineWidth = 1;
-  for (let i = 0; i < 36; i++) {
-    const a = (i / 36) * Math.PI * 2;
-    const r1 = dialR * 0.94, r2 = dialR * 1.0;
-    ctx.beginPath();
-    ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
-    ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
-    ctx.stroke();
-  }
-  ctx.strokeStyle = 'rgba(255,220,180,0.08)';
-  for (let i = 0; i < 36; i++) {
-    const a = (i / 36 + 0.5/36) * Math.PI * 2;
-    const r1 = dialR * 0.94, r2 = dialR * 1.0;
-    ctx.beginPath();
-    ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1);
-    ctx.lineTo(cx + Math.cos(a) * r2, cy + Math.sin(a) * r2);
-    ctx.stroke();
-  }
-
-  // specular highlight from NW
-  const hl = ctx.createRadialGradient(
-    cx - dialR * 0.4, cy - dialR * 0.55, 0,
-    cx - dialR * 0.4, cy - dialR * 0.55, dialR
-  );
-  hl.addColorStop(0, 'rgba(255,220,180,0.18)');
-  hl.addColorStop(0.5, 'rgba(255,220,180,0.04)');
-  hl.addColorStop(1, 'rgba(0,0,0,0)');
-  ctx.fillStyle = hl;
   ctx.beginPath();
   ctx.arc(cx, cy, dialR, 0, Math.PI * 2);
-  ctx.fill();
+  ctx.stroke();
 
-  // indicator notch (engraved, white-warm)
+  // glossy top crescent — short bright arc on the upper half
+  ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+  ctx.lineWidth = 0.8;
+  ctx.beginPath();
+  ctx.arc(cx, cy, dialR - 1.0, Math.PI * 1.18, Math.PI * 1.82);
+  ctx.stroke();
+
+  // indicator: short cream tick from edge inward
   const ang = startA + norm * (endA - startA);
-  ctx.strokeStyle = 'rgba(255,235,210,0.85)';
-  ctx.shadowBlur = 3;
-  ctx.shadowColor = 'rgba(0,0,0,0.7)';
-  ctx.lineWidth = 2.2;
+  ctx.strokeStyle = 'rgba(245,235,215,0.92)';
+  ctx.lineWidth = 1.6;
   ctx.lineCap = 'round';
   ctx.beginPath();
-  ctx.moveTo(cx + Math.cos(ang) * dialR * 0.45, cy + Math.sin(ang) * dialR * 0.45);
+  ctx.moveTo(cx + Math.cos(ang) * dialR * 0.55, cy + Math.sin(ang) * dialR * 0.55);
   ctx.lineTo(cx + Math.cos(ang) * dialR * 0.88, cy + Math.sin(ang) * dialR * 0.88);
   ctx.stroke();
-  ctx.shadowBlur = 0;
 }
 
 document.querySelectorAll('canvas.hw-knob').forEach((canvas) => {
@@ -515,9 +496,9 @@ document.querySelectorAll('canvas.hw-knob').forEach((canvas) => {
   let value = parseFloat(canvas.dataset.value);
   const ctx = setupCanvas(canvas, KNOB_SIZE);
   const fmt = (v) => v.toFixed(dec);
-  const norm = () => (value - min) / (max - min);
   const redraw = () => {
-    drawHwKnob(ctx, KNOB_SIZE, Math.max(0, Math.min(1, norm())));
+    const norm = Math.max(0, Math.min(1, (value - min) / (max - min)));
+    drawKnob(ctx, KNOB_SIZE, norm);
     if (valueEl) valueEl.textContent = fmt(value);
   };
   redraw();
@@ -555,7 +536,7 @@ document.querySelectorAll('canvas.hw-knob').forEach((canvas) => {
 });
 
 // ===========================================================================
-//  step LEDs — render from data-pattern, click to toggle, animated playhead
+//  step LEDs
 // ===========================================================================
 document.querySelectorAll('.seq-row').forEach((row) => {
   const pattern = row.dataset.pattern.split('').map((c) => c === '1' ? 1 : 0);
@@ -574,7 +555,6 @@ document.querySelectorAll('.seq-row').forEach((row) => {
   row._cells = cells;
 });
 
-// global playhead at 120 BPM 1/16 (≈ 8 steps/sec)
 let phStep = 0;
 const allRows = document.querySelectorAll('.seq-row');
 setInterval(() => {