:root{
  --wood-a:#3a2419;
  --wood-b:#5a3a26;
  --panel:#2a2620;
  --panel-2:#1c1a16;
  --cream:#e8dcc0;
  --amber:#d98a2b;
  --ink:#12100c;
  --scope:#8dff90;
  --metal:#454038;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0b0906;color:var(--cream);
  font-family:'Bricolage Grotesque',sans-serif;min-height:100%;}
body{
  background:
    radial-gradient(1200px 700px at 50% -10%, #1a140e 0%, #0b0906 60%),
    repeating-linear-gradient(0deg,#0b0906,#0b0906 2px,#0d0a07 2px,#0d0a07 4px);
  display:flex;justify-content:center;padding:16px;
}
#cabinet{width:100%;max-width:1000px;}
#brand{
  font-weight:800;letter-spacing:2px;font-size:20px;color:var(--amber);
  text-align:center;margin-bottom:10px;text-shadow:0 0 12px rgba(217,138,43,.4);
}
#model{font-family:'VT323',monospace;color:var(--cream);opacity:.55;font-size:15px;letter-spacing:1px;}

#tv-body{
  background:
    linear-gradient(180deg,var(--wood-b),var(--wood-a));
  border-radius:22px;padding:22px;
  box-shadow: inset 0 2px 6px rgba(255,220,180,.15), 0 30px 60px rgba(0,0,0,.7), 0 0 0 3px #241610;
  position:relative;
}
#tv-body::before{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:repeating-linear-gradient(92deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
  mix-blend-mode:overlay;
}

#screen-wrap{display:grid;grid-template-columns:1fr;gap:14px;}

#bezel{
  position:relative;background:#0c0c0c;border-radius:18px;padding:14px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.9), 0 0 0 6px #191512, 0 0 0 8px #2a2018;
  overflow:hidden;
}
#canvas{
  width:100%;display:block;border-radius:10px;background:#000;
  image-rendering:auto;
}
#glass{
  position:absolute;inset:14px;border-radius:10px;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%),
    linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 30%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6);
}
#nosignal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'VT323',monospace;font-size:34px;letter-spacing:3px;color:#cfd;
  text-shadow:0 0 10px rgba(180,255,190,.6);pointer-events:none;display:none;
}

#scope-wrap{
  background:#0a0e07;border-radius:10px;padding:6px 8px 2px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.8), 0 0 0 3px #191512;
}
#scope-label{font-family:'VT323',monospace;color:var(--scope);opacity:.7;font-size:14px;letter-spacing:1px;}
#scope{width:100%;display:block;}

#controls{
  margin-top:18px;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-radius:14px;padding:16px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.06), inset 0 -3px 8px rgba(0,0,0,.5);
  display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;
}

#drop{
  flex:1 1 220px;min-height:78px;border:2px dashed #6a5a44;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;color:var(--cream);position:relative;background:rgba(0,0,0,.2);
  transition:.15s;
}
#drop.over{border-color:var(--amber);background:rgba(217,138,43,.12);}
.dz-title{font-weight:800;letter-spacing:1px;font-size:13px;color:var(--amber);}
.dz-sub{font-size:12px;opacity:.6;}
#file{display:none;}

#knobs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.knob-wrap{width:64px;text-align:center;position:relative;}
.knob{
  width:52px;height:52px;border-radius:50%;margin:0 auto;position:relative;cursor:grab;
  background:radial-gradient(circle at 35% 30%, #6b6257, #2a251e 75%);
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.25);
  touch-action:none;
}
.knob:active{cursor:grabbing;}
.pointer{
  position:absolute;top:5px;left:50%;width:3px;height:20px;border-radius:2px;
  background:var(--amber);transform-origin:50% 21px;transform:translateX(-50%) rotate(0deg);
  box-shadow:0 0 4px rgba(217,138,43,.8);
}
.ticks{position:absolute;top:0;left:6px;width:52px;height:52px;pointer-events:none;}
.ticks span{position:absolute;top:2px;left:50%;width:2px;height:5px;background:#7a6d55;transform-origin:50% 24px;}
.knob-cap{font-family:'VT323',monospace;font-size:12px;letter-spacing:1px;color:var(--cream);margin-top:4px;opacity:.85;}

#switches{display:flex;gap:12px;flex-wrap:wrap;}
.sw-wrap{text-align:center;}
.sw-cap{font-family:'VT323',monospace;font-size:12px;color:var(--cream);opacity:.7;margin-bottom:4px;letter-spacing:1px;}
.sw-btn{
  font-family:'VT323',monospace;font-size:15px;letter-spacing:1px;
  background:#161310;color:var(--scope);border:1px solid #3a342a;border-radius:6px;
  padding:8px 12px;cursor:pointer;min-width:64px;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.5);
}
.sw-btn.on{color:var(--amber);border-color:var(--amber);}

#transport{display:flex;gap:8px;flex-wrap:wrap;width:100%;justify-content:center;margin-top:4px;}
.tbtn{
  font-family:'VT323',monospace;font-size:15px;letter-spacing:1px;
  background:linear-gradient(180deg,#3a342a,#211d17);color:var(--cream);
  border:1px solid #4a4234;border-radius:6px;padding:9px 14px;cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.1);
}
.tbtn:hover{border-color:var(--amber);}
.tbtn.on{color:var(--amber);border-color:var(--amber);box-shadow:0 0 8px rgba(217,138,43,.35);}
.tbtn.power.on{color:#7dff9c;border-color:#7dff9c;box-shadow:0 0 10px rgba(120,255,150,.4);}

footer{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;font-family:'VT323',monospace;font-size:14px;color:var(--cream);opacity:.65;
  flex-wrap:wrap;
}
.whisper{font-style:italic;}
footer a{color:var(--amber);text-decoration:none;border-bottom:1px dotted var(--amber);}
footer a:hover{color:#f2a94a;}

@media(max-width:640px){
  #brand{font-size:16px;}
  #nosignal{font-size:24px;}
  .knob{width:44px;height:44px;}
  .pointer{transform-origin:50% 18px;height:17px;}
  #controls{gap:12px;padding:12px;}
}
</parameter>