:root{
  --wood1:#5a3620; --wood2:#3d2313; --wood-hi:#7a4a2c;
  --cream:#d9cbb0; --metal:#b9bcc2; --amber:#e8b84b;
  --panel:#2a2018; --led:#ff3b2f;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:"Bricolage Grotesque", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, #241d2a, #0c0a10 70%),
    #0c0a10;
  color:#e7e2d5;
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding:18px;
  overflow-x:hidden;
}
#room{width:100%; max-width:640px;}

#tvset{position:relative; margin-top:52px;}
#tvset.shake{animation:shake .35s ease;}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-4px,2px) rotate(-.4deg)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,-1px)}80%{transform:translate(3px,1px)}}

/* Antenna */
#antenna{position:absolute; top:-50px; left:50%; transform:translateX(-50%); z-index:1;}
.ant-base{width:40px;height:14px;background:linear-gradient(#444,#111);border-radius:6px 6px 0 0;margin:0 auto;}
.ear{position:absolute;bottom:0;left:50%;width:6px;height:74px;background:linear-gradient(var(--metal),#666);border-radius:3px;transform-origin:bottom center;cursor:grab;box-shadow:0 0 4px rgba(0,0,0,.5);}
.ear:active{cursor:grabbing;}
.ear-l{transform:rotate(-30deg);} .ear-r{transform:rotate(30deg);}
.ear::before{content:"";position:absolute;top:-6px;left:-3px;width:12px;height:12px;border-radius:50%;background:var(--led);opacity:.4;}

/* Cabinet */
#cabinet{
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 3px, rgba(255,255,255,.03) 3px 6px),
    linear-gradient(150deg, var(--wood-hi), var(--wood1) 40%, var(--wood2));
  border-radius:22px;
  padding:22px 22px 16px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,.15), inset 0 -8px 20px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.7);
  border:2px solid #2a170c;
}

#screen-frame{
  background:linear-gradient(#1a1712,#0c0a08);
  border-radius:18px; padding:16px 16px 8px;
  box-shadow: inset 0 4px 14px rgba(0,0,0,.9);
  border:2px solid #000;
}
#screen-bulge{
  position:relative; border-radius:50%/8%;
  overflow:hidden; background:#000;
  box-shadow: inset 0 0 40px rgba(0,0,0,.9);
  border:8px solid #000;
  aspect-ratio:4/3;
}
#screen-bulge.drag{outline:3px dashed var(--amber); outline-offset:-6px;}
#canvas{
  display:block; width:100%; height:100%;
  filter:saturate(1.15) contrast(1.02);
  image-rendering:pixelated;
}
#glass{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.12), transparent 45%),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.5), transparent 60%);
  border-radius:50%/8%;
}
#poweroff-veil{
  position:absolute;inset:0;background:#050705;pointer-events:none;
  opacity:0;transition:opacity .5s;border-radius:50%/8%;
}
#poweroff-veil.shown{opacity:.94;}
#dot-collapse{
  position:absolute;inset:0;pointer-events:none;background:transparent;
}
#dot-collapse.active{
  animation:dot 0.55s ease forwards;
  background:radial-gradient(circle at 50% 50%, #fff 0%, #fff 2%, transparent 3%);
}
@keyframes dot{
  0%{opacity:0}
  8%{opacity:0}
  9%{opacity:1; background:linear-gradient(#fff,#fff)}
  20%{opacity:1; background:radial-gradient(ellipse 100% 4% at 50% 50%, #fff 0 80%, transparent 82%)}
  60%{opacity:1; background:radial-gradient(circle 8px at 50% 50%, #fff 0 60%, transparent 62%)}
  100%{opacity:0; background:radial-gradient(circle 2px at 50% 50%, #fff 0 40%, transparent 42%)}
}

#plaque{
  margin-top:10px;text-align:center;font-weight:800;letter-spacing:3px;
  font-size:13px;color:#cdd2d8;
  text-shadow:0 1px 0 #000, 0 0 6px rgba(200,210,220,.3);
  font-family:"Bricolage Grotesque",serif;
}
#plaque .strawb{color:var(--amber);}

/* Controls */
#controls{
  margin-top:14px;
  display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-start;justify-content:center;
  background:linear-gradient(#26201a,#1a1610);
  border-radius:14px;padding:14px 12px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.06), inset 0 -6px 14px rgba(0,0,0,.6);
}
.knob-block{display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;}
.knob{
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #7a7d84, #3a3c40 60%, #202124);
  box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,255,255,.25), inset 0 -3px 4px rgba(0,0,0,.5);
  position:relative;cursor:grab;touch-action:none;
  border:2px solid #15161a;
}
.knob:active{cursor:grabbing;}
.knob .pointer{
  position:absolute;top:4px;left:50%;width:3px;height:16px;border-radius:2px;
  background:var(--amber);box-shadow:0 0 5px rgba(232,184,75,.8);
  transform:translateX(-50%);transform-origin:50% 20px;
}
.knob-block label{
  font-size:9px;letter-spacing:1px;color:#b7ac98;text-align:center;line-height:1.3;
  font-weight:800;text-transform:uppercase;
}
.knob-block label b{color:var(--amber);font-family:"VT323",monospace;font-size:14px;display:block;font-weight:400;}

#switches{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%;margin-top:4px;}
.toggle{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:11px;letter-spacing:1px;
  padding:8px 12px;border-radius:8px;border:2px solid #0e0f12;cursor:pointer;
  background:linear-gradient(#4a4d54,#2c2e33);color:#cfd3d8;
  box-shadow:0 3px 0 #14151a, inset 0 1px 1px rgba(255,255,255,.2);
  transition:transform .06s, box-shadow .06s;
}
.toggle:active{transform:translateY(2px);box-shadow:0 1px 0 #14151a;}
.toggle.on{background:linear-gradient(#c8933a,#8a5f1e);color:#1c1206;box-shadow:0 3px 0 #4a3210, inset 0 0 8px rgba(255,220,150,.5);}
.led{width:14px;height:14px;border-radius:50%;background:#3a0806;box-shadow:inset 0 0 3px #000;margin-left:auto;}
.led.lit{background:var(--led);box-shadow:0 0 10px var(--led),0 0 18px rgba(255,60,50,.6);}

#inputrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;width:100%;margin-top:2px;}
.vcrbtn{
  font-size:11px;font-weight:800;letter-spacing:1px;padding:8px 12px;border-radius:8px;cursor:pointer;
  background:linear-gradient(#33363c,#1c1e22);color:#9fd6ff;border:2px solid #0c0d10;
  box-shadow:0 2px 0 #0c0d10;
}
.vcrbtn:active{transform:translateY(2px);}
#status{
  font-family:"VT323",monospace;font-size:15px;color:#7fe0a0;
  background:#07120b;padding:5px 10px;border-radius:6px;border:1px solid #123;
  flex:1;min-width:180px;text-align:center;text-shadow:0 0 5px rgba(120,255,160,.5);
}

/* Scope */
#scope-panel{
  margin-top:14px;background:#0a1410;border:2px solid #12281c;border-radius:12px;padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
#scope-panel.hidden{display:none;}
.scope-title{font-family:"VT323",monospace;color:#8fffb0;font-size:16px;letter-spacing:2px;margin-bottom:6px;}
#scope{width:100%;display:block;border-radius:6px;image-rendering:pixelated;}

footer{
  margin-top:22px;text-align:center;display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:#8a8172;
}
footer a{color:var(--amber);text-decoration:none;font-weight:800;border-bottom:1px dashed var(--amber);}
footer a:hover{color:#fff;}

@media(max-width:520px){
  .knob-block{width:56px;}
  .knob{width:42px;height:42px;}
  #status{font-size:13px;}
}
</parameter>