.circuit-board{position:relative;height:540px;max-width:620px;margin:20px auto;background:linear-gradient(120deg,#f8fcff,#e0f1fa);border-radius:22px;border:1px solid #b2d6ec;isolation:isolate}
.circuit-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.circuit-wires path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:5}.circuit-wires .pending{stroke:#7791aa;stroke-width:3;stroke-dasharray:5 8}.circuit-wires .connected{stroke:#e54548;filter:drop-shadow(0 2px 1px #80272a55)}.wire-focus .connected{stroke:#a66e00;stroke-width:8}
.circuit-component{position:absolute;top:calc(var(--row)*33.333% + 3%);height:27.33%;left:22%;width:56%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#fff;border:2px solid #c1dced;border-radius:20px;padding:8px;gap:4px;z-index:1}.circuit-component:before,.circuit-component:after{content:'';position:absolute;top:50%;height:5px;width:19%;background:#728c9e;z-index:-1}.circuit-component:before{right:100%}.circuit-component:after{left:100%}.circuit-component img{width:80px;height:80px;object-fit:contain;border-radius:14px}.circuit-component strong{font-size:.95rem;line-height:1.3}.circuit-lit .component-bulb{background:#fff6c3;border-color:#eab323;box-shadow:0 0 25px #ffe15999}.circuit-lit .component-bulb img{filter:drop-shadow(0 0 10px #ffcf26);background:radial-gradient(#ffffa3,#ffeb7180,transparent)}
.terminal{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;min-width:48px;display:grid;place-items:center;padding:0;border-radius:50%;border:3px solid #bd8d12;background:#ffe88c;color:#153359;font-weight:900;z-index:2;touch-action:manipulation;box-shadow:0 3px 0 #b48a29}.terminal[aria-pressed=true]{background:#1672d7;color:white;border-color:#103e80;outline:3px solid #b9daff}.terminal.connected{opacity:1;background:#d5f5d7;color:#175d29;border-color:#46a55c;box-shadow:0 3px 0 #43864c}.circuit-switch{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:10px;width:100%;min-height:110px;border:0;border-radius:15px;background:#edf4fb;color:#153359;cursor:pointer}.switch-mechanism{position:relative;width:88px;height:37px;background:#283b52;border-radius:9px;border:3px solid #53758e;box-shadow:0 4px 0 #17263c}.switch-mechanism span{position:absolute;left:12px;top:4px;width:57px;height:15px;background:#eb4545;border:2px solid #a42031;border-radius:5px;transform:rotate(-30deg);transform-origin:8px center;transition:transform .2s}.closed .switch-mechanism span{transform:rotate(0)}.circuit-status{text-align:center;font-weight:700;color:#254e70;line-height:1.6}.circuit-component.observed{outline:4px solid #edbd33;outline-offset:2px}
@media(max-width:640px){.circuit-board{height:540px;margin:15px 0}.circuit-component{left:22%;width:56%;padding:5px}.circuit-component strong{font-size:.8rem}.circuit-component img{width:75px;height:75px}.circuit-switch{padding:6px}.switch-mechanism{width:70px}.switch-mechanism span{width:48px;left:8px}.terminal{width:44px;height:44px;min-width:44px;font-size:.85rem}}
@media(max-height:550px) and (min-width:641px){.circuit-board{height:450px}.circuit-component img{width:65px;height:65px}.circuit-switch{min-height:90px}}
@media(prefers-reduced-motion:reduce){.switch-mechanism span{transition:none}}
.circuit-art{position:relative;display:inline-flex;line-height:0}.circuit-lit .component-bulb .circuit-art:after{content:'';position:absolute;left:26%;top:11%;width:48%;height:48%;border-radius:50%;background:radial-gradient(ellipse,#fffde8 0%,#fff397dd 40%,#ffdf5355 68%,transparent 75%);box-shadow:0 0 14px #ffdd3c;pointer-events:none;mix-blend-mode:screen}