:root{--node-width:220px;--node-bg:#fff;--wire:#4d9187;--canvas:#f4f6f2;--grid:#cbd8d0}
html{scroll-behavior:auto}body{background:transparent;min-width:0}.lab{max-width:1600px;margin:auto;padding:var(--s4) 0}.lab-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}.lab-head h1{font-size:var(--xl);margin:var(--s1) 0 0}.intro{color:var(--muted)}.scenario-bar{display:flex;align-items:end;gap:var(--s3);flex-wrap:wrap}.scenario-bar .field{flex:1 1 250px;margin:0}.scenario-bar a{font-size:var(--sm);padding:var(--s2) 0}.tip{background:var(--light);padding:var(--s4);border-radius:8px;margin:var(--s4) 0;font-size:var(--sm)}.toolbar{display:flex;gap:var(--s3);align-items:end;flex-wrap:wrap;padding:var(--s3);background:var(--white);border:1px solid var(--line);border-radius:var(--s3) var(--s3) 0 0}.compact{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--xs);flex:1 1 130px;min-width:0}.zoom-controls{display:flex;gap:var(--s1);flex-wrap:wrap}.zoom-controls button{min-width:44px}.workspace{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--s3) var(--s3);overflow:hidden;background:var(--white)}.canvas-wrap{position:relative;min-width:0}#drawflow{position:relative;width:100%;height:500px;overflow:hidden;background-color:var(--canvas);background-image:radial-gradient(var(--grid) 1px,transparent 1px);background-size:20px 20px;touch-action:none}#drawflow.no-grid{background-image:none}.canvas-caption{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3);border-top:1px solid var(--line);font-size:var(--xs);color:var(--muted);background:var(--white)}.inspector{display:grid;grid-template-columns:1fr 1fr;gap:0;min-width:0;align-items:start;border-top:1px solid var(--line)}.inspector details{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.inspector summary{font-size:var(--sm);padding:var(--s3)}.panel{padding:0 var(--s4) var(--s4);min-width:0}.panel p{margin:var(--s3) 0}.panel .field{margin-bottom:var(--s3)}.panel button{margin-bottom:var(--s2)}.palette{display:flex;gap:var(--s1);flex-wrap:wrap}.palette span{font-size:var(--xs);padding:var(--s1) var(--s2);background:var(--light);border-radius:4px;cursor:grab}.drawflow .drawflow-node{width:var(--node-width);padding:0;border:1px solid #8ba79d;border-radius:10px;background:var(--node-bg);box-shadow:0 3px 10px #244b3610;min-height:130px}.drawflow .drawflow-node.selected{border:2px solid var(--teal);background:#f3faf6;box-shadow:0 0 0 4px #15595918}.drawflow-node .drawflow_content_node{width:100%}.node-card{padding:var(--s3) var(--s4)}.node-kind{display:block;font:700 12px/1.6 var(--font-body);color:var(--teal);margin-bottom:var(--s2);letter-spacing:.04em}.node-label{display:block;font:12px/1.4 var(--font-body);color:var(--muted);margin:var(--s2) 0}.node-label input{display:block;font:14px/1.4 var(--font-body);height:34px;min-height:34px;padding:var(--s1) var(--s2);margin-top:var(--s1);color:var(--ink);background:#fff}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{background:var(--white);border:2px solid var(--wire);width:18px;height:18px}.drawflow .drawflow-node .input{left:-10px}.drawflow .drawflow-node .output{right:-10px}.drawflow .connection .main-path{stroke:var(--wire);stroke-width:3}.drawflow .connection .main-path:hover,.drawflow .connection .main-path.selected{stroke:var(--teal);stroke-width:5}.drawflow .connection .point{fill:var(--gold);stroke:var(--deep);stroke-width:2}.drawflow .drawflow-delete{color:#fff;background:var(--error);border:0;width:32px;height:32px}.drawflow .drawflow-node.number .node-kind,.drawflow .drawflow-node.multiply .node-kind,.drawflow .drawflow-node.sum .node-kind{color:#73551f}.drawflow .drawflow-node.result .node-kind{color:#386149}.drawflow .drawflow-node.condition .node-kind{color:#805024}.drawflow .connection{max-width:none}.drawflow-node input:disabled{opacity:1;background:#eef2ef;color:#52666b}#empty{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);max-width:340px;width:80%;text-align:center;pointer-events:none;background:var(--white);padding:var(--s5);border:1px solid var(--line);border-radius:10px}#empty span{display:block;font-size:var(--sm);margin-top:var(--s2)}#ports-info{margin-top:var(--s3)}#edge-list{font-size:var(--xs);margin-top:var(--s4)}.edge-row{display:flex;gap:var(--s2);align-items:center;border-top:1px solid var(--line);padding:var(--s2) 0;overflow-wrap:anywhere}.edge-row span{flex:1;min-width:0}.edge-row button{font-size:var(--xs);padding:var(--s1) var(--s2);margin:0}#calculation{display:block;font-size:var(--sm);padding:var(--s3);margin-top:var(--s2);background:var(--light);border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}.confirm{padding:var(--s4);margin-bottom:var(--s4);background:#fff8e7;border:1px solid #d0bc8a;border-radius:8px}.export-section{border-top:1px solid var(--line);padding-top:var(--s6);margin-top:var(--s6)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}.section-heading h2{font-size:var(--lg);margin:0}.export-section>.small{margin:var(--s3) 0 var(--s5)}.code-choice{margin-top:var(--s5)}#code{background:var(--deep);color:#eff8f0;border:0;white-space:pre;overflow:auto;min-height:250px;margin-bottom:var(--s3);font-size:13px}.events{margin-top:var(--s6);border:1px solid var(--line);border-radius:10px}.events ol{padding-left:var(--s5);max-height:250px;overflow:auto;font:var(--xs)/1.7 monospace;overflow-wrap:anywhere}.lab-footer{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;border-top:1px solid var(--line);padding:var(--s5) 0;margin-top:var(--s6);font-size:var(--xs);color:var(--muted)}#copy-status{align-self:center}#import-panel{padding:var(--s4);margin:var(--s4) 0;background:var(--light);border-radius:8px}.feedback{min-height:44px}button:disabled{opacity:1;background:#edf0ed;color:#66736f;border-color:#d8e0db}body.standalone .lab{padding:var(--s5)}body.expanded{background:var(--paper)}body.expanded .lab{max-width:none;padding:var(--s3)}body.expanded .intro,body.expanded .tip,body.expanded .under,body.expanded #standalone{display:none}body.expanded .lab-head{margin-bottom:var(--s2)}body.expanded .lab-head h1{font-size:var(--lg)}body.expanded .lab-head .eyebrow{display:none}body.expanded .scenario-bar{margin-bottom:var(--s2)}body.expanded #drawflow{height:max(410px,calc(100dvh - 250px))}
@media(min-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 300px}.inspector{display:block;border-top:0;border-left:1px solid var(--line);max-height:535px;overflow:auto}body.expanded .inspector{max-height:max(445px,calc(100dvh - 215px))}body.standalone:not(.expanded) #drawflow{height:600px}body.standalone:not(.expanded) .inspector{max-height:635px}}
@media(max-width:520px){.lab-head{align-items:start;flex-direction:column}.lab-head h1{font-size:var(--lg)}.lab-head #expand{width:100%}.inspector{grid-template-columns:1fr}.toolbar{padding:var(--s2)}.zoom-controls{width:100%}.zoom-controls #fit{flex:1}#drawflow{height:410px}.canvas-caption{flex-direction:column;gap:0}.scenario-bar .field{flex-basis:100%}.section-heading .pill{display:none}body.standalone .lab{padding:var(--s3)}body.expanded .lab-head{flex-direction:row;align-items:center}body.expanded .lab-head #expand{width:auto}body.expanded .lab-head h1{font-size:var(--sm)}body.expanded #drawflow{height:440px}body.expanded .scenario-bar .field{flex:1 1 160px}body.expanded .scenario-bar #reset{font-size:var(--xs)}body.expanded .lab{padding:var(--s2)}}
.drawflow .drawflow-node .output{right:9px}
@media(min-width:521px){body.expanded #drawflow{height:max(360px,calc(100dvh - 330px))}body.expanded .inspector{max-height:max(395px,calc(100dvh - 295px))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}