.dna-wrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin:8px 0}.graphbox{flex:1 1 470px;min-width:340px;position:relative}.graphtools{display:flex;align-items:center;gap:5px;margin:0 0 5px}.graphtools .pbbtn{font-size:.92em;padding:1px 7px}.graphtools .hint{color:#888;font-size:.85em;margin-left:4px}.graphframe{border:1px solid #7186a3;background:#fbfcfe;overflow:hidden;position:relative;height:560px;background-image:radial-gradient(#e7edf6 1px,transparent 1px);background-size:20px 20px}.graphframe svg{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.graphframe svg.grabbing{cursor:grabbing}.wtip{position:absolute;left:0;top:0;pointer-events:none;z-index:6;background:#222d;color:#fff;font:bold 11px/1.1 Tahoma,arial,sans-serif;padding:3px 7px;border-radius:4px;white-space:nowrap;transform:translate(-50%,-150%);opacity:0;transition:opacity .1s}.wtip.on{opacity:1}.zoomctl{display:inline-flex;align-items:center;gap:5px}.zoomctl .zlbl{color:#3a59bc;font:bold 13px/1 Tahoma,arial,sans-serif;opacity:.7}.zoomrange{width:118px;accent-color:#3a59bc;cursor:pointer;vertical-align:middle}.graph-conn{stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.graph-hit{stroke:transparent;stroke-width:13;cursor:ns-resize}.connwrap:hover .graph-conn{stroke:#30a030;stroke-width:5}.graph-node .tilebg{fill:#fff;cursor:pointer}.graph-node .frame{fill:none}.graph-node .hit{fill:transparent;cursor:pointer}.graph-node text.cap{font:bold 11px arial,sans-serif;text-anchor:middle;fill:#333;pointer-events:none;paint-order:stroke;stroke:#fbfcfecc;stroke-width:3px}.frame-input{stroke:#555;stroke-width:2}.frame-grey{stroke:#8a8a8a;stroke-width:2.5}.frame-color{stroke:#2d68d4;stroke-width:2.5}.frame-output{stroke:#cc8a1a;stroke-width:3}.node-sel .frame{stroke:#1d7a1d!important;stroke-width:4!important}.node-lit .frame{stroke:#cd6137!important;stroke-width:4!important}.ctrlbtn{cursor:pointer}.ctrlbtn circle{fill:#f4f2ea;stroke:#7a7a72;stroke-width:1}.ctrlbtn:hover circle{fill:#3a59bc}.ctrlbtn:hover text{fill:#fff}.ctrlbtn text{font:bold 9px Tahoma,arial,sans-serif;text-anchor:middle;dominant-baseline:central;fill:#222;pointer-events:none}.ctrlbtn.cur circle{fill:#30a030;stroke:#1d7a1d}.ctrlbtn.cur text{fill:#fff}.ctrlbtn.danger:hover circle{fill:#c0392b}.linkdrag{stroke:#2d68d4;stroke-width:2.5;stroke-dasharray:6 4;pointer-events:none}.rpanel{flex:0 0 224px}.rpanel .card{border:1px solid #7186a3;background:#fff;margin:0 0 12px}.rpanel .card h4{margin:0;padding:4px 8px;background:#eaeff6;color:#3a59bc;font-size:.95em;border-bottom:1px solid #cdd9ec}.rpanel .card .body{padding:8px;text-align:center}.rpanel canvas{width:200px;height:200px;border:1px solid #777;background:#000;image-rendering:auto}.rpanel .meta{font-size:.85em;color:#444;margin-top:5px;line-height:1.4;text-align:left}.rpanel .meta b{color:#33332b}.rpanel .row{margin-top:6px}.rpanel .placeholder{color:#999;font-size:.88em;padding:30px 6px}.linkmode-banner{background:#fff7e0;border:1px solid #e0c870;color:#7a5a10;padding:5px 9px;margin:0 0 8px;display:none}.linkmode-banner.on{display:block}.legend{font-size:.85em;color:#666;margin:6px 0 0}.legend .sw{display:inline-block;width:22px;height:0;border-top-width:3px;border-top-style:solid;vertical-align:middle;margin:0 3px}.legend .dot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin:0 2px}.editpanel{border:1px solid #7186a3;background:#fff;padding:8px 10px;margin:10px 0;font-size:.92em;display:none}.editpanel.on{display:block}.editpanel h4{margin:0 0 6px}.editpanel table{border-collapse:collapse}.editpanel td,.editpanel th{padding:2px 8px;text-align:left;border-bottom:1px solid #eee;font-size:.95em}.editpanel input[type=number]{width:64px}.dna-status{margin:6px 0}.dna-actions{margin:10px 0}.dna-actions .pbbtn{font-size:1.02em;padding:3px 10px}.dna-actions .pbbtn .ic{color:#1d7a1d}.instr{font-size:.9em;color:#444;line-height:1.5}.instr code{background:#eef2f8;padding:0 3px}