.circuit-lab{padding:105px clamp(25px,6vw,94px);background:var(--green);color:#fff}.circuit-lab .eyebrow{color:#f7b292}.lab-heading{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:end;max-width:1200px;margin:0 auto 48px}.lab-heading h2{margin:0;font-size:clamp(40px,5vw,68px);line-height:1;color:#fff}.lab-heading p:last-child{margin:0;line-height:1.65;color:rgba(255,255,255,.82)}.lab-board{max-width:1200px;margin:auto;padding:clamp(24px,4vw,48px);border-radius:26px;background:#fffaf2;color:var(--ink);box-shadow:0 24px 60px rgba(30,24,20,.22)}.lab-instruction{margin:0 auto 20px;text-align:center;font-weight:700;color:var(--green)}.circuit-stage{position:relative;padding:12px 24px 28px;overflow:hidden}.wire-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none}.physical-row,.schematic-row{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(38px,6vw,86px)}.device-card,.symbol-card{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;text-align:center}.device-card{min-height:225px;padding:22px 12px 17px;border:1px solid #d7c7b4;border-radius:20px;background:linear-gradient(155deg,#fbf6ec,#eee1ce);box-shadow:0 10px 26px rgba(52,40,32,.08)}.device-card strong,.symbol-card strong{margin-top:14px;font:700 20px Georgia,serif;color:var(--green)}.device-card small{margin-top:5px;color:#75675d}.real-contact{position:absolute;z-index:5;top:46%;display:grid;place-items:center;width:27px;height:27px;border:4px solid #fffaf2;border-radius:50%;background:#3d342e;color:#fff;font-weight:800;box-shadow:0 0 0 2px #3d342e}.real-left,.real-minus{left:-14px}.real-right,.real-plus{right:-14px}.car-battery{position:relative;width:132px;height:86px;border:6px solid #292522;border-radius:7px 7px 13px 13px;background:linear-gradient(#353b3f 0 28%,#1f2428 28% 100%);box-shadow:inset 0 -12px rgba(0,0,0,.22),0 8px 14px rgba(0,0,0,.18)}.car-battery:before,.car-battery:after{position:absolute;top:-16px;width:25px;height:13px;border:4px solid #292522;border-radius:5px 5px 0 0;content:""}.car-battery:before{left:18px;background:#4b555b}.car-battery:after{right:18px;background:#d85c2e}.car-battery span:before{position:absolute;top:40px;left:49px;padding:5px 8px;border:2px solid #9da5a8;border-radius:4px;color:#fff;font:bold 17px Arial;content:"12 V"}.toggle-switch{position:relative;width:94px;height:112px;padding:0;border:0;background:transparent;cursor:pointer}.toggle-switch:before{position:absolute;left:20px;bottom:4px;width:54px;height:36px;border:6px solid #25211e;border-radius:9px;background:linear-gradient(#b7a894,#75685b);box-shadow:inset 0 5px rgba(255,255,255,.2);content:""}.toggle-handle{position:absolute;left:42px;bottom:34px;width:12px;height:65px;border:5px solid #25211e;border-radius:8px;background:#d9d0c5;transform:rotate(-24deg);transform-origin:bottom;transition:transform .25s}.circuit-stage.is-closed .toggle-handle{transform:rotate(24deg)}.real-bulb{position:relative;width:92px;height:92px;border:5px solid #342d28;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 37% 30%,#fff9da,#ead6a7 62%,#bd9d6a);transition:.3s}.real-bulb:before{position:absolute;bottom:-31px;left:27px;width:30px;height:31px;border:4px solid #342d28;border-radius:0 0 7px 7px;background:repeating-linear-gradient(#a89c90 0 5px,#59514b 5px 9px);content:""}.real-bulb span:before,.real-bulb span:after{position:absolute;top:34px;width:38px;height:3px;background:#66574d;content:""}.real-bulb span:before{left:8px;transform:rotate(47deg)}.real-bulb span:after{right:8px;transform:rotate(-47deg)}.real-bulb.is-on{border-color:#e58f19;background:#ffd455;box-shadow:0 0 22px #ffd455,0 0 58px rgba(255,194,55,.9)}.scheme-label{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;margin:28px 0 20px;padding:12px 18px;border-radius:12px;background:#e9dfcf;color:var(--green);font-weight:800}.scheme-label small{color:#75675d;font-weight:500}.schematic-row{padding:12px 0}.symbol-card{min-height:155px;border:2px solid #4d433c;border-radius:12px;background:#fff}.symbol-card:before,.symbol-card:after{position:absolute;top:50%;width:24%;height:3px;background:#342d28;content:""}.symbol-card:before{left:0}.symbol-card:after{right:0}.battery-symbol{position:relative;width:64px;height:88px}.battery-symbol i{position:absolute;top:8px;bottom:8px;width:4px;background:#342d28}.battery-symbol i:first-child{left:20px}.battery-symbol i:last-child{right:20px;height:48px;top:20px}.switch-symbol{position:relative;width:108px;height:70px}.switch-symbol i{position:absolute;bottom:10px;width:16px;height:16px;border:4px solid #342d28;border-radius:50%;background:#fff}.switch-symbol i:first-child{left:7px}.switch-symbol i:nth-child(2){right:7px}.switch-symbol span{position:absolute;left:22px;bottom:22px;width:69px;height:5px;border-radius:5px;background:#342d28;transform:rotate(-25deg);transform-origin:left;transition:.25s}.circuit-stage.is-closed .switch-symbol span{transform:rotate(0)}.lamp-symbol{position:relative;width:72px;height:72px;border:4px solid #342d28;border-radius:50%;background:#fff}.lamp-symbol:before,.lamp-symbol:after{position:absolute;top:32px;left:8px;width:48px;height:4px;background:#342d28;content:""}.lamp-symbol:before{transform:rotate(45deg)}.lamp-symbol:after{transform:rotate(-45deg)}.lamp-symbol.is-on{border-color:#d99016;background:#ffe17a;box-shadow:0 0 18px rgba(255,196,45,.8)}.terminal{position:absolute;z-index:6;top:50%;width:34px;height:34px;padding:0;border:5px solid #fff;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--orange),0 4px 10px rgba(52,40,32,.22);cursor:grab;touch-action:none;transform:translateY(-50%)}.terminal-left{left:-17px}.terminal-right{right:-17px}.terminal:after{position:absolute;top:35px;left:50%;transform:translateX(-50%);color:#594c43;font-size:11px;font-weight:800;content:attr(data-label)}.terminal:focus-visible{outline:4px solid #2f84d0;outline-offset:4px}.terminal.is-active{background:#ffd455;box-shadow:0 0 0 4px #ffd455;transform:translateY(-50%) scale(1.2)}.terminal.is-connected{background:#55a366;box-shadow:0 0 0 2px #55a366}.lab-controls{display:flex;justify-content:center;margin-top:20px}.lab-controls button{min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:700;cursor:pointer}.lab-result{max-width:760px;min-height:64px;margin:22px auto 0;padding:18px 22px;border-radius:14px;background:#f1e6d6;line-height:1.55;text-align:center}.lab-result.success{background:#dcebdc;color:#234d32}.lab-result.warning{background:#f7dfd4;color:#7c301b}.lab-tip{margin:17px 0 0;text-align:center;color:#6f6258;font-size:14px}
@media(max-width:700px){.circuit-lab{padding:72px 12px}.lab-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}.lab-heading h2{font-size:40px}.lab-board{padding:18px 8px;border-radius:20px}.lab-instruction{font-size:13px}.circuit-stage{padding:8px 13px 20px}.physical-row,.schematic-row{gap:20px}.device-card{min-height:150px;padding:12px 4px 10px}.device-card strong,.symbol-card strong{font-size:12px;margin-top:9px}.device-card small{font-size:9px}.car-battery{width:76px;height:53px;border-width:4px}.car-battery:before,.car-battery:after{top:-11px;width:15px;height:8px;border-width:3px}.car-battery:before{left:10px}.car-battery:after{right:10px}.car-battery span:before{top:24px;left:24px;padding:3px;font-size:10px}.toggle-switch{width:62px;height:78px}.toggle-switch:before{left:14px;width:34px;height:25px;border-width:4px}.toggle-handle{left:27px;bottom:26px;width:8px;height:43px;border-width:3px}.real-bulb{width:57px;height:70px;border-width:4px;border-radius:50% 50% 39% 39%/57% 57% 43% 43%}.real-bulb:before{bottom:-25px;left:17px;width:17px;height:25px;border-width:3px}.real-bulb:after{bottom:-7px;left:14px;width:29px;height:13px}.real-bulb span{top:30px;left:18px;width:21px;height:14px;border-width:2px}.real-bulb span:before,.real-bulb span:after{top:12px;width:20px;height:2px}.real-bulb span:before{left:-12px}.real-bulb span:after{right:-12px}.real-contact{top:47%;width:21px;height:21px;border-width:3px;font-size:10px}.real-left,.real-minus{left:-11px}.real-right,.real-plus{right:-11px}.scheme-label{margin:20px 0 13px;padding:9px 10px;font-size:13px}.scheme-label small{font-size:9px}.symbol-card{min-height:108px}.symbol-card strong{font-size:11px}.battery-symbol{width:42px;height:60px}.battery-symbol i:first-child{left:12px}.battery-symbol i:last-child{right:12px;height:36px;top:12px}.switch-symbol{width:64px;height:50px}.switch-symbol i{bottom:8px;width:11px;height:11px;border-width:3px}.switch-symbol i:first-child{left:4px}.switch-symbol i:nth-child(2){right:4px}.switch-symbol span{left:16px;bottom:18px;width:37px;height:4px}.lamp-symbol{width:48px;height:48px;border-width:3px}.lamp-symbol:before,.lamp-symbol:after{top:21px;left:6px;width:31px;height:3px}.terminal{width:29px;height:29px;border-width:4px}.terminal-left{left:-14px}.terminal-right{right:-14px}.terminal:after{top:29px;font-size:9px}.lab-result{font-size:13px;padding:14px}.lab-tip{font-size:11px}}
.real-bulb{width:88px;height:108px;border-radius:50% 50% 38% 38%/58% 58% 42% 42%;background:radial-gradient(circle at 34% 24%,#fffdf0 0 12%,#f7e7b8 38%,#dab96f 75%,#a97936 100%)}.real-bulb:after{position:absolute;z-index:-1;bottom:-13px;left:21px;width:46px;height:23px;border:4px solid #342d28;border-radius:5px;background:#b2a598;content:""}.real-bulb:before{bottom:-39px;left:25px;width:30px;height:32px}.real-bulb span{position:absolute;top:46px;left:27px;width:28px;height:19px;border:3px solid #745428;border-top:0;border-radius:0 0 50% 50%}.real-bulb span:before,.real-bulb span:after{top:16px;width:29px;height:3px;background:#745428}.real-bulb span:before{left:-18px;transform:rotate(62deg)}.real-bulb span:after{right:-18px;transform:rotate(-62deg)}
@media(max-width:700px){.real-bulb{width:57px;height:70px;border-width:4px}.real-bulb:before{bottom:-25px;left:17px;width:17px;height:25px;border-width:3px}.real-bulb:after{bottom:-7px;left:14px;width:29px;height:13px;border-width:3px}.real-bulb span{top:30px;left:18px;width:21px;height:14px;border-width:2px}.real-bulb span:before,.real-bulb span:after{top:12px;width:20px;height:2px}.real-bulb span:before{left:-12px}.real-bulb span:after{right:-12px}}
.real-bulb.is-on{border-color:#e58f19;background:radial-gradient(circle at 34% 24%,#fff 0 10%,#fff6a8 32%,#ffd23f 72%,#e99b12 100%);box-shadow:0 0 24px #ffd455,0 0 62px rgba(255,194,55,.95)}
.real-bulb-image{position:relative;width:108px;height:142px;overflow:hidden;border-radius:46% 46% 18% 18%;background:#fff;filter:drop-shadow(0 7px 7px rgba(52,40,32,.18))}.real-bulb-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .28s ease}.real-bulb-image .bulb-on-image{opacity:0}.real-bulb-image.is-on .bulb-off-image{opacity:0}.real-bulb-image.is-on .bulb-on-image{opacity:1}.real-bulb-image.is-on{filter:drop-shadow(0 0 13px #ffd455) drop-shadow(0 0 24px rgba(255,194,55,.75))}
@media(max-width:700px){.real-bulb-image{width:68px;height:90px}}
/* IEC-style symbol leads run continuously from each red terminal to the component. */
.symbol-card:nth-child(1):before,.symbol-card:nth-child(1):after{width:calc(50% - 12px)}.symbol-card:nth-child(2):before,.symbol-card:nth-child(2):after{width:calc(50% - 47px)}.symbol-card:nth-child(3):before,.symbol-card:nth-child(3):after{width:calc(50% - 36px)}
/* The long battery plate is positive (right), the short plate is negative (left). */
.battery-symbol i:first-child{top:20px;bottom:auto;height:48px}.battery-symbol i:last-child{top:8px;bottom:8px;height:auto}
@media(max-width:700px){.symbol-card:nth-child(1):before,.symbol-card:nth-child(1):after{width:calc(50% - 8px)}.symbol-card:nth-child(2):before,.symbol-card:nth-child(2):after{width:calc(50% - 29px)}.symbol-card:nth-child(3):before,.symbol-card:nth-child(3):after{width:calc(50% - 24px)}.battery-symbol i:first-child{top:12px;bottom:auto;height:36px}.battery-symbol i:last-child{top:8px;bottom:8px;height:auto}}
/* Keep each IEC symbol centered exactly on the conductor line; labels sit independently below. */
.symbol-card>.battery-symbol,.symbol-card>.switch-symbol,.symbol-card>.lamp-symbol{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}
.symbol-card>.switch-symbol{top:calc(50% - 17px)}
.symbol-card>strong{position:absolute;right:0;bottom:10px;left:0;margin:0}
@media(max-width:700px){.symbol-card>.switch-symbol{top:calc(50% - 12px)}.symbol-card>strong{bottom:5px}}
/* Safe, symbolic fault animation: smoke and heat explain a short circuit without depicting flames. */
.lab-result.danger{background:#5b241d;color:#fff4e8;box-shadow:0 0 0 4px rgba(216,92,46,.2)}
.circuit-stage.is-battery-damaged .physical-row .device-card:first-child{border-color:#d85c2e;animation:fault-shake .18s linear 4;box-shadow:0 0 0 5px rgba(216,92,46,.18),0 12px 30px rgba(80,31,20,.25)}
.circuit-stage.is-battery-damaged .physical-row .device-card:first-child:before,.circuit-stage.is-battery-damaged .physical-row .device-card:first-child:after{position:absolute;z-index:8;top:10px;left:48%;width:34px;height:34px;border-radius:50%;background:rgba(85,83,80,.72);filter:blur(4px);content:"";pointer-events:none;animation:smoke-rise 1.7s ease-out infinite}
.circuit-stage.is-battery-damaged .physical-row .device-card:first-child:after{left:58%;width:25px;height:25px;animation-delay:.65s}
.circuit-stage.is-switch-damaged .physical-switch{border-color:#e1592a;box-shadow:0 0 24px rgba(238,78,35,.72),inset 0 0 30px rgba(255,83,30,.2);animation:heat-pulse .65s ease-in-out infinite alternate}
.circuit-stage.is-switch-damaged .toggle-switch:before{background:linear-gradient(#ff9b5c,#a72f18)}
.circuit-stage.is-short .terminal.is-connected{background:#d33b27;box-shadow:0 0 0 3px #ffb09d}
@keyframes smoke-rise{0%{opacity:0;transform:translate(0,20px) scale(.5)}25%{opacity:.9}100%{opacity:0;transform:translate(18px,-65px) scale(1.8)}}
@keyframes heat-pulse{to{filter:saturate(1.5) brightness(1.08)}}
@keyframes fault-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.circuit-stage.is-battery-damaged .physical-row .device-card:first-child,.circuit-stage.is-battery-damaged .physical-row .device-card:first-child:before,.circuit-stage.is-battery-damaged .physical-row .device-card:first-child:after,.circuit-stage.is-switch-damaged .physical-switch{animation:none}}
/* Three independent cable lanes keep every connection visually traceable. */
.circuit-stage{padding-top:58px;padding-bottom:68px}
@media(max-width:700px){.circuit-stage{padding-top:44px;padding-bottom:56px}}
/* Phone-only compact laboratory; desktop dimensions remain unchanged. */
@media(max-width:700px){
  .circuit-lab{padding:48px 5px}
  .lab-heading{gap:12px;margin-bottom:20px;padding:0 8px}
  .lab-heading h2{font-size:30px;line-height:1.05}
  .lab-heading p:last-child{font-size:12px;line-height:1.45}
  .lab-board{padding:12px 4px;border-radius:16px}
  .lab-instruction{max-width:330px;margin-bottom:8px;font-size:11px;line-height:1.4}
  .circuit-stage{padding:38px 9px 48px}
  .physical-row,.schematic-row{gap:12px}
  .device-card{min-height:132px;padding:9px 2px 7px;border-radius:13px}
  .device-card strong{font-size:10px;line-height:1.1}
  .device-card small{font-size:8px}
  .scheme-label{margin:13px 0 10px;padding:7px 8px}
  .scheme-label span{font-size:11px}
  .scheme-label small{font-size:8px}
  .symbol-card{min-height:94px}
  .symbol-card strong{font-size:10px}
  .terminal{width:27px;height:27px}
  .terminal-left{left:-13px}.terminal-right{right:-13px}
  .lab-controls{margin-top:10px}
  .lab-controls button{min-height:42px;font-size:12px}
  .lab-result{min-height:52px;margin-top:14px;padding:11px 12px;font-size:12px;line-height:1.4}
}
@media(max-width:700px){
  .car-battery{width:60px;height:42px}
  .car-battery span:before{top:18px;left:18px;font-size:8px}
  .toggle-switch{width:50px;height:64px}
  .toggle-switch:before{left:10px;width:30px;height:21px}
  .toggle-handle{left:21px;bottom:22px;height:35px}
  .real-bulb-image{width:54px;height:72px}
  .real-contact{width:18px;height:18px;border-width:2px;font-size:8px}
  .real-left,.real-minus{left:-9px}.real-right,.real-plus{right:-9px}
  .terminal{width:20px;height:20px;border-width:3px;box-shadow:0 0 0 1px var(--orange)}
  .terminal-left{left:-10px}.terminal-right{right:-10px}
  .terminal:before{position:absolute;inset:-12px;content:""}
  .terminal:after{top:23px;font-size:7px}
  .device-card strong,.symbol-card strong{max-width:100%;font-size:8.5px;line-height:1.12;overflow-wrap:anywhere}
  .device-card small{max-width:82px;line-height:1.15}
}
