diff --git a/web/sandbox/studio.html b/web/sandbox/studio.html
index 109dadb..5aada45 100644
--- a/web/sandbox/studio.html
+++ b/web/sandbox/studio.html
@@ -575,7 +575,9 @@ for (const line of PATCH) {
 //  knob — restrained: dark gradient + thin amber arc + single tickmark.
 //  No knurled ridges, no brushed metal. Closer to the reference image.
 // ===========================================================================
-const KNOB_SIZE = 56;
+// Canvas is bigger than the visible knob so the amber arc + drop shadow have
+// room around the dial. Visible knob radius is ~26px regardless of canvas size.
+const KNOB_SIZE = 72;
 function setupCanvas(canvas, size) {
   const dpr = window.devicePixelRatio || 1;
   canvas.style.width  = size + 'px';
@@ -588,10 +590,12 @@ function setupCanvas(canvas, size) {
 }
 
 function drawKnob(ctx, size, norm) {
-  const cx = size / 2, cy = size / 2 + 1;
-  const totalR = size * 0.46;          // outer edge of the whole knob
-  const rimW   = size * 0.045;         // dark rim thickness (thin)
-  const discR  = totalR - rimW;        // metallic disc fills most of inside
+  const cx = size / 2, cy = size / 2;
+  // Fixed pixel sizes so the visible knob doesn't grow with the canvas.
+  // Canvas size only adds margin around these for arc + shadow.
+  const totalR = 26;                    // outer edge of the whole knob
+  const rimW   = 2.5;                   // dark rim thickness
+  const discR  = totalR - rimW;         // metallic disc fills most of inside
   ctx.clearRect(0, 0, size, size);
 
   // (1) drop shadow under the whole knob
@@ -723,7 +727,7 @@ function drawKnob(ctx, size, norm) {
   const tipR  = discR * 0.86;
   const baseR = discR * 0.50;
   const perp  = ang + Math.PI / 2;
-  const half  = size * 0.026;
+  const half  = 1.5;                    // fixed half-width of the notch base
   const tipX = cx + Math.cos(ang) * tipR;
   const tipY = cy + Math.sin(ang) * tipR;
   const bX   = cx + Math.cos(ang) * baseR;