:root{color-scheme:dark;--bg:#101d26;--panel:#172a35;--line:#344a53;--text:#e8eee9;--muted:#a7b9bb;--accent:#f2c77c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 system-ui,sans-serif}a{color:inherit}header,footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 4vw;border-bottom:1px solid var(--line)}header a{text-decoration:none;font-weight:700}header span{color:var(--muted);font-size:12px}main{max-width:1600px;margin:auto;padding:30px 4vw}.intro{display:flex;align-items:center;gap:60px;margin:0 0 28px}.intro>p{max-width:420px;color:var(--muted);font-size:17px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);margin:0 0 12px}h1{font-size:clamp(28px,3vw,44px);line-height:1.15;margin:0;font-weight:650}h1 em{font-style:normal;color:var(--accent)}h2{font-size:17px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:20px;align-items:start}.room-panel{position:sticky;top:12px;background:#182d36;border:1px solid var(--line);border-radius:18px;overflow:hidden}.room-toolbar,.room-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;flex-wrap:wrap}.room-toolbar button{font-size:12px;min-height:36px}.badge{font-size:12px;font-weight:750;color:var(--accent)}#room{position:relative;height:560px;width:100%;overflow:hidden;background:#182d36}#room canvas{display:block;touch-action:none}.labels{position:absolute;inset:0;pointer-events:none}.port{pointer-events:auto;min-width:31px;min-height:31px;padding:3px 5px;border:2px solid #d9ba7b;border-radius:50%;background:#162831;color:#fff;font-size:10px;font-weight:800;box-shadow:0 2px 6px #0008}.port.selected{background:#f2c77c;color:#14212b;border-color:white}.device-label{background:#10232de6;padding:3px 8px;border-radius:5px;font-size:11px;color:#eaf1f1;white-space:nowrap}.rocker-label{pointer-events:auto;font-size:11px;padding:5px 9px;min-height:32px}.room-caption,.legend,.note{font-size:12px;color:var(--muted)}.legend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line)}i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.live{background:#ff9846;box-shadow:0 0 9px #ff9846}.flow{background:#fff2b4}.note{padding:0 16px 10px;margin-top:0}aside{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:18px}button,select{font:inherit;color:inherit;background:#213944;border:1px solid #49616b;border-radius:7px;padding:9px 12px;min-height:42px;cursor:pointer}button:hover{border-color:var(--accent);background:#304a55}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:#1b2830;border-color:var(--accent);font-weight:750}.primary:hover{background:#ffdb9b}.field{display:grid;gap:5px;font-size:12px;color:var(--muted)}select{width:100%;color:var(--text)}.power-row{display:flex;align-items:center;gap:10px;margin-top:16px}.power-row span{font-size:12px}#status{font-size:13px;padding:12px;background:#10222c;border-left:3px solid var(--accent);min-height:65px}.step{display:flex;gap:10px;align-items:center;margin:24px 0 14px}.step>b{border:1px solid var(--line);border-radius:50%;width:28px;height:28px;text-align:center;color:var(--accent)}#selection{font-size:12px;color:var(--muted)}.terminal-row{display:flex;gap:7px;align-items:center;margin-top:10px}.terminal-row>span{font-size:12px;flex:1}.terminal-row button{min-width:39px;padding:7px}.terminal-row button[aria-pressed=true]{background:var(--accent);color:var(--bg)}#switches{display:grid;gap:8px}#switches button{text-align:left}.actions{display:grid;gap:8px;margin:18px 0}details{font-size:13px;margin-top:18px}summary{cursor:pointer;min-height:40px}#wires{padding:0;list-style:none}#wires li{border-top:1px solid var(--line);padding:8px 0;display:flex;align-items:center;gap:6px}#wires li span{flex:1;font-size:12px}#wires button{font-size:12px;padding:5px}#feedback{font-size:13px;color:var(--accent)}.explanation{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:45px 0}.explanation p:not(.eyebrow),.safety{color:var(--muted);font-size:14px}.safety{border-top:1px solid var(--line);padding-top:18px}footer{font-size:12px}.error{padding:30px;color:var(--accent)}@media(min-width:1500px){#room{height:650px}}@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 300px}main{padding:24px 20px}#room{height:500px}.intro{gap:25px}.port{min-width:28px;min-height:28px}}@media(max-width:760px){header{font-size:12px;padding:15px}.intro{display:block}.intro>p{font-size:15px;max-width:none}.workspace{display:block}.room-panel{position:relative;top:0;margin-bottom:16px}#room{height:440px}main{padding:25px 12px}.room-toolbar{padding:8px}.room-toolbar button{padding:5px 8px}.explanation{grid-template-columns:1fr;gap:18px;margin:30px 6px}.intro{margin:0 6px 20px}aside{padding:18px}.port{min-width:27px;min-height:27px;font-size:10px}.device-label{font-size:10px}.room-caption{font-size:11px}.rocker-label{font-size:10px}.room-toolbar .badge{flex-basis:100%}}
:is(.room-toolbar) select{width:auto;max-width:180px;font-size:12px;min-height:36px;padding:5px 8px}

.view-controls,.wire-legend{display:flex;flex-wrap:wrap;gap:10px 20px;padding:12px 16px;border-top:1px solid var(--line);font-size:13px}.view-controls label{font-weight:750;color:var(--accent)}.view-controls span{color:var(--muted);font-size:12px}.wire-legend span{display:flex;align-items:center;gap:6px}.swatch{flex-shrink:0;display:inline-block;width:24px;height:9px;border-radius:3px;border:1px solid #ffffff50;margin:0}.swatch.brown{background:#9e592b}.swatch.blue{background:#337fe8}.swatch.pe{background:repeating-linear-gradient(120deg,#ffe43c 0 5px,#18773d 5px 10px)}.swatch.black{background:#252525}.swatch.grey{background:#9aa3a8}[data-kind=L]{border-color:#b97a45!important;background:#704224!important}[data-kind=N]{border-color:#65a9ff!important;background:#164d86!important}[data-kind=PE]{border-color:#f7dd46!important;background:repeating-linear-gradient(120deg,#e5ce3d 0 8px,#297c44 8px 16px)!important;color:#081d17!important;text-shadow:0 0 3px white}.history-controls{display:flex;flex-wrap:wrap;gap:8px}.history-controls small{flex-basis:100%;font-size:11px;color:var(--muted)}.wire-editor{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}.wire-editor p{font-size:12px;color:var(--muted)}#wires button{white-space:nowrap}.clean-room .wiring-editor,.clean-room .wire-legend,.clean-room .legend,.clean-room .note,.clean-room #voltage{display:none}.clean-room .room-caption label{display:none}.clean-room #switches button{font-size:13px}.port.selected{outline:3px solid white;outline-offset:2px}

#lamp-explanation{font-size:12px;color:var(--accent)}.lamp-guide{border-top:1px solid var(--line);padding:24px 0;max-width:1000px}.lamp-guide p{color:var(--muted)}.full-only{display:none}.electro-lock-scroll{overflow:hidden}.room-panel.electro-fullscreen{position:fixed!important;inset:0;z-index:10000;border-radius:0;width:100vw;height:100dvh;margin:0;display:flex;flex-direction:column;background:#182d36}.room-panel.electro-fullscreen #room{flex:1;height:auto;min-height:150px}.electro-fullscreen .full-only{display:inline-block}.electro-fullscreen .note{display:none}.electro-fullscreen .room-toolbar{flex-shrink:0}.electro-fullscreen .room-toolbar button{padding:6px 9px}

.labels .device-label,.labels .rocker-label{opacity:0}.labels .device-label.revealed,.labels .rocker-label.revealed,.labels .rocker-label:hover,.labels .rocker-label:focus-visible{opacity:1}.port.is-live{box-shadow:0 0 0 2px #ff9846,0 0 10px #ff9846}.labels .device-label{pointer-events:none}