:root{
  --ink:#20272c;--ink-2:#59636a;--paper:#f5f2e9;--paper-2:#ebe7dc;--panel:#fbfaf5;
  --rule:#c9c5ba;--rule-dark:#939087;--blue:#216a83;--blue-soft:#dcebf0;
  --high:#df5a2c;--high-soft:#f8ded4;--green:#27734c;--danger:#a33c37;
  --top:#20282d;--top-2:#2d373d;--white:#fff;--grid:#d8d4c9;
  --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans)}
button,input,select,textarea{font:inherit;color:inherit}
button,select,input{border:1px solid var(--rule);background:var(--panel);border-radius:6px}
button{cursor:pointer}
button:hover{border-color:var(--rule-dark);background:var(--white)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.app{display:grid;grid-template-rows:62px minmax(0,1fr) 30px;width:100vw;height:100vh;min-width:920px;min-height:580px;background:var(--rule)}
.top{display:grid;grid-template-columns:220px 150px minmax(280px,1fr) auto;align-items:center;gap:0;background:var(--top);color:#f4f2ea;border-bottom:1px solid #11181c}
.brand{height:100%;display:flex;align-items:center;gap:12px;padding:0 18px;border-right:1px solid #3b454b}
.brand-mark{display:grid;grid-template-columns:repeat(3,5px);gap:3px;align-items:end;height:24px}
.brand-mark i{display:block;background:#e5e1d7;border-radius:1px}.brand-mark i:nth-child(1){height:11px}.brand-mark i:nth-child(2){height:24px;background:var(--high)}.brand-mark i:nth-child(3){height:17px}
.brand h1{margin:0;font:500 16px var(--mono);letter-spacing:-.03em}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0 12px;padding:3px;background:#151c20;border:1px solid #3b454b;border-radius:8px}
.mode-switch button{height:34px;border:0;background:transparent;color:#aeb7bc;font:500 10px var(--mono);letter-spacing:.1em}
.mode-switch button.active{background:#f1eee5;color:#1e272c;box-shadow:0 1px 4px #0005}
.run-mode .mode-switch #runModeBtn.active{background:var(--high);color:#fff}
.wire-handle{fill:#f1eee5;stroke:var(--blue);stroke-width:2;cursor:move;vector-effect:non-scaling-stroke}
.wire-handle:hover{fill:var(--blue)}
.example{display:flex;align-items:center;gap:10px;min-width:0;padding:0 12px}
.example label,.cap{font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.top .example label{color:#9da7ac}
.example select{height:36px;min-width:0;width:min(360px,100%);padding:0 10px;border-color:#465158;background:var(--top-2);color:#f4f2ea;font:11px var(--mono)}
.top-actions{display:flex;gap:5px;padding-right:10px}
.top-actions button{height:34px;padding:0 10px;border-color:#465158;background:transparent;color:#d3d8da;font:500 9px var(--mono);letter-spacing:.05em}
.top-actions button:hover{background:#364249;color:#fff}
.main{display:grid;grid-template-columns:minmax(520px,1fr) 320px;grid-template-rows:minmax(0,1fr) 108px;min-height:0;gap:1px;background:#8c9295}
.run-mode .main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 108px}
.run-mode .right{display:none}
.workspace{display:contents}
.canvas-wrap{grid-column:1;grid-row:1}
.right{grid-column:2;grid-row:1}
.side{min-height:0;overflow:auto;background:var(--panel);scrollbar-width:thin;scrollbar-color:var(--rule-dark) transparent}
.side h2{margin:5px 0 14px;font-size:16px;font-weight:500}
.palette{display:grid;gap:12px}
.part-group{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.part-group-label{grid-column:1/-1;color:#737b80;font:500 8px var(--mono);letter-spacing:.13em}
.palette button{height:34px;padding:0 4px;background:#e3e5e5;border-color:#b4b9bb;font:600 9px var(--mono);letter-spacing:.04em;box-shadow:0 1px 0 #fff inset}
.palette button:hover{border-color:var(--blue);color:var(--blue)}
.palette button.chosen{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:none}
.hint{margin:14px 0 0;padding:10px 0;border-top:1px solid var(--rule);color:var(--ink-2);font-size:10px;line-height:1.55}
.canvas-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--paper)}
.canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;background-color:var(--paper);background-image:linear-gradient(#d8d4c977 1px,transparent 1px),linear-gradient(90deg,#d8d4c977 1px,transparent 1px),linear-gradient(#c4c0b466 1px,transparent 1px),linear-gradient(90deg,#c4c0b466 1px,transparent 1px);background-size:20px 20px,20px 20px,100px 100px,100px 100px;cursor:grab}
.canvas.panning{cursor:grabbing}
.edit-mode .canvas:not(.pan-tool) .node{cursor:move}
.run-mode .canvas .button-node{cursor:pointer}
.wire{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:square;pointer-events:none}
.wire.low{stroke:var(--blue)}
.wire.high{stroke:var(--high)}
.wire.hit{stroke:transparent;stroke-width:14;pointer-events:stroke}
.run-mode .wire.hit{pointer-events:none}
.wire.selected{stroke:var(--ink);stroke-dasharray:7 5}
.draft{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:7 5}
.node .box{fill:#fbfaf5;stroke:#69737a;stroke-width:1.5}
.node.selected .box{stroke:var(--blue);stroke-width:2.5}
.symbol{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.symbol-fill{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.node text{fill:var(--ink);font:500 11px var(--mono);text-anchor:middle;pointer-events:none}
.node .sub{fill:var(--ink-2);font-size:9px}
.node .value-low{fill:var(--blue)}
.node .value-high{fill:var(--high)}
.port{fill:var(--paper);stroke-width:2.4;cursor:crosshair}
.port.low{stroke:var(--blue)}.port.high{stroke:var(--high)}
.port:hover{fill:var(--ink);stroke:var(--ink)}
.run-mode .port{pointer-events:none}
.junction{fill:var(--ink)}
.button-node .button-shell{fill:#343e44;stroke:#151c20;stroke-width:1.5}
.button-node .button-face{fill:#eef0ed;stroke:#6d767a;stroke-width:1.5}
.button-node.active .button-shell{stroke:var(--high);stroke-width:3}
.button-node.active .button-face{fill:var(--high-soft);stroke:var(--high)}
.button-node.pressed .button-face{transform:translateY(4px)}
.button-node .button-state{font-size:10px;font-weight:500}
.led-lens{fill:#d8e4e8;stroke:var(--blue);stroke-width:2}
.led-node.active .led-lens{fill:var(--high);stroke:var(--high)}
.gate-node .box,.splitter-node .box,.button-node .box,.led-node .box{fill:transparent;stroke:transparent;stroke-width:1.5}
.edit-mode .node:hover .box{stroke:#9ea3a1;stroke-dasharray:3 3}
.node.selected .box{fill:#fff8;stroke:var(--blue);stroke-dasharray:none;stroke-width:1.5}
.node-id{fill:var(--ink-2)!important;font-size:8px!important}
.splitter-node .node-id{font-size:8px!important}
.splitter-node .port{opacity:0;fill:transparent;stroke:transparent}
.splitter-node:hover .port{opacity:.16;fill:var(--blue);stroke:var(--blue)}
.run-mode .splitter-node .port{opacity:0}
.switch-wire,.switch-lever{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.switch-contact{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.button-node.active .switch-wire,.button-node.active .switch-lever,.button-node.active .switch-contact{stroke:var(--high)}
.button-node.pressed .switch-lever{stroke-width:3}
.led-symbol{fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.led-node.active .led-symbol{stroke:#39b86f;filter:drop-shadow(0 0 3px #39b86faa)}
.layout-guide text{fill:#8d8d85;font:500 8px var(--mono);letter-spacing:.12em}
.layout-guide path{fill:none;stroke:#c9c5ba;stroke-width:1;stroke-dasharray:2 5}
.canvas-tools{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;padding:3px;border:1px solid var(--rule-dark);border-radius:8px;background:#fbfaf5ee;box-shadow:0 4px 16px #3a3a3422}
.canvas-tools button,.canvas-tools span{height:34px;min-width:38px;border:0;border-radius:5px;display:grid;place-items:center;background:transparent;font:500 10px var(--mono)}
.canvas-tools button:hover,.canvas-tools button.active{background:var(--ink);color:#fff}
.canvas-tools span{min-width:56px;color:var(--ink-2)}
.canvas-message{position:absolute;left:14px;bottom:14px;padding:7px 9px;border:1px solid #d1cdc2;border-radius:6px;background:#fbfaf5dd;color:var(--ink-2);font:9px var(--mono);pointer-events:none}
.io-console{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch;padding:8px 10px;background:#454b4f;color:#eff0ee;box-shadow:inset 0 1px #697075,inset 0 -1px #272c2f}
.io-console .io-bank+ .io-bank{padding-left:10px;border-left:1px solid #656c70}
.io-bank{min-width:0}.io-label{display:block;margin-bottom:7px;color:#b9bec0;font:600 8px var(--mono);letter-spacing:.14em}
.io-console .run-inputs{display:flex;justify-content:flex-end;gap:clamp(2px,.45vw,7px);margin:0;overflow:visible;padding:0}
.io-console .input-control{position:relative;flex:1 1 42px;max-width:48px;min-width:34px;display:block;min-height:58px;padding:1px 0 16px;background:transparent;border:1px solid transparent;border-radius:3px;box-shadow:none;color:#eef0ee;text-align:center;overflow:visible}
.io-console .input-control:hover{background:#50575b;border-color:#687074}
.control-actuator{position:relative;display:block;width:34px;height:36px;margin:0 auto}.control-actuator i{position:absolute;display:block}
.io-console .input-control .control-number{position:absolute;left:0;right:0;bottom:1px;display:block;height:14px;color:#fff;font:700 12px/14px var(--mono);letter-spacing:0;text-align:center;text-shadow:0 1px #171b1d}
.input-control.psh .control-actuator i{inset:5px 4px 6px;border:4px solid #252a2d;border-radius:50%;background:#b8bec0;box-shadow:inset 0 2px #eef0ef,0 3px 0 #1e2325}
.input-control.psh.pressed .control-actuator i{transform:translateY(3px);box-shadow:inset 0 2px #d6d9d8;background:#9da4a6}
.input-control.tog .control-actuator:before{content:"";position:absolute;inset:3px;border:3px solid #252a2d;border-radius:4px;background:#777f82;box-shadow:inset 0 0 0 2px #aeb4b6}
.input-control.tog .control-actuator i{inset:6px 7px 8px;border:1px solid #777f82;border-radius:2px;background:linear-gradient(#f2f3f1,#adb3b5);box-shadow:inset 0 1px #fff,0 4px 0 #202527}
.input-control.tog.active .control-actuator i{transform:translateY(3px);background:#b4b9ba;box-shadow:inset 0 3px 4px #5b6265,inset 0 -1px #e8eae9}
.input-control.pls .control-actuator{border:2px solid #252a2d;border-radius:4px;background:#343b3e;box-shadow:inset 0 0 0 2px #697276}
.input-control.pls .control-actuator i{left:5px;top:5px;width:5px;height:5px;border-radius:50%;background:#78919a;box-shadow:0 0 0 1px #202527}
.input-control.pls .control-actuator svg{position:absolute;left:3px;top:8px;width:28px;height:22px;fill:none;stroke:#a9cbd5;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.input-control.pls.active .control-actuator i{background:#39b86f;box-shadow:0 0 5px #39b86f}
.input-control.pls.active .control-actuator svg{stroke:#d7f3e1;filter:drop-shadow(0 0 2px #39b86f)}
.edit-mode .io-console .input-control{cursor:not-allowed;opacity:.62;filter:grayscale(1)}
.panel-lights{display:flex;justify-content:flex-start;gap:clamp(3px,.55vw,9px);min-height:62px;align-items:center;overflow:visible}
.panel-light{flex:1 1 44px;max-width:52px;min-width:36px;display:grid;place-items:center;gap:5px;color:#c7ccce;font:600 8px var(--mono)}
.panel-light i{display:block;width:34px;height:34px;border:4px solid #252a2d;border-radius:50%;background:#73828a;box-shadow:inset 0 0 0 3px #9aa5aa,0 2px 0 #202427}
.panel-light.active i{background:#39b86f;box-shadow:inset 0 0 0 3px #9ef0bc,0 0 13px #39b86faa,0 2px 0 #202427}
.right section{padding:16px;border-bottom:1px solid var(--rule)}
.right h2{margin:5px 0 11px;font-size:16px;font-weight:500}
.runtime{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.runtime button{height:36px;font:500 9px var(--mono)}
.runtime button.active{border-color:var(--green);background:var(--green);color:#fff}
.rate{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding:8px 0;border-top:1px solid var(--rule);color:var(--ink-2);font:10px var(--mono)}
.rule{margin:0;color:var(--ink-2);font-size:10px;line-height:1.5}
.run-inputs{display:grid;gap:8px;margin-top:10px}
.input-control{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;width:100%;min-height:48px;padding:6px 9px;text-align:left;background:#f6f3eb;border:1px solid var(--rule);box-shadow:0 2px 0 #b9b5ab}
.input-control kbd{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--rule-dark);border-radius:4px;background:#fff;font:500 10px var(--mono)}
.input-control span{font:500 11px var(--mono)}
.input-control strong{font:500 9px var(--mono);color:var(--blue)}
.input-control.active{border-color:var(--high);background:var(--high-soft);box-shadow:0 2px 0 #c98b75}
.input-control.active strong{color:var(--high)}
.input-control.pressed{transform:translateY(2px);box-shadow:none}
.input-control[disabled]{cursor:default;opacity:1}
.io-console .input-control.active{background:transparent;border-color:transparent;box-shadow:none}
.io-console .input-control.active:hover{background:#50575b;border-color:#687074}
.io-console .input-control.active strong{color:#e4e8e8}
.io-console .input-control.psh.pressed{transform:none;box-shadow:none}
.io-console .input-control.tog.pressed{transform:none}
.inspector{font:10px var(--mono)}
.empty{color:var(--ink-2);line-height:1.5}
.field{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:7px;margin-top:7px}
.field label{color:var(--ink-2)}
.field input,.field select{min-width:0;width:100%;height:31px;padding:0 7px;background:#fff;font:10px var(--mono)}
.triplet{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:9px}
.triplet>div{padding:7px;border:1px solid var(--rule);border-radius:6px;background:#f6f3eb}
.triplet b{display:block;margin-bottom:5px;color:var(--ink-2);font-size:9px}
.triplet input{width:100%;height:28px;margin-top:4px;padding:0 5px;background:#fff}
.mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.mini-actions button{min-height:32px;font:500 9px var(--mono)}
.danger{border-color:#d9aaa6!important;color:var(--danger)}
.history{margin:9px 0 0;padding:0;list-style:none}
.history li{min-height:25px;padding:6px;border-bottom:1px solid var(--rule);color:var(--ink-2);font:9px var(--mono);word-break:break-all}
.record-view{max-height:170px;margin-top:9px;padding:9px;overflow:auto;border:1px solid var(--rule);border-radius:6px;background:#272f34;color:#e9e6de;font:9px/1.5 var(--mono);white-space:pre}
.status{display:grid;grid-template-columns:145px 90px 116px 100px 1fr;background:var(--top);color:#e9e6de}
.status div{display:flex;align-items:center;gap:7px;padding:0 11px;border-right:1px solid #3b454b;font:9px var(--mono)}
.status span{color:#9da7ac}.status b{font-weight:500}.status .msg{justify-content:flex-end;border:0;color:#9da7ac}
.dot{width:8px;height:8px;border-radius:50%;background:#9da7ac}
.running .dot{background:#5bd092}.run-paused .dot{background:var(--high)}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:#10171bd9;backdrop-filter:blur(4px)}
.modal-card{display:grid;grid-template-rows:auto 1fr auto;width:min(850px,92vw);height:min(720px,88vh);padding:18px;border:1px solid #4f5a60;border-radius:10px;background:var(--panel)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.modal-head h2{margin:3px 0 0}
.modal textarea{width:100%;resize:none;border:1px solid var(--rule);border-radius:7px;background:#272f34;color:#f0eee8;padding:12px;font:11px/1.5 var(--mono)}
.modal-foot{display:flex;justify-content:flex-end;gap:6px;margin-top:10px}.modal button{height:34px;padding:0 12px;font:500 9px var(--mono)}
.dock-details{padding:13px 16px;border-bottom:1px solid var(--rule)}
.dock-details summary{cursor:pointer;color:var(--ink-2);font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.run-mode .edit-control{opacity:.42;filter:grayscale(1)}
.run-mode .edit-control button,.run-mode .edit-control input,.run-mode .edit-control select,.run-mode .edit-control summary{pointer-events:none}
.edit-mode .operate-control{opacity:.45;filter:grayscale(1)}
.edit-mode .operate-control button,.edit-mode .operate-control summary{pointer-events:none}
.hidden{display:none!important}
@media(max-width:1120px){.main{grid-template-columns:minmax(480px,1fr) 284px;grid-template-rows:minmax(0,1fr) 104px}.run-mode .main{grid-template-rows:minmax(0,1fr) 104px}.top{grid-template-columns:205px 140px minmax(230px,1fr) auto}.top-actions button{padding:0 7px}.io-console{gap:7px;padding:7px 8px}}