From 27f89b288e3095fea78f7bbff921ea99a8ddb729 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 18:58:43 +0200
Subject: [PATCH] web: port studio hardware aesthetic into the real app

Aligns web/index.html with the design language captured in docs/design-system.md
(reference: web/sandbox/studio.html). The whole UI now reads as a single rack
module: corner screws, top/bottom bars, screen recess, and L2 sub-panels.

- Replace dark-blue token palette with the warm-neutral hardware palette
  and the shared --metal-specular / --metal-brush / --metal-bevel layers.
- Wrap header + main + footer in a .hardware shell with 4 corner screws.
- Editor lives inside a .screen recess (deep inset shadows, transparent
  CodeMirror background, amber cursor + selection).
- Splitter is now a hairline that lights amber on hover/drag.
- Right pane groups widgets by kind into shared sub-panels (.knobs, .faders,
  .seq); each piano_roll is its own panel.
- drawKnob ported with all 8 layers (drop shadow, amber arc, dark rim,
  metallic disc with concentric brushing + vertical lighting + specular
  band + rim light + bevel + inset + engraved notch). DPR-aware canvas.
- Faders use a deep slot track with side ticks and a metallic cap.
- Step seq cells become .led with amber glow + beat dividers.
- Piano roll keys + cells recolored to warm/amber palette.
- Wave widgets render with amber glow on a recessed background.
- RUN/STOP button group with led swap; bottom-bar shows IDLE/RUNNING.

Also: ignore local-only /referencias (heavy reference images, not source).
---
 .gitignore     |    3 +
 web/index.html | 1027 ++++++++++++++++++++++++++++++++++++------------
 2 files changed, 783 insertions(+), 247 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2661ad5..97d2b58 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,6 @@ venv/
 .DS_Store
 Thumbs.db
 *.swp
+
+# Local-only design references (heavy images, not part of the source)
+referencias/
diff --git a/web/index.html b/web/index.html
index 263087f..cf5dde0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -27,37 +27,62 @@
 </script>
 
 <style>
-  /* === design tokens === */
+  /* === design tokens — studio hardware emulation ===
+     full reference: docs/design-system.md */
   :root {
-    --bg: #0e0f12;
-    --panel: #14161a;
-    --panel-hi: #1a1d22;
-    --gutter: #2a2f38;
-    --gutter-hi: #404652;
-    --divider: #1c1f25;
-    --fg: #d6dae0;
-    --fg-mute: #aab0b8;
-    --comment: #5a6470;
-    --kw: #c678dd;
-    --num: #d19a66;
-    --atom: #56b6c2;
-    --func: #61afef;
-    --wave: #7af0c0;
-    --wave-bg: #161a1f;
-    --error: #f08080;
-    --accent: #7af0c0;
-    --accent-glow: rgba(122, 240, 192, 0.30);
-    --knob-track: #2a2f38;
+    --bg:        #131210;       /* page bg, behind the rack */
+    --hw-bg:     #1a1916;
+    --hw-bg-hi:  #232220;
+    --hw-bg-lo:  #0e0d0b;
+    --hw-edge:   #050505;
+    --hw-screen: #161412;
+    --hw-fg:      #a8a39a;
+    --hw-fg-hi:   #d8d0c0;
+    --hw-fg-dim:  #6c6660;
+    --hw-engrave: #8a847a;
 
-    /* scrollbar */
-    --scrollbar-thumb: #2a2f38;
-    --scrollbar-thumb-hover: #3a4048;
+    --hw-amber:      #e8a050;
+    --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-led-red:   #c84838;
+    --hw-led-green: #6aca8a;
+    --hw-error:     #e07060;
+
+    /* code syntax — warm desaturated palette */
+    --hw-syn-com: #5a554f;
+    --hw-syn-kw:  #d68868;
+    --hw-syn-num: #d6a268;
+    --hw-syn-fn:  #c8a878;
+    --hw-syn-id:  #b8b0a0;
+    --hw-syn-op:  #6c6660;
+
+    /* shared brushed-metal language */
+    --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);
+
+    --scrollbar-thumb:        #3a342d;
+    --scrollbar-thumb-hover:  #5a544a;
 
-    /* layout */
     --right-w: 360px;
-    --splitter-w: 4px;
+    --splitter-w: 6px;
 
-    /* timing */
     --t-fast: 80ms;
     --t-base: 160ms;
     --t-slow: 280ms;
@@ -65,12 +90,12 @@
 
   /* === reset / base === */
   * { box-sizing: border-box; }
-  html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg);
+  html, body { height: 100%; margin: 0; background: var(--bg); color: var(--hw-fg);
                font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
-               font-size: 14px; }
-  body { display: flex; flex-direction: column; }
+               font-size: 12px; }
+  body { display: flex; flex-direction: column; padding: 8px; }
 
-  /* === scrollbars (global, also apply to CodeMirror's .cm-scroller) === */
+  /* === scrollbars === */
   * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
   ::-webkit-scrollbar        { width: 10px; height: 10px; }
   ::-webkit-scrollbar-track  { background: transparent; }
@@ -79,153 +104,479 @@
                                background-clip: padding-box;
                                transition: background var(--t-base); }
   ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover);
-                                    background-clip: padding-box;
-                                    border: 2px solid transparent; }
+                                    background-clip: padding-box; }
   ::-webkit-scrollbar-corner { background: transparent; }
 
-  /* === header === */
-  header { padding: 8px 14px; font-size: 12px; color: var(--comment);
-           border-bottom: 1px solid var(--divider); display: flex; gap: 12px;
-           flex-wrap: wrap; align-items: center; }
-  header button { background: var(--panel); border: 1px solid var(--gutter);
-                  color: var(--fg); padding: 5px 14px; cursor: pointer;
-                  font-family: inherit; font-size: 12px; border-radius: 3px;
-                  transition: border-color var(--t-fast), color var(--t-fast),
-                              background var(--t-fast), transform var(--t-fast); }
-  header button:hover { border-color: var(--accent); color: var(--accent); }
-  header button:focus-visible { outline: 2px solid var(--accent-glow);
-                                outline-offset: 2px; }
-  header button:active:not(:disabled) { transform: translateY(1px); }
-  header button:disabled { opacity: 0.4; cursor: default; }
-  .header-sep { width: 1px; height: 16px; background: var(--gutter);
-                opacity: 0.7; }
+  /* ===================================================================== */
+  /*  Outer rack — wraps the whole app                                       */
+  /* ===================================================================== */
+  .hardware {
+    flex: 1; display: flex; flex-direction: column;
+    position: relative;
+    background:
+      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:
+      var(--metal-bevel),
+      inset 0 0 0 1px rgba(232, 160, 80, 0.04),
+      0 8px 32px rgba(0, 0, 0, 0.65);
+    padding: 14px;
+    gap: 10px;
+    min-height: 0;
+  }
+  .screw {
+    position: absolute;
+    width: 8px; height: 8px; border-radius: 50%;
+    background: 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.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.55) 47%,
+                                       rgba(0,0,0,0.55) 53%, transparent 56%);
+    border-radius: 50%;
+  }
+  .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; }
 
-  /* range input (gain slider in header + everywhere) */
-  input[type=range] { -webkit-appearance: none; appearance: none;
-                      height: 4px; background: var(--knob-track);
-                      border-radius: 2px; vertical-align: middle;
-                      width: 90px; cursor: pointer; outline: none; }
+  /* ===================================================================== */
+  /*  Top / bottom bars (L1)                                                 */
+  /* ===================================================================== */
+  .top-bar, .bottom-bar {
+    min-height: 30px;
+    display: flex; align-items: stretch; gap: 10px;
+    padding: 3px 12px;
+    color: var(--hw-fg-dim);
+    font-size: 10px; letter-spacing: 0.08em;
+    background:
+      var(--metal-specular),
+      var(--metal-brush),
+      linear-gradient(180deg, #25211d 0%, #16130f 100%);
+    border: 1px solid var(--hw-edge);
+    border-radius: 4px;
+    box-shadow:
+      var(--metal-bevel),
+      0 2px 4px rgba(0, 0, 0, 0.4);
+    flex-wrap: wrap;
+  }
+  .top-bar > *, .bottom-bar > * { align-self: center; }
+  .top-bar .btn-group { align-self: stretch; }
+  .header-sep { width: 1px; height: 16px; background: var(--hw-edge);
+                opacity: 0.8; align-self: center; }
+
+  .btn-group { display: flex; align-items: stretch; height: 100%; }
+  .btn-group .hw-btn { border-radius: 0; border-right-width: 0; }
+  .btn-group .hw-btn:first-child { border-radius: 3px 0 0 3px; }
+  .btn-group .hw-btn:last-child  { border-radius: 0 3px 3px 0; border-right-width: 1px; }
+
+  .hw-btn {
+    background: linear-gradient(180deg, #2c261f 0%, #14110d 100%);
+    border: 1px solid var(--hw-edge);
+    color: var(--hw-fg-hi);
+    padding: 0 14px;
+    font-family: inherit; font-size: 10px;
+    cursor: pointer;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    box-shadow:
+      inset 0 1px 0  rgba(255,220,180,0.10),
+      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: 6px;
+    transition: color var(--t-fast);
+  }
+  .hw-btn:hover:not(:disabled) { color: var(--hw-amber); }
+  .hw-btn:active:not(:disabled) { transform: translateY(1px);
+                                  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6); }
+  .hw-btn:disabled { opacity: 0.45; cursor: default; }
+  .hw-btn:focus-visible { outline: 1px solid var(--hw-amber-glow);
+                          outline-offset: 2px; }
+
+  .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);
+  }
+  .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));
+  }
+
+  .top-bar .num     { color: var(--hw-amber); font-variant-numeric: tabular-nums; }
+  .top-bar .right   { margin-left: auto; color: var(--hw-engrave); letter-spacing: 0.18em; }
+
+  .top-bar .dot {
+    width: 8px; height: 8px; border-radius: 50%; background: #3a342d;
+    display: inline-block; vertical-align: middle; margin-right: 6px;
+    transition: background var(--t-base), box-shadow var(--t-base);
+  }
+  .top-bar .dot.live { background: var(--hw-amber);
+                       animation: led-pulse 1.8s ease-in-out infinite; }
+  @keyframes led-pulse {
+    0%, 100% { box-shadow: 0 0 3px var(--hw-amber-glow); }
+    50%      { box-shadow: 0 0 8px var(--hw-amber); }
+  }
+
+  /* range input — plain narrow bar with a metal cap */
+  input[type=range] {
+    -webkit-appearance: none; appearance: none;
+    height: 4px; background: linear-gradient(180deg, #050402, #0a0808 50%, #060403);
+    border-radius: 2px; vertical-align: middle;
+    width: 90px; cursor: pointer; outline: none;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,0,0,0.6);
+  }
   input[type=range]::-webkit-slider-thumb {
     -webkit-appearance: none; appearance: none;
-    width: 12px; height: 12px; border-radius: 50%; background: var(--fg);
-    cursor: grab; transition: background var(--t-fast),
-                              box-shadow var(--t-fast); }
-  input[type=range]:hover::-webkit-slider-thumb { background: var(--accent); }
-  input[type=range]:active::-webkit-slider-thumb { cursor: grabbing;
-                                box-shadow: 0 0 0 4px var(--accent-glow); }
-  input[type=range]::-moz-range-thumb {
-    width: 12px; height: 12px; border-radius: 50%; background: var(--fg);
-    border: none; cursor: grab; transition: background var(--t-fast); }
-  input[type=range]:focus-visible::-webkit-slider-thumb {
-    box-shadow: 0 0 0 3px var(--accent-glow); }
-
-  header .dot { width: 8px; height: 8px; border-radius: 50%; background: #555;
-                display: inline-block; vertical-align: middle; margin-right: 6px;
-                transition: background var(--t-base), box-shadow var(--t-base); }
-  header .dot.live { background: var(--accent);
-                     animation: pulse 1.6s ease-in-out infinite; }
-  @keyframes pulse {
-    0%, 100% { box-shadow: 0 0 6px var(--accent); }
-    50%      { box-shadow: 0 0 14px var(--accent); }
+    width: 14px; height: 12px; border-radius: 2px;
+    background:
+      linear-gradient(180deg,
+        transparent 38%, rgba(0,0,0,0.45) 46%, rgba(0,0,0,0.45) 54%, transparent 62%),
+      linear-gradient(180deg, #b6b0a4 0%, #807a6e 50%, #3a352e 90%, #1a1612 100%);
+    box-shadow:
+      inset 0 1px 0 rgba(255,252,240,0.55),
+      inset 0 -1px 0 rgba(0,0,0,0.7),
+      0 2px 3px rgba(0,0,0,0.6);
+    cursor: grab;
+  }
+  input[type=range]:active::-webkit-slider-thumb { cursor: grabbing; }
+  input[type=range]::-moz-range-thumb {
+    width: 14px; height: 12px; border-radius: 2px;
+    background: linear-gradient(180deg, #b6b0a4 0%, #807a6e 50%, #3a352e 90%, #1a1612 100%);
+    border: none; cursor: grab;
+  }
+  input[type=range]:focus-visible::-webkit-slider-thumb {
+    box-shadow: inset 0 1px 0 rgba(255,252,240,0.55),
+                inset 0 -1px 0 rgba(0,0,0,0.7),
+                0 0 0 2px var(--hw-amber-glow);
   }
-  #error { color: var(--error); flex: 1; min-width: 0; overflow: hidden;
-           text-overflow: ellipsis; white-space: nowrap; }
 
-  /* === main layout: editor | splitter | controls === */
+  #error  { color: var(--hw-error); flex: 1; min-width: 0; overflow: hidden;
+            text-overflow: ellipsis; white-space: nowrap; }
+  #info   { color: var(--hw-engrave); }
+
+  /* ===================================================================== */
+  /*  Main: screen recess | splitter | right stack                           */
+  /* ===================================================================== */
   main { flex: 1; display: grid;
          grid-template-columns: minmax(320px, 1fr) var(--splitter-w) minmax(260px, var(--right-w));
-         min-height: 0; }
-  #editor { background: var(--panel); overflow: hidden; }
-  .cm-editor { height: 100%; font-size: 14px; }
-  .cm-editor.cm-focused { outline: none; }
-  .cm-content { font-family: inherit; }
+         min-height: 0; gap: 0; }
 
-  /* draggable seam between editor and control surface */
-  .splitter { background: var(--divider); position: relative;
-              cursor: col-resize; transition: background var(--t-base); }
-  .splitter::before {  /* widen hit area to ~12px without changing visual width */
+  /* code area is a recess, not a panel */
+  .screen {
+    background: var(--hw-screen);
+    border-radius: 4px;
+    padding: 8px;
+    box-shadow:
+      inset 0 2px 4px rgba(0,0,0,0.7),
+      inset 0 -1px 0 rgba(255,220,180,0.03),
+      inset 0 0 0 1px var(--hw-edge),
+      inset 0 6px 14px rgba(0,0,0,0.5);
+    overflow: hidden;
+    min-width: 0;
+    display: flex; flex-direction: column;
+  }
+  #editor { flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
+
+  .cm-editor { height: 100%; font-size: 13px; background: transparent !important; }
+  .cm-editor.cm-focused { outline: none !important; }
+  .cm-editor .cm-content { font-family: inherit; caret-color: var(--hw-amber); }
+  .cm-editor .cm-gutters {
+    background: transparent !important;
+    border-right: 1px solid rgba(255, 220, 180, 0.04) !important;
+    color: var(--hw-syn-com);
+  }
+  .cm-editor .cm-activeLine,
+  .cm-editor .cm-activeLineGutter { background: rgba(255, 220, 180, 0.025) !important; }
+  .cm-editor .cm-cursor { border-left-color: var(--hw-amber) !important; }
+  .cm-editor .cm-selectionBackground,
+  .cm-editor.cm-focused .cm-selectionBackground,
+  .cm-editor ::selection { background: rgba(232, 160, 80, 0.20) !important; }
+  .cm-editor .cm-scroller { font-family: inherit; }
+
+  /* draggable seam */
+  .splitter { position: relative; cursor: col-resize;
+              background: transparent; transition: background var(--t-base); }
+  .splitter::before {  /* widen hit area */
     content: ''; position: absolute; inset: 0 -4px; z-index: 2; }
-  .splitter:hover, .splitter.dragging { background: var(--accent); }
+  .splitter::after {  /* central hairline */
+    content: ''; position: absolute; left: 50%; top: 14%; bottom: 14%;
+    width: 1px; background: rgba(0,0,0,0.6);
+    box-shadow: 1px 0 0 rgba(255, 220, 180, 0.04);
+    transform: translateX(-50%);
+    transition: background var(--t-base), box-shadow var(--t-base);
+  }
+  .splitter:hover::after,
+  .splitter.dragging::after { background: var(--hw-amber);
+                              box-shadow: 0 0 6px var(--hw-amber-glow); }
 
+  /* inline wave widget after each `node X = ...` line */
   .wave-widget { display: inline-block; vertical-align: middle; margin-left: 12px;
-                 background: var(--wave-bg); border-radius: 3px; }
+                 background: #0a0908; border-radius: 2px;
+                 box-shadow: inset 0 1px 2px rgba(0,0,0,0.7),
+                             inset 0 0 0 1px var(--hw-edge); }
 
-  /* === control surface === */
-  #controls { padding: 16px; overflow: auto;
-              display: flex; flex-wrap: wrap; gap: 18px; align-content: flex-start; }
-  #controls.empty::before { content: 'declare faders or knobs in the patch to populate this surface →←';
-                            color: var(--comment); font-size: 11px; line-height: 1.5;
-                            display: block; padding: 20px 8px; }
-  .ctrl { display: flex; flex-direction: column; align-items: center;
-          gap: 6px; min-width: 70px; padding: 10px;
-          background: var(--panel); border: 1px solid var(--gutter);
-          border-radius: 6px;
-          transition: border-color var(--t-base), box-shadow var(--t-base); }
-  .ctrl:hover { border-color: var(--gutter-hi); }
-  .ctrl-label { font-size: 10px; color: var(--fg-mute); user-select: none;
-                max-width: 80px; overflow: hidden; text-overflow: ellipsis;
-                text-transform: uppercase; letter-spacing: 0.06em; }
-  .ctrl-value { font-size: 10px; color: var(--accent); font-variant-numeric: tabular-nums;
-                user-select: none; }
-  .knob-canvas { cursor: grab; touch-action: none; }
-  .knob-canvas.dragging { cursor: grabbing; }
-  .fader { display: flex; flex-direction: column; align-items: center; height: 140px; }
-  .fader-track { position: relative; width: 6px; height: 100px; background: var(--knob-track);
-                 border-radius: 3px; cursor: grab; touch-action: none; }
-  .fader-track.dragging { cursor: grabbing; }
+  /* ===================================================================== */
+  /*  Right pane — sub-panels grouped by control kind                        */
+  /* ===================================================================== */
+  #controls { padding: 0; overflow: auto;
+              display: flex; flex-direction: column; gap: 8px;
+              min-width: 0; min-height: 0; }
+  #controls.empty::before {
+    content: 'declare faders, knobs, step_seq, or piano_roll in the patch';
+    color: var(--hw-engrave); font-size: 10px; line-height: 1.5;
+    letter-spacing: 0.08em; display: block; padding: 16px 12px;
+    border: 1px dashed rgba(255, 220, 180, 0.10); border-radius: 4px;
+  }
 
-  /* step sequencer */
-  .ctrl.stepseq { width: 100%; align-items: stretch; padding: 8px 10px; }
-  .stepseq-row { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto;
-                 padding: 2px; touch-action: pan-x; }
-  .step { flex: 0 0 18px; height: 24px; border-radius: 2px;
-          background: #1c2026; cursor: pointer;
-          transition: background 60ms; }
-  .step:hover { background: #2a3038; }
-  .step.on { background: var(--accent); box-shadow: 0 0 4px var(--accent); }
-  .step.beat { border-top: 1px solid #3a4048; }
-  .step.playhead { outline: 1px solid #fff; outline-offset: -1px; }
-  .ctrl.stepseq .ctrl-label { align-self: flex-start; padding-left: 2px; }
+  /* shared L2 sub-panel */
+  .panel {
+    border: 1px solid var(--hw-edge);
+    border-radius: 6px;
+    background:
+      var(--metal-specular),
+      var(--metal-brush),
+      linear-gradient(180deg, #2c2823 0%, #1a1612 55%, #110d09 100%);
+    box-shadow:
+      var(--metal-bevel),
+      inset 0 -10px 14px -10px rgba(255, 220, 180, 0.10),
+      0 2px 4px rgba(0, 0, 0, 0.45),
+      0 6px 14px rgba(0, 0, 0, 0.30);
+  }
 
-  /* piano roll */
-  .ctrl.pianoroll { width: 100%; align-items: stretch; padding: 8px 10px; gap: 4px; }
-  .pianoroll-grid { display: grid; grid-auto-rows: 14px; gap: 1px;
-                    background: #0a0c10; padding: 2px; border-radius: 3px;
-                    overflow: auto; touch-action: none; user-select: none; }
-  .pr-row { display: contents; }
-  .pr-key { background: #1a1d22; color: #aab; font-size: 9px; line-height: 14px;
-            padding: 0 4px; user-select: none; text-align: right; min-width: 32px; }
-  .pr-key.black { background: #0e1014; color: #66c; }
-  .pr-key.octave { background: #232730; color: var(--accent); }
-  .pr-cell { height: 14px; background: #1c2026; cursor: pointer;
+  /* knobs panel: 2-col grid */
+  .panel.knobs {
+    padding: 14px 12px;
+    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);
+    user-select: none; max-width: 72px; overflow: hidden;
+    text-overflow: ellipsis; white-space: nowrap;
+  }
+  .knob-cell .value {
+    font-size: 10px; font-variant-numeric: tabular-nums;
+    color: var(--hw-fg-hi); letter-spacing: 0.05em;
+    min-width: 46px; text-align: center; user-select: none;
+  }
+  .hw-knob { cursor: grab; touch-action: none; }
+  .hw-knob.dragging { cursor: grabbing; }
+
+  /* faders panel: flex row */
+  .panel.faders {
+    padding: 10px 10px 14px;
+    display: flex; justify-content: space-around; align-items: flex-start;
+    gap: 8px; flex-wrap: wrap;
+  }
+  .fader-cell {
+    display: flex; flex-direction: column; align-items: center;
+    gap: 4px; flex: 0 1 auto; min-width: 36px;
+  }
+  .fader-cell .label {
+    font-size: 8px; 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.04);
+    user-select: none; max-width: 58px; overflow: hidden;
+    text-overflow: ellipsis; white-space: nowrap;
+  }
+  .fd-track {
+    position: relative;
+    width: 5px; height: 100px;
+    background: linear-gradient(180deg, #050402 0%, #0a0808 50%, #060403 100%);
+    border-radius: 3px;
+    box-shadow:
+      inset 0 1px 3px rgba(0,0,0,0.85),
+      inset 0 0 0 1px rgba(0,0,0,0.6),
+      inset 0 -1px 0 rgba(255,220,180,0.05),
+      0 1px 0 rgba(255,220,180,0.04);
+    cursor: pointer; touch-action: none;
+  }
+  .fd-ticks {
+    position: absolute; top: 4px; bottom: 4px;
+    width: 16px; pointer-events: none;
+    background: repeating-linear-gradient(180deg,
+      rgba(255,220,180,0.20) 0px,
+      rgba(255,220,180,0.20) 1px,
+      transparent             1px,
+      transparent             7px);
+  }
+  .fd-ticks.left  { left: -18px; }
+  .fd-ticks.right { right: -18px; }
+  .fd-cap {
+    position: absolute; left: 50%; transform: translate(-50%, -50%);
+    width: 26px; height: 14px; border-radius: 2px;
+    background:
+      linear-gradient(180deg,
+        transparent 38%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0.55) 54%,
+        transparent 62%),
+      repeating-linear-gradient(0deg,
+        rgba(255,250,235,0.04) 0px, rgba(255,250,235,0.04) 1px,
+        rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px),
+      linear-gradient(180deg, #b6b0a4 0%, #807a6e 45%, #3a352e 80%, #1a1612 100%);
+    box-shadow:
+      inset 0 1px 0 rgba(255,252,240,0.55),
+      inset 0 -1px 0 rgba(0,0,0,0.7),
+      inset 1px 0 0 rgba(255,250,235,0.15),
+      inset -1px 0 0 rgba(0,0,0,0.45),
+      0 2px 3px rgba(0,0,0,0.6);
+    pointer-events: none;
+  }
+  .fd-track.dragging { cursor: grabbing; }
+  .fader-cell .value {
+    font-size: 10px; font-variant-numeric: tabular-nums;
+    color: var(--hw-fg-hi); letter-spacing: 0.05em; margin-top: 2px;
+  }
+
+  /* sequencer panel: stack of seq-rows */
+  .panel.seq {
+    padding: 8px 10px;
+    display: flex; flex-direction: column; gap: 5px;
+  }
+  .seq-row { display: flex; align-items: center; gap: 8px; }
+  .seq-row .label {
+    width: 56px; flex: 0 0 56px;
+    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);
+    user-select: none; overflow: hidden;
+    text-overflow: ellipsis; white-space: nowrap;
+  }
+  .leds {
+    display: flex; gap: 2px; flex: 1; min-width: 0; flex-wrap: nowrap;
+    overflow-x: auto; touch-action: pan-x;
+  }
+  .led {
+    flex: 1 1 0; min-width: 8px; height: 14px; 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% 25%,
+                  var(--hw-amber-hi) 0%, var(--hw-amber) 55%, #a06820 100%);
+    box-shadow: inset 0 0 2px rgba(255,255,255,0.4),
+                0 0 5px var(--hw-amber-glow);
+  }
+  .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;
+  }
+
+  /* piano roll panel: full-width grid */
+  .panel.pianoroll {
+    padding: 8px 10px;
+    display: flex; flex-direction: column; gap: 5px;
+  }
+  .panel.pianoroll > .label {
+    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);
+    user-select: none; padding-left: 2px;
+  }
+  .pianoroll-grid {
+    display: grid; grid-auto-rows: 14px; gap: 1px;
+    background: #0a0805;
+    padding: 2px; border-radius: 3px;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), inset 0 0 0 1px var(--hw-edge);
+    overflow: auto; touch-action: none; user-select: none;
+  }
+  .pr-key {
+    background: linear-gradient(180deg, #2a2620 0%, #14110d 100%);
+    color: var(--hw-fg-dim); font-size: 9px; line-height: 14px;
+    padding: 0 4px; user-select: none; text-align: right; min-width: 32px;
+    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.6);
+  }
+  .pr-key.black { background: linear-gradient(180deg, #14110d 0%, #060403 100%);
+                  color: var(--hw-syn-com); }
+  .pr-key.octave { color: var(--hw-amber); }
+  .pr-cell { height: 14px; background: #100c08; cursor: pointer;
              transition: background 60ms; }
-  .pr-cell.row-black { background: #161a20; }
-  .pr-cell.beat { border-left: 1px solid #2a3038; }
-  .pr-cell:hover { background: #2a3038; }
-  .pr-cell.on { background: var(--accent); box-shadow: 0 0 3px var(--accent); }
-  .pr-cell.col-playhead { outline: 1px solid rgba(255,255,255,0.4); outline-offset: -1px; }
-  .ctrl.pianoroll .ctrl-label { align-self: flex-start; padding-left: 2px; }
-  .fader-fill { position: absolute; bottom: 0; left: 0; right: 0;
-                background: var(--accent); border-radius: 3px; }
-  .fader-cap { position: absolute; left: -9px; right: -9px; height: 14px;
-               background: var(--fg); border-radius: 2px; transform: translateY(50%); }
+  .pr-cell.row-black { background: #0a0805; }
+  .pr-cell.beat      { box-shadow: inset 1px 0 0 var(--hw-amber-mut); }
+  .pr-cell:hover     { background: #2a1f12; }
+  .pr-cell.on {
+    background: radial-gradient(circle at 50% 25%,
+                  var(--hw-amber-hi) 0%, var(--hw-amber) 55%, #a06820 100%);
+    box-shadow: inset 0 0 2px rgba(255,255,255,0.4),
+                0 0 3px var(--hw-amber-glow);
+  }
+  .pr-cell.col-playhead { outline: 1px solid rgba(232, 160, 80, 0.5);
+                          outline-offset: -1px; }
+
+  /* bottom bar */
+  .running-label {
+    color: var(--hw-amber); font-size: 10px; letter-spacing: 0.18em;
+    text-shadow: 0 0 5px var(--hw-amber-glow);
+  }
+  .running-dot {
+    display: inline-block;
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--hw-amber);
+    box-shadow: 0 0 5px var(--hw-amber-glow);
+    margin-right: 6px; vertical-align: middle;
+    animation: led-pulse 2.2s ease-in-out infinite;
+  }
+  .running-label.idle { color: var(--hw-engrave); text-shadow: none; }
+  .running-label.idle .running-dot { background: #3a342d;
+                                     box-shadow: none; animation: none; }
+  .blink { animation: blink 1.1s step-end infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
 </style>
 </head>
 <body>
-<header>
-  <button id="start">Start audio</button>
-  <span><span id="dot" class="dot"></span><span id="status">stopped</span></span>
-  <span class="header-sep"></span>
-  <span>gain <input id="gain" type="range" min="0" max="1" step="0.01" value="0.3"></span>
-  <span class="header-sep"></span>
-  <span id="info"></span>
-  <span id="error"></span>
-</header>
-<main>
-  <div id="editor"></div>
-  <div class="splitter" id="splitter" title="drag to resize · double-click to reset"></div>
-  <div id="controls" class="empty"></div>
-</main>
+<div class="hardware">
+  <span class="screw tl"></span>
+  <span class="screw tr"></span>
+  <span class="screw bl"></span>
+  <span class="screw br"></span>
+
+  <div class="top-bar">
+    <div class="btn-group">
+      <button class="hw-btn" id="start"><span class="ico-play"></span><span id="start-label">RUN</span></button>
+    </div>
+    <span><span id="dot" class="dot"></span><span id="status">stopped</span></span>
+    <span class="header-sep"></span>
+    <span>GAIN <input id="gain" type="range" min="0" max="1" step="0.01" value="0.3"></span>
+    <span class="header-sep"></span>
+    <span id="info"></span>
+    <span id="error"></span>
+    <span class="right">CODE · SINTH</span>
+  </div>
+
+  <main>
+    <section class="screen">
+      <div id="editor"></div>
+    </section>
+    <div class="splitter" id="splitter" title="drag to resize · double-click to reset"></div>
+    <div id="controls" class="empty"></div>
+  </main>
+
+  <div class="bottom-bar">
+    <span class="running-label idle" id="running"><span class="running-dot"></span><span id="running-text">IDLE</span><span class="blink">_</span></span>
+  </div>
+</div>
 
 <script type="module">
 import { EditorView, basicSetup } from "codemirror";
@@ -308,13 +659,13 @@ const codeSinthLang = StreamLanguage.define({
 });
 
 const highlightStyle = HighlightStyle.define([
-  { tag: t.keyword,      color: 'var(--kw)' },
-  { tag: t.atom,         color: 'var(--atom)' },
-  { tag: t.number,       color: 'var(--num)' },
-  { tag: t.comment,      color: 'var(--comment)', fontStyle: 'italic' },
-  { tag: t.operator,     color: '#abb2bf' },
-  { tag: t.meta,         color: 'var(--func)' },
-  { tag: t.variableName, color: 'var(--fg)' },
+  { tag: t.keyword,      color: 'var(--hw-syn-kw)' },
+  { tag: t.atom,         color: 'var(--hw-syn-fn)' },
+  { tag: t.number,       color: 'var(--hw-syn-num)' },
+  { tag: t.comment,      color: 'var(--hw-syn-com)', fontStyle: 'italic' },
+  { tag: t.operator,     color: 'var(--hw-syn-op)' },
+  { tag: t.meta,         color: 'var(--hw-syn-fn)' },
+  { tag: t.variableName, color: 'var(--hw-syn-id)' },
 ]);
 
 // =====================================================================
@@ -360,13 +711,26 @@ const wavePlugin = ViewPlugin.fromClass(class {
 // =====================================================================
 //  audio + worklet wiring
 // =====================================================================
-const startBtn = document.getElementById('start');
-const dot      = document.getElementById('dot');
-const statusEl = document.getElementById('status');
-const info     = document.getElementById('info');
-const errBox   = document.getElementById('error');
-const gainSl   = document.getElementById('gain');
-const ctrlBox  = document.getElementById('controls');
+const startBtn   = document.getElementById('start');
+const startLabel = document.getElementById('start-label');
+const playIco    = startBtn.querySelector('.ico-play');
+const dot        = document.getElementById('dot');
+const statusEl   = document.getElementById('status');
+const info       = document.getElementById('info');
+const errBox     = document.getElementById('error');
+const gainSl     = document.getElementById('gain');
+const ctrlBox    = document.getElementById('controls');
+const runEl      = document.getElementById('running');
+const runText    = document.getElementById('running-text');
+
+function setRunningUI(running) {
+  runEl.classList.toggle('idle', !running);
+  runText.textContent = running ? 'RUNNING' : 'IDLE';
+  startLabel.textContent = running ? 'STOP' : 'RUN';
+  // swap the icon: green play triangle when stopped, red led when running
+  playIco.classList.toggle('led-red', running);
+  playIco.classList.toggle('ico-play', !running);
+}
 
 let audioCtx = null;
 let workletNode = null;
@@ -396,13 +760,17 @@ function sendPatch() {
   workletNode.port.postMessage({ type: 'patch', text: view.state.doc.toString() });
 }
 
-function setStatus(live, text) { dot.classList.toggle('live', live); statusEl.textContent = text; }
+function setStatus(live, text) {
+  dot.classList.toggle('live', live);
+  statusEl.textContent = text;
+  setRunningUI(live);
+}
 function setError(msg) { errBox.textContent = msg || ''; }
 
 async function startAudio() {
   if (audioCtx) return;
   startBtn.disabled = true;
-  startBtn.textContent = 'starting…';
+  startLabel.textContent = 'STARTING';
   try {
     audioCtx = new AudioContext();
     await audioCtx.audioWorklet.addModule('worklet.js');
@@ -417,12 +785,11 @@ async function startAudio() {
     workletNode.port.postMessage({ type: 'gain', value: parseFloat(gainSl.value) });
     sendPatch();
     setStatus(true, `running @ ${audioCtx.sampleRate} Hz`);
-    startBtn.textContent = 'stop audio';
     startBtn.disabled = false;
     startBtn.onclick = stopAudio;
   } catch (e) {
     setError(`audio init: ${e && e.message || e}`);
-    startBtn.textContent = 'Start audio';
+    setRunningUI(false);
     startBtn.disabled = false;
     audioCtx = null;
   }
@@ -432,7 +799,6 @@ async function stopAudio() {
   try { await audioCtx.close(); } catch {}
   audioCtx = null; workletNode = null;
   setStatus(false, 'stopped');
-  startBtn.textContent = 'Start audio';
   startBtn.onclick = startAudio;
   for (const k of Object.keys(taps)) delete taps[k];
 }
@@ -468,41 +834,188 @@ function sendControl(name, value) {
   workletNode.port.postMessage({ type: 'control', name, value });
 }
 
-function makeKnob(spec) {
-  const wrap = document.createElement('div'); wrap.className = 'ctrl';
-  const canvas = document.createElement('canvas');
-  canvas.className = 'knob-canvas';
-  canvas.width = 56; canvas.height = 56;
-  const valEl = document.createElement('div'); valEl.className = 'ctrl-value';
-  const labEl = document.createElement('div'); labEl.className = 'ctrl-label';
-  labEl.textContent = spec.name;
-  wrap.appendChild(canvas); wrap.appendChild(valEl); wrap.appendChild(labEl);
+// =====================================================================
+//  knob — 8-layer canvas drawing (studio hardware emulation).
+//  Canvas is intentionally larger than the visible disc so the amber
+//  arc and drop shadow have margin to render without clipping.
+// =====================================================================
+const KNOB_SIZE = 72;
 
+function setupCanvas(canvas, size) {
+  const dpr = window.devicePixelRatio || 1;
+  canvas.style.width  = size + 'px';
+  canvas.style.height = size + 'px';
+  canvas.width  = Math.round(size * dpr);
+  canvas.height = Math.round(size * dpr);
+  const ctx = canvas.getContext('2d');
+  ctx.scale(dpr, dpr);
+  return ctx;
+}
+
+function drawKnob(ctx, size, norm) {
+  const cx = size / 2, cy = size / 2;
+  const totalR = 26;
+  const rimW   = 2.5;
+  const discR  = totalR - rimW;
+  ctx.clearRect(0, 0, size, size);
+
+  // (1) drop shadow
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.7)';
+  ctx.shadowBlur = 6;
+  ctx.shadowOffsetY = 2;
+  ctx.fillStyle = '#000';
+  ctx.beginPath();
+  ctx.arc(cx, cy, totalR + 0.5, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+
+  // (2) amber value arc (faint full track + bright active)
+  const startA = Math.PI * 0.78, endA = Math.PI * 2.22;
+  ctx.lineCap = 'round';
+  ctx.lineWidth = 1.5;
+  ctx.strokeStyle = 'rgba(232,160,80,0.10)';
+  ctx.beginPath();
+  ctx.arc(cx, cy, totalR + 4, startA, endA);
+  ctx.stroke();
+  ctx.strokeStyle = '#e8a050';
+  ctx.shadowBlur = 3;
+  ctx.shadowColor = 'rgba(232,160,80,0.55)';
+  ctx.beginPath();
+  ctx.arc(cx, cy, totalR + 4, startA, startA + norm * (endA - startA));
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+
+  // (3) dark rim
+  const rim = ctx.createLinearGradient(0, cy - totalR, 0, cy + totalR);
+  rim.addColorStop(0,   '#2a2826');
+  rim.addColorStop(0.5, '#0a0908');
+  rim.addColorStop(1,   '#040404');
+  ctx.strokeStyle = rim;
+  ctx.lineWidth = rimW;
+  ctx.beginPath();
+  ctx.arc(cx, cy, totalR - rimW / 2, 0, Math.PI * 2);
+  ctx.stroke();
+
+  // (4a) metallic disc — base radial
+  const baseGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, discR);
+  baseGrad.addColorStop(0,   '#787268');
+  baseGrad.addColorStop(0.7, '#5a544c');
+  baseGrad.addColorStop(1,   '#36322d');
+  ctx.fillStyle = baseGrad;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR, 0, Math.PI * 2);
+  ctx.fill();
+
+  // (4b) concentric brushing — lathe-turned aluminium feel
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR - 0.3, 0, Math.PI * 2);
+  ctx.clip();
+  for (let r = discR; r > 0.5; r -= 0.55) {
+    const seed = Math.floor(r * 17.31);
+    const n = ((seed * 9301 + 49297) % 233) / 233;
+    const a = 0.04 + n * 0.10;
+    ctx.strokeStyle = n > 0.55
+      ? `rgba(255, 245, 225, ${a.toFixed(3)})`
+      : `rgba(10, 8, 6, ${(a * 0.85).toFixed(3)})`;
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // (4c) vertical lighting — light from above
+  const vert = ctx.createLinearGradient(0, cy - discR, 0, cy + discR);
+  vert.addColorStop(0,    'rgba(255, 248, 230, 0.32)');
+  vert.addColorStop(0.40, 'rgba(255, 248, 230, 0.04)');
+  vert.addColorStop(0.55, 'rgba(0, 0, 0, 0.05)');
+  vert.addColorStop(1,    'rgba(0, 0, 0, 0.45)');
+  ctx.fillStyle = vert;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR, 0, Math.PI * 2);
+  ctx.fill();
+
+  // (4d) horizontal specular band on the upper third
+  const band = ctx.createLinearGradient(0, cy - discR * 0.65, 0, cy - discR * 0.05);
+  band.addColorStop(0,   'rgba(255, 252, 240, 0)');
+  band.addColorStop(0.5, 'rgba(255, 252, 240, 0.42)');
+  band.addColorStop(1,   'rgba(255, 252, 240, 0)');
+  ctx.fillStyle = band;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR, 0, Math.PI * 2);
+  ctx.fill();
+
+  // (4e) bottom rim light — softbox bounce
+  const rimLight = ctx.createLinearGradient(0, cy + discR * 0.55, 0, cy + discR);
+  rimLight.addColorStop(0, 'rgba(255, 230, 200, 0)');
+  rimLight.addColorStop(1, 'rgba(255, 230, 200, 0.14)');
+  ctx.fillStyle = rimLight;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR, 0, Math.PI * 2);
+  ctx.fill();
+
+  // (5) bevel — bright top crescent
+  ctx.strokeStyle = 'rgba(255, 252, 240, 0.55)';
+  ctx.lineWidth = 0.9;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR - 0.5, Math.PI * 1.10, Math.PI * 1.90);
+  ctx.stroke();
+
+  // (5b) bevel — dark bottom crescent
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.50)';
+  ctx.lineWidth = 0.9;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR - 0.5, Math.PI * 0.10, Math.PI * 0.90);
+  ctx.stroke();
+
+  // (6) inset shadow line where disc meets rim
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.65)';
+  ctx.lineWidth = 0.7;
+  ctx.beginPath();
+  ctx.arc(cx, cy, discR + 0.3, 0, Math.PI * 2);
+  ctx.stroke();
+
+  // (7) indicator — engraved tapered notch
+  const ang = startA + norm * (endA - startA);
+  const tipR  = discR * 0.86;
+  const baseR = discR * 0.50;
+  const perp  = ang + Math.PI / 2;
+  const half  = 1.5;
+  const tipX = cx + Math.cos(ang) * tipR;
+  const tipY = cy + Math.sin(ang) * tipR;
+  const bX   = cx + Math.cos(ang) * baseR;
+  const bY   = cy + Math.sin(ang) * baseR;
+  ctx.fillStyle = 'rgba(6, 5, 4, 0.92)';
+  ctx.beginPath();
+  ctx.moveTo(tipX, tipY);
+  ctx.lineTo(bX + Math.cos(perp) * half, bY + Math.sin(perp) * half);
+  ctx.lineTo(bX - Math.cos(perp) * half, bY - Math.sin(perp) * half);
+  ctx.closePath();
+  ctx.fill();
+  ctx.strokeStyle = 'rgba(255, 250, 230, 0.25)';
+  ctx.lineWidth = 0.4;
+  ctx.beginPath();
+  ctx.moveTo(bX + Math.cos(perp) * half, bY + Math.sin(perp) * half);
+  ctx.lineTo(tipX, tipY);
+  ctx.stroke();
+}
+
+function makeKnob(spec) {
+  const wrap = document.createElement('div'); wrap.className = 'knob-cell';
+  const labEl = document.createElement('span'); labEl.className = 'label';
+  labEl.textContent = spec.name;
+  const canvas = document.createElement('canvas'); canvas.className = 'hw-knob';
+  const valEl = document.createElement('span'); valEl.className = 'value';
+  wrap.appendChild(labEl); wrap.appendChild(canvas); wrap.appendChild(valEl);
+
+  const ctx = setupCanvas(canvas, KNOB_SIZE);
   const state = { ...spec, el: wrap, canvas, valEl };
 
   function draw() {
-    const ctx = canvas.getContext('2d');
-    const w = canvas.width, h = canvas.height;
-    const cx = w/2, cy = h/2 + 2;
-    const r = Math.min(w, h) * 0.4;
-    const norm = (state.value - state.min) / (state.max - state.min);
-    const startA = Math.PI * 0.75;
-    const endA   = Math.PI * 2.25;
-    const css = getComputedStyle(document.body);
-    ctx.clearRect(0, 0, w, h);
-    ctx.lineCap = 'round';
-    ctx.lineWidth = 4;
-    ctx.strokeStyle = css.getPropertyValue('--knob-track').trim();
-    ctx.beginPath(); ctx.arc(cx, cy, r, startA, endA); ctx.stroke();
-    ctx.strokeStyle = css.getPropertyValue('--accent').trim();
-    ctx.beginPath(); ctx.arc(cx, cy, r, startA, startA + norm * (endA - startA)); ctx.stroke();
-    const ang = startA + norm * (endA - startA);
-    ctx.strokeStyle = css.getPropertyValue('--fg').trim();
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(cx + Math.cos(ang) * r * 0.45, cy + Math.sin(ang) * r * 0.45);
-    ctx.lineTo(cx + Math.cos(ang) * r * 0.95, cy + Math.sin(ang) * r * 0.95);
-    ctx.stroke();
+    const norm = Math.max(0, Math.min(1, (state.value - state.min) / (state.max - state.min)));
+    drawKnob(ctx, KNOB_SIZE, norm);
   }
   function updateLabel() { valEl.textContent = formatVal(state.value); }
   function setValue(v) {
@@ -510,7 +1023,6 @@ function makeKnob(spec) {
     state.value = v; draw(); updateLabel();
   }
 
-  // drag interaction: vertical drag = adjust value
   canvas.addEventListener('pointerdown', (e) => {
     e.preventDefault();
     canvas.setPointerCapture(e.pointerId);
@@ -520,8 +1032,8 @@ function makeKnob(spec) {
     const startV = state.value;
     const span = state.max - state.min;
     const onMove = (ev) => {
-      const dy = startY - ev.clientY;       // up = positive
-      const factor = ev.shiftKey ? 4 : 1;   // shift = fine adjust
+      const dy = startY - ev.clientY;
+      const factor = ev.shiftKey ? 4 : 1;
       const delta = (dy / 200) * span / factor;
       setValue(startV + delta);
       sendControl(state.name, state.value);
@@ -547,25 +1059,24 @@ function makeKnob(spec) {
 }
 
 function makeFader(spec) {
-  const wrap = document.createElement('div'); wrap.className = 'ctrl';
-  const fader = document.createElement('div'); fader.className = 'fader';
-  const track = document.createElement('div'); track.className = 'fader-track';
-  const fill = document.createElement('div'); fill.className = 'fader-fill';
-  const cap = document.createElement('div'); cap.className = 'fader-cap';
-  track.appendChild(fill); track.appendChild(cap);
-  fader.appendChild(track);
-  const valEl = document.createElement('div'); valEl.className = 'ctrl-value';
-  const labEl = document.createElement('div'); labEl.className = 'ctrl-label';
+  const wrap = document.createElement('div'); wrap.className = 'fader-cell';
+  const labEl = document.createElement('span'); labEl.className = 'label';
   labEl.textContent = spec.name;
-  wrap.appendChild(fader); wrap.appendChild(valEl); wrap.appendChild(labEl);
+  const track = document.createElement('div'); track.className = 'fd-track';
+  const ticksL = document.createElement('div'); ticksL.className = 'fd-ticks left';
+  const ticksR = document.createElement('div'); ticksR.className = 'fd-ticks right';
+  const cap = document.createElement('div'); cap.className = 'fd-cap';
+  track.appendChild(ticksL); track.appendChild(ticksR); track.appendChild(cap);
+  const valEl = document.createElement('span'); valEl.className = 'value';
+  wrap.appendChild(labEl); wrap.appendChild(track); wrap.appendChild(valEl);
 
   const state = { ...spec };
 
   function paint() {
-    const norm = (state.value - state.min) / (state.max - state.min);
-    const pct = Math.max(0, Math.min(1, norm));
-    fill.style.height = (pct * 100) + '%';
-    cap.style.bottom = (pct * 100) + '%';
+    const norm = Math.max(0, Math.min(1, (state.value - state.min) / (state.max - state.min)));
+    const trackH = track.clientHeight;
+    // cap is positioned by top + transform: translateY(-50%) (set in CSS)
+    cap.style.top = ((1 - norm) * trackH) + 'px';
     valEl.textContent = formatVal(state.value);
   }
   function setValue(v) {
@@ -598,7 +1109,9 @@ function makeFader(spec) {
     track.addEventListener('pointercancel', onUp);
   });
 
-  paint();
+  // Layout might not be ready (cap.style.top depends on track.clientHeight).
+  // Defer first paint until after layout.
+  requestAnimationFrame(paint);
   return { el: wrap, setValue, getValue: () => state.value, kind: 'fader', spec: state };
 }
 
@@ -610,10 +1123,10 @@ function formatVal(v) {
 
 function makeStepSeq(spec) {
   const wrap = document.createElement('div');
-  wrap.className = 'ctrl stepseq';
-  const labEl = document.createElement('div'); labEl.className = 'ctrl-label';
+  wrap.className = 'seq-row';
+  const labEl = document.createElement('span'); labEl.className = 'label';
   labEl.textContent = spec.name;
-  const row = document.createElement('div'); row.className = 'stepseq-row';
+  const row = document.createElement('div'); row.className = 'leds';
   wrap.appendChild(labEl); wrap.appendChild(row);
 
   const state = { name: spec.name, numSteps: spec.numSteps, pattern: spec.pattern.slice(), cells: [] };
@@ -623,7 +1136,7 @@ function makeStepSeq(spec) {
     state.cells = [];
     for (let i = 0; i < state.numSteps; i++) {
       const c = document.createElement('div');
-      c.className = 'step' + (i % 4 === 0 ? ' beat' : '') + (state.pattern[i] ? ' on' : '');
+      c.className = 'led' + (i % 4 === 0 ? ' beat' : '') + (state.pattern[i] ? ' on' : '');
       c.dataset.step = i;
       row.appendChild(c);
       state.cells.push(c);
@@ -646,11 +1159,11 @@ function makeStepSeq(spec) {
     buildCells();
   }
 
-  // click + drag: paint cells (drag across to set many at once, like FL Studio)
-  let painting = null;   // 0 or 1, the value we're painting onto cells we cross
+  // click + drag: paint cells (FL Studio style)
+  let painting = null;
   function cellFromEvent(ev) {
     const t = document.elementFromPoint(ev.clientX, ev.clientY);
-    if (t && t.classList && t.classList.contains('step') && t.parentNode === row) {
+    if (t && t.classList && t.classList.contains('led') && t.parentNode === row) {
       return parseInt(t.dataset.step, 10);
     }
     return -1;
@@ -660,7 +1173,6 @@ function makeStepSeq(spec) {
     if (i < 0) return;
     e.preventDefault();
     row.setPointerCapture(e.pointerId);
-    // first cell determines paint direction (toggle: paint opposite of current)
     painting = state.pattern[i] ? 0 : 1;
     state.pattern[i] = painting;
     state.cells[i].classList.toggle('on', !!painting);
@@ -720,9 +1232,11 @@ function isBlackKey(midi) { return BLACK_PCS.has(((Math.round(midi) % 12) + 12)
 function isOctaveC(midi) { return ((Math.round(midi) % 12) + 12) % 12 === 0; }
 
 function makePianoRoll(spec) {
-  const wrap = document.createElement('div');
-  wrap.className = 'ctrl pianoroll';
-  const labEl = document.createElement('div'); labEl.className = 'ctrl-label';
+  // pianoroll IS its own panel — large enough that grouping with others
+  // would be cramped.
+  const wrap = document.createElement('section');
+  wrap.className = 'panel pianoroll';
+  const labEl = document.createElement('span'); labEl.className = 'label';
   labEl.textContent = spec.name;
   const grid = document.createElement('div'); grid.className = 'pianoroll-grid';
   wrap.appendChild(labEl); wrap.appendChild(grid);
@@ -850,12 +1364,11 @@ function makePianoRoll(spec) {
 function rebuildControls(controls) {
   // Reuse existing widgets when possible (preserve DOM focus / drag-in-progress).
   const seen = new Set();
-  const newOrder = [];
+  const byKind = { knob: [], fader: [], step_seq: [], piano_roll: [] };
   for (const spec of controls) {
     seen.add(spec.name);
     let ctrl = activeControls.get(spec.name);
     if (ctrl && ctrl.kind === spec.kind) {
-      // Update spec but don't snap visible state — the worklet preserves it.
       if (spec.kind === 'step_seq') {
         ctrl.setNumSteps(spec.numSteps);
         ctrl.setPattern(spec.pattern);
@@ -875,14 +1388,31 @@ function rebuildControls(controls) {
       if (!ctrl) continue;
       activeControls.set(spec.name, ctrl);
     }
-    newOrder.push(ctrl);
+    if (byKind[spec.kind]) byKind[spec.kind].push(ctrl);
   }
   for (const name of [...activeControls.keys()]) {
     if (!seen.has(name)) activeControls.delete(name);
   }
+
+  // Render: detach all cells from any prior parent, then group by kind into
+  // shared sub-panels. Reusing the same widget instances keeps drag state.
   ctrlBox.innerHTML = '';
-  for (const c of newOrder) ctrlBox.appendChild(c.el);
-  ctrlBox.classList.toggle('empty', newOrder.length === 0);
+  function appendPanel(kind, cls) {
+    if (!byKind[kind].length) return;
+    const panel = document.createElement('section');
+    panel.className = 'panel ' + cls;
+    for (const c of byKind[kind]) panel.appendChild(c.el);
+    ctrlBox.appendChild(panel);
+  }
+  appendPanel('knob',    'knobs');
+  appendPanel('fader',   'faders');
+  appendPanel('step_seq','seq');
+  // pianorolls are each their own panel — append directly
+  for (const c of byKind.piano_roll) ctrlBox.appendChild(c.el);
+
+  const total = byKind.knob.length + byKind.fader.length
+              + byKind.step_seq.length + byKind.piano_roll.length;
+  ctrlBox.classList.toggle('empty', total === 0);
 }
 
 // =====================================================================
@@ -892,11 +1422,10 @@ function drawCanvas(c) {
   const samples = taps[c.dataset.tap];
   const ctx = c.getContext('2d');
   const w = c.width, h = c.height;
-  const css = getComputedStyle(document.body);
-  ctx.fillStyle = css.getPropertyValue('--wave-bg').trim();
-  ctx.fillRect(0, 0, w, h);
+  ctx.clearRect(0, 0, w, h);  // CSS background of .wave-widget shows through
   if (!samples || samples.length === 0) {
-    ctx.fillStyle = '#3a4048'; ctx.font = '10px monospace';
+    ctx.fillStyle = 'rgba(232, 160, 80, 0.25)';
+    ctx.font = '9px monospace';
     ctx.fillText('no data', 6, h - 8);
     return;
   }
@@ -905,7 +1434,9 @@ function drawCanvas(c) {
     const a = Math.abs(samples[i]); if (a > peak) peak = a;
   }
   const scale = peak > 0.001 ? 1 / Math.max(peak, 0.05) : 1;
-  ctx.strokeStyle = css.getPropertyValue('--wave').trim();
+  ctx.shadowColor = 'rgba(232, 160, 80, 0.45)';
+  ctx.shadowBlur = 2;
+  ctx.strokeStyle = '#e8a050';
   ctx.lineWidth = 1.2;
   ctx.beginPath();
   for (let i = 0; i < samples.length; i++) {
@@ -914,8 +1445,10 @@ function drawCanvas(c) {
     if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
   }
   ctx.stroke();
+  ctx.shadowBlur = 0;
   if (peak < 0.5 && peak > 0) {
-    ctx.fillStyle = '#5a6470'; ctx.font = '9px monospace';
+    ctx.fillStyle = 'rgba(232, 160, 80, 0.45)';
+    ctx.font = '9px monospace';
     ctx.fillText(`pk ${peak.toFixed(2)}`, 4, 11);
   }
 }