:root{--bg:#141418;--panel:#22222a;--or:#ff8a00;--cy:#5ff3ff;}
body{margin:0;background:radial-gradient(circle at 20% 0%,#2a1a08 0,transparent 50%),repeating-linear-gradient(0deg,#141418 0 3px,#17171c 3px 4px);color:#ddd;font-family:'Chakra Petch',sans-serif;min-height:100vh}
.lcd{font-family:'VT323',monospace;color:var(--cy);text-shadow:0 0 6px rgba(95,243,255,.6)}
.logo{font-family:'VT323',monospace;color:var(--or);text-shadow:0 0 12px rgba(255,138,0,.7);letter-spacing:2px}
.metal{background:linear-gradient(180deg,#2c2c35,#1d1d23);border:1px solid #3a3a44;box-shadow:inset 0 1px 0 #444,0 6px 20px rgba(0,0,0,.5);border-radius:10px}
.hw{background:linear-gradient(180deg,#30303a,#1c1c22);border:1px solid #444;box-shadow:inset 0 -3px 0 #111,0 2px 6px #000;border-radius:8px;transition:.15s;cursor:pointer}
.hw:hover{border-color:var(--or)}
.hw.on{border-color:var(--or);box-shadow:0 0 16px rgba(255,138,0,.5),inset 0 0 12px rgba(255,138,0,.25)}
.led{width:10px;height:10px;border-radius:50%;background:#400}
.led.on{background:#f22;box-shadow:0 0 10px #f22;animation:bl 1s infinite}
@keyframes bl{50%{opacity:.3}}
.knob{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#555,#1a1a1f 70%);border:2px solid #333;position:relative;cursor:ns-resize;touch-action:none;margin:auto}
.knob i{position:absolute;left:50%;top:4px;width:3px;height:16px;background:var(--or);margin-left:-1.5px;border-radius:2px;box-shadow:0 0 6px var(--or)}
.drop{border:2px dashed var(--or);border-radius:10px}
.drop.over{background:rgba(255,138,0,.1)}
.fadein{animation:fi .5s both}@keyframes fi{from{opacity:0;transform:translateY(8px)}}