:root{--bg:#0a1017;--legend:#d8cfb6;--legend-dim:#d8cfb673;--hazard-yellow:#d6a01e;--steel:none;--grime:none}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}#view{touch-action:none;cursor:crosshair;width:100%;height:100%;position:fixed;inset:0}.panel{background:var(--grime), var(--steel), #343b42;width:316px;max-width:calc(100vw - 24px);color:var(--legend);letter-spacing:.1em;text-transform:uppercase;-webkit-user-select:none;user-select:none;background-size:256px,512px,auto;border:1px solid #0b0e11;border-radius:6px;padding:22px 18px 16px;font:600 75% 11px/1.2 Arial Narrow,Roboto Condensed,Helvetica Neue,Arial,sans-serif;position:fixed;top:12px;left:12px;box-shadow:inset 0 1px #ffffff1f,inset 0 -3px #00000073,0 14px 34px #000000a6}.hazard{background:var(--grime), repeating-linear-gradient(-45deg, var(--hazard-yellow) 0 10px, #17140e 10px 20px);background-size:256px,auto;border-radius:6px 6px 0 0;height:9px;position:absolute;inset:0 0 auto;box-shadow:inset 0 -1px #0009}.screw{background:radial-gradient(circle at 35% 35%,#a7afb6,#4a5158 55%,#1b1f23);border-radius:50%;width:11px;height:11px;position:absolute;box-shadow:0 1px 1px #000000b3}.screw:after{content:"";height:2px;transform:rotate(var(--turn));background:#15191c;position:absolute;top:4.5px;left:2px;right:2px}.screw.top-left{--turn:25deg;top:15px;left:6px}.screw.top-right{--turn:-60deg;top:15px;right:6px}.screw.bottom-left{--turn:80deg;bottom:6px;left:6px}.screw.bottom-right{--turn:10deg;bottom:6px;right:6px}.nameplate,.hazard{cursor:grab;touch-action:none}.panel.dragging,.panel.dragging .nameplate,.panel.dragging .hazard{cursor:grabbing}.panel.dragging{box-shadow:inset 0 1px #ffffff1f,inset 0 -3px #00000073,0 22px 44px #000000bf}.nameplate{background:var(--grime), linear-gradient(#2d3135, #1b1e21);text-align:center;letter-spacing:.16em;color:#e3dbc4;background-size:256px,auto;border:1px solid #0c0e10;border-radius:2px;padding:5px 10px;font-size:13px;font-weight:700;box-shadow:inset 0 1px #ffffff14,0 1px #ffffff0f}.section{justify-content:space-between;align-items:flex-end;gap:10px;margin-top:16px;display:flex}.control{flex-direction:column;align-items:center;gap:7px;display:flex}.buttons{align-items:center;gap:8px;display:flex}.legend{color:var(--legend);text-shadow:0 1px #000c;white-space:nowrap;font-size:10px}kbd{font:inherit;opacity:.5}output{text-align:right;font-variant-numeric:tabular-nums;color:#fff3d0;width:4.6ch;display:inline-block}button{font:inherit;cursor:pointer;border:none;padding:0}button:focus-visible,.dial:focus-visible,.toggle:focus-within{outline:2px solid var(--hazard-yellow);outline-offset:3px}.push{background:radial-gradient(circle,#3b4146 0 60%,#16191c 63% 100%);border-radius:50%;width:46px;height:46px;position:relative;box-shadow:inset 0 2px 2px #ffffff1f,0 2px 4px #000000b3}.push:before{content:"";background:var(--grime), radial-gradient(circle at 40% 32%, var(--cap-light), var(--cap) 55%, var(--cap-dark));box-shadow:0 3px 0 var(--cap-dark), inset 0 -2px 3px #0006;background-size:256px,auto;border-radius:50%;transition:transform 50ms,box-shadow 50ms;position:absolute;inset:7px;transform:translateY(-2px)}.push:active:before{box-shadow:0 1px 0 var(--cap-dark), inset 0 -1px 2px #00000080;transform:translateY(0)}.push.green{--cap:#2d8439;--cap-light:#63c06c;--cap-dark:#15451c}.push.red{--cap:#a8291f;--cap-light:#df5a4d;--cap-dark:#55130e}.push.black{--cap:#2b2e31;--cap-light:#5b6066;--cap-dark:#0e1012}.lamp{background:radial-gradient(circle at 40% 35%, var(--lamp-off-light), var(--lamp-off));border-radius:50%;width:16px;height:16px;transition:background .2s,box-shadow .2s;box-shadow:0 0 0 3px #1d2124,0 0 0 4px #0a0c0e,inset 0 1px 2px #0009}.lamp.green{--lamp-off:#10260f;--lamp-off-light:#24401f;--lamp-on:#2fb83c;--lamp-on-light:#dfffd6;--lamp-glow:#50e15f8c}.lamp.amber{--lamp-off:#2d1f07;--lamp-off-light:#4a3610;--lamp-on:#e39a16;--lamp-on-light:#fff0c8;--lamp-glow:#ffaa288c}.lamp.on{background:radial-gradient(circle at 40% 35%, var(--lamp-on-light), var(--lamp-on) 50%, var(--lamp-off));box-shadow:0 0 0 3px #1d2124, 0 0 0 4px #0a0c0e, 0 0 14px 4px var(--lamp-glow)}.selector-legend{justify-content:space-between;width:96px;display:flex}.selector-legend span{color:var(--legend-dim);transition:color .15s}.selector-legend span.active{color:var(--legend)}.selector{background:radial-gradient(circle,#2f3439 0 58%,#14171a 61% 100%);border-radius:50%;width:52px;height:52px;position:relative;box-shadow:inset 0 2px 2px #ffffff1a,0 2px 4px #000000b3}.selector-handle{background:var(--grime), linear-gradient(90deg, #17191b, #4b5055 50%, #17191b);background-size:256px,auto;border-radius:6px;width:14px;height:44px;margin:-22px 0 0 -7px;transition:transform .18s cubic-bezier(.3,1.6,.5,1);position:absolute;top:50%;left:50%;transform:rotate(-40deg);box-shadow:0 3px 5px #000000b3}.selector-handle:after{content:"";background:#ece4cc;border-radius:1px;width:2px;height:12px;margin-left:-1px;position:absolute;top:4px;left:50%}.selector.breaker .selector-handle{transform:rotate(40deg)}.dial{cursor:ns-resize;touch-action:none;width:62px;height:62px;position:relative}.dial-tick{background:var(--legend);opacity:.7;transform-origin:1px 31px;width:2px;height:6px;transform:rotate(var(--angle));margin-left:-1px;position:absolute;top:0;left:50%}.dial-knob{background:var(--grime), repeating-conic-gradient(#1c1f22 0 6deg, #3c4146 6deg 12deg);transform:rotate(var(--angle));background-size:256px,auto;border-radius:50%;position:absolute;inset:9px;box-shadow:0 0 0 3px #26292d,0 3px 6px #000000bf,inset 0 1px 1px #ffffff26}.dial-knob:before{content:"";background:radial-gradient(circle at 40% 35%,#4d5257,#23272a);border-radius:50%;position:absolute;inset:7px}.dial-knob:after{content:"";background:var(--hazard-yellow);border-radius:2px;width:3px;height:13px;margin-left:-1.5px;position:absolute;top:2px;left:50%}.toggle{cursor:pointer}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-base{background:var(--grime), linear-gradient(#2a2e32, #191c1f);background-size:256px,auto;border-radius:4px;width:30px;height:46px;position:relative;box-shadow:inset 0 1px #ffffff14,0 2px 4px #000000b3}.toggle-base:before{content:"";background:radial-gradient(circle at 40% 35%,#9aa2a9,#3d4349);border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%}.toggle-lever{transform-origin:50% 100%;background:linear-gradient(90deg,#7d858c,#e4e8ec 50%,#6f777e);border-radius:4px;width:7px;height:20px;margin-left:-3.5px;transition:transform .12s;position:absolute;bottom:50%;left:50%;transform:rotate(160deg);box-shadow:0 2px 2px #00000080}.toggle input:checked+.toggle-base .toggle-lever{transform:rotate(20deg)}.lcd{color:#84ff95;letter-spacing:.04em;text-transform:none;text-shadow:0 0 6px #6eff8280;background:#0d1a10;border:2px solid #0a0c0d;border-radius:2px;margin-top:16px;padding:6px 9px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 2px 7px #000000d9}.lcd .hint{color:#84ff9599}