:root{--bg:#1b1a18;--beige:#d9cfb6;--beige2:#c4b896;--dark:#2b2925;--amber:#ffb000;--green:#39ff7a;--red:#e8452c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:22px 22px;color:#eee;font-family:'IBM Plex Mono',monospace}
.lcdfont{font-family:'VT323',monospace}
.panel{background:linear-gradient(#ddd3ba,#cbbf9f);border:2px solid #f2ead6;border-right-color:#8d8264;border-bottom-color:#8d8264;border-radius:6px;color:#2b2925;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.screen{background:#0d120e;border:3px solid #3a362e;border-top-color:#1a1814;border-left-color:#1a1814;border-radius:4px;position:relative;overflow:hidden;transition:box-shadow .3s}
.screen.hot{box-shadow:0 0 18px rgba(255,59,42,.45)}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.btn{background:linear-gradient(#eee6d2,#c9bd9c);border:2px solid #f8f2e2;border-right-color:#7d7358;border-bottom-color:#7d7358;border-radius:4px;color:#2b2925;font-family:'VT323',monospace;font-size:20px;padding:2px 12px;cursor:pointer;user-select:none;touch-action:manipulation}
.btn:active,.btn.on{border-color:#7d7358;border-right-color:#f8f2e2;border-bottom-color:#f8f2e2;background:linear-gradient(#bfb393,#d8cfb6);transform:translateY(1px)}
.btn.on{color:#a33a00}
.btn.hot127{background:linear-gradient(#e0432c,#b02a18);color:#fff2d0}
.glow{color:var(--amber);text-shadow:0 0 8px rgba(255,176,0,.7),0 0 20px rgba(255,120,0,.4)}
.overdrive{color:#ff4a2a;text-shadow:0 0 10px #ff2a00,0 0 26px #ff6a00;animation:od .25s steps(2) infinite;font-size:clamp(2.2rem,7vw,5.5rem)}
@keyframes od{50%{opacity:.6;transform:translateX(2px)}}
.velbadge{background:#c22411;color:#fff1c8;border:2px solid #ff7a5a;border-radius:3px;animation:pulse 0.9s ease-in-out infinite;box-shadow:0 0 12px rgba(255,60,30,.7)}
@keyframes pulse{50%{transform:scale(1.07);box-shadow:0 0 22px rgba(255,60,30,1)}}
.lcd{background:#14200f;color:var(--green);text-shadow:0 0 6px rgba(57,255,122,.6);font-family:'VT323',monospace;border:2px inset #333;padding:0 8px;border-radius:3px}
.seg{flex:1;height:14px;background:#1d2e1a;border-radius:1px}
.seg.on{background:var(--green);box-shadow:0 0 6px var(--green)}
.blink{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.floppy{background:linear-gradient(#e4dcc6,#cfc4a6);border:3px dashed #6d6450;border-radius:6px;position:relative;cursor:pointer;color:#2b2925;transition:.15s}
.floppy.drag{background:#f0e1a8;border-color:#a33a00}
.floppy::before{content:"";position:absolute;top:0;left:30%;width:40%;height:28%;background:#9aa0a6;border:2px solid #555;border-top:none}
input[type=range]{accent-color:#a33a00}
.led{width:10px;height:10px;border-radius:50%;background:#3b1410;border:1px solid #111}
.led.lit{background:#ff4a2a;box-shadow:0 0 8px #ff4a2a}
.perf{width:14px;height:14px;border-radius:50%;border:1px solid #111}
.perf.green{background:#39ff7a;box-shadow:0 0 8px #39ff7a}
.perf.amber{background:#ffb000;box-shadow:0 0 10px #ffb000}
.perf.red{background:#ff3b2a;box-shadow:0 0 12px #ff3b2a;animation:blink .4s steps(2) infinite}
.strip{min-width:100px}
select{background:#efe7d3;border:1px solid #7d7358;font-size:11px;border-radius:3px}
.chip{background:#efe7d3;border:1px solid #8d8264;border-radius:3px;padding:0 5px;font-size:10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rocker{display:flex;font-family:'VT323',monospace;font-size:20px;border:3px solid #3a362e;border-radius:5px;overflow:hidden;cursor:pointer;background:#2b2925;padding:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.rocker span{padding:4px 12px;transition:.15s}
.rk-l{background:linear-gradient(#eee6d2,#c9bd9c);color:#2b2925}
.rk-r{background:#4a1a12;color:#8a5040}
.rocker.on .rk-l{background:#4b463a;color:#8f8770;transform:translateY(2px)}
.rocker.on .rk-r{background:linear-gradient(#ff5a3a,#c21a08);color:#fff3c8;text-shadow:0 0 6px #fff;box-shadow:0 0 14px #ff3b2a}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.toast{animation:toast 2.6s both}
@keyframes toast{0%{opacity:0;transform:translate(-50%,20px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
a{color:var(--amber)}