.vde-builder-demo{padding:72px max(24px,calc((100vw - 1320px)/2)) 104px;background:#f3f6fa;color:#0d1d30}.vde-builder-demo>header{display:block;width:min(1320px,100%);margin:0 auto 30px}.vde-builder-demo>header p{display:none}.vde-builder-demo>header h2{margin:0;font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.04em}.vde-builder-demo>header>span{display:block;margin-top:12px;color:#65758a;font-size:19px;line-height:1.7}
.vde-tutorial-frame{position:relative;width:min(1320px,100%);margin:0 auto;overflow:hidden;border:1px solid #101317;background:#16181b;box-shadow:0 28px 72px rgba(20,42,65,.2);font-family:"Microsoft YaHei UI","Segoe UI",sans-serif;color:#eef1f4}.vde-app-bar{display:flex;align-items:center;gap:13px;height:42px;padding:0 10px;border-bottom:1px solid #3c4044;background:#202224;color:#e9ecef;font-size:16px;white-space:nowrap}.vde-app-brand{display:flex;align-items:center;gap:8px}.vde-app-brand i{display:grid;width:26px;height:26px;place-items:center;border:1px solid #b62d24;color:#f2f4f6;font-size:18px;font-style:normal;font-weight:850}.vde-app-brand b{color:#ef241c;font-size:23px}.vde-app-brand em{color:#090b0d;font-size:21px;font-style:italic;font-weight:900;text-shadow:0 0 1px #aeb4bb}.vde-app-menu{color:#d7dbdf}.vde-app-search{color:#868d94}.vde-app-file{flex:1;min-width:0;overflow:hidden;color:#dfe4e8;text-overflow:ellipsis}.vde-window-controls{color:#c5cbd1;letter-spacing:14px}
.vde-command-bar{display:flex;align-items:center;gap:18px;height:44px;padding:0 16px;border-bottom:1px solid #303438;background:#202224}.vde-run-button{position:relative;display:grid;width:28px;height:28px;place-items:center;border:0;background:transparent;color:#f28b00;font-size:27px;cursor:pointer}.vde-run-button:disabled{color:#5b4b35;cursor:not-allowed}.vde-command-icon{color:#999fa5;font-size:24px}.vde-command-name{display:flex;align-items:center;gap:8px;margin-left:18px;color:#b8bec5;font-size:16px}.vde-command-name i{color:#4fa5dc;font-style:normal}
.vde-tutorial-workbench{display:grid;grid-template-columns:27.5% 24.5% 48%;min-height:650px;background:#141618}.vde-tutorial-toolbox,.vde-tutorial-flow,.vde-tutorial-result{min-width:0}.vde-tutorial-toolbox{border-right:1px solid #3a3e43;background:#1f2123}.vde-panel-title{display:flex;align-items:center;height:35px;padding:0 8px;border-bottom:1px solid #32363a;color:#e4e8eb;font-size:16px}.vde-panel-title b{align-self:stretch;display:flex;align-items:center;padding:0 7px;border-bottom:2px solid #139ee8;font-weight:500}.vde-panel-title span{margin-left:auto;color:#747b82}.vde-tool-tabs{display:flex;align-items:center;gap:6px;padding:9px 6px}.vde-tool-tabs span{display:grid;width:46px;height:34px;place-items:center;background:#3c3f43;color:#b6bdc3;font-size:16px}.vde-tool-tabs span:first-child{background:#326da9;color:#f7f9fb}.vde-tool-search{height:30px;margin:0 6px 7px;padding:3px 9px;background:#404346;color:#abb2b8;text-align:right}.vde-tool-category{display:flex;align-items:center;height:31px;padding:0 9px;background:#414446;color:#d9dde0;font-size:16px}.vde-tool-category span{margin-right:8px;color:#aeb5bb}.vde-tool-category.is-collapsed{margin-top:6px}.vde-tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}.vde-tool{position:relative;display:flex;min-height:82px;flex-direction:column;align-items:center;justify-content:center;border:1px solid transparent;background:#292c2f;color:#eef2f5;font:500 13px/1.2 inherit;user-select:none}.vde-tool b{font-weight:500}.vde-tool-icon{display:block;width:48px;height:42px;margin-bottom:3px}.vde-tool-icon svg{width:48px;height:42px;overflow:visible;fill:none;stroke:#92999f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.vde-tool-icon svg .blue{stroke:#1696ec}.vde-tool-icon svg .blue-fill{fill:#1696ec;stroke:none}button.vde-tool{cursor:grab}button.vde-tool:active{cursor:grabbing}.vde-tool[aria-disabled="true"]{opacity:.34;cursor:not-allowed}.vde-tool.is-next{border-color:#159ee8;background:#2b343c;box-shadow:inset 0 0 0 1px rgba(21,158,232,.28)}.vde-tool.is-dragging{opacity:.38}
.vde-tutorial-flow{position:relative;border-right:1px solid #44484d;background:#111315}.vde-flow-toolbar{display:flex;align-items:center;gap:20px;height:42px;padding:0 12px;border-bottom:1px solid #303438;background:#292c2f;color:#797f85}.vde-flow-toolbar b{color:#00a2ed;font-size:21px}.vde-flow-toolbar span{font-size:20px}.vde-block-header{display:flex;align-items:center;height:42px;margin:7px 9px 0;padding:0 10px;border-radius:2px;background:#303336;color:#f6f7f8;font-size:16px}.vde-block-header i{margin-right:7px;color:#41cf8e;font-size:22px;font-style:normal}.vde-block-header.output i{color:#9b6cff}.vde-block-header span{margin-left:auto;width:14px;height:14px;border:2px solid #454b50;border-radius:50%}.vde-node-zone{position:relative;height:490px;padding:12px 18px;overflow:hidden}.vde-node-placeholder{display:grid;height:100%;place-items:center;color:#6f767c;text-align:center}.vde-node-placeholder[hidden],.vde-drop-preview[hidden]{display:none}.vde-node-placeholder strong{display:block;margin-bottom:8px;color:#949ba1;font-size:18px}.vde-node-placeholder small{display:block;font-size:14px}.vde-drop-preview{position:absolute;z-index:4;top:14px;right:18px;left:18px;height:82px;padding:14px;border:1px dashed #29aaf2;background:rgba(41,170,242,.09);color:#9ad9fc;font-size:16px}.vde-node-list{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}.vde-node{position:relative;overflow:visible;border:1px solid transparent;border-radius:3px;background:#292c2f}.vde-node.is-new{animation:vde-node-in .22s cubic-bezier(.2,.8,.25,1) both}.vde-node.is-linked{border-color:#829d19;box-shadow:0 0 0 1px #829d19}.vde-node header{display:flex;align-items:center;min-height:34px;padding:0 8px;border-radius:3px 3px 0 0;background:#3a3d41}.vde-node.blob header{background:#334c91}.vde-node header i{margin-right:7px;color:#1399e6;font-style:normal}.vde-node header b{color:#f6f7f8;font-size:17px}.vde-node header span{margin-left:auto;color:#50d18f}.vde-node-ports{padding:5px 9px 8px}.vde-port{display:flex;min-height:24px;align-items:center;border:0;background:transparent;font:500 12px/1.2 inherit}.vde-input{justify-content:flex-start;color:#18b6ef}.vde-input i{margin-right:6px;font-size:17px;font-style:normal}.vde-output{justify-content:flex-end;width:100%;color:#ff65c8;cursor:crosshair}.vde-output i{margin-left:5px;font-size:17px;font-style:normal}.vde-output.is-next,.vde-input.is-next{filter:brightness(1.18)}.vde-input.is-target{color:#f5d64d;background:rgba(245,214,77,.09)}.vde-port.is-connected i{color:#74ce61}.vde-blob-outputs{display:grid;justify-items:end;gap:4px;color:#ff65c8;font-size:13px}.vde-wires{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}.vde-wires path{fill:none;stroke:#f16abb;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.vde-wires marker path{fill:#f16abb;stroke:none}.vde-wires path.preview{stroke:#66cfff;stroke-width:1.6;stroke-dasharray:5 4}.vde-wires path.connected{filter:drop-shadow(0 0 1px rgba(241,106,187,.35))}.vde-flow-bottom{position:absolute;right:0;bottom:0;left:0}.vde-flow-status{display:flex;align-items:center;height:24px;padding:0 9px;background:#eef1f3;color:#6f777e;font-size:13px}.vde-flow-status b{margin-left:auto;color:#3fba76}
.vde-tutorial-result{display:flex;flex-direction:column;background:#1a1c1e}.vde-result-title{display:flex;align-items:center;height:43px;padding:0 8px;border-bottom:1px solid #303438;background:#111315;color:#eef1f4;font-size:16px}.vde-result-title span{margin-left:auto;color:#858c92}.vde-result-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#16181a}.vde-result-empty{position:absolute;inset:0;display:grid;place-items:center;color:#5f666c;font-size:15px}.vde-result-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;background:#090b0d;transform:scale(.992);transition:opacity .26s ease,transform .26s ease}.vde-result-stage.is-complete .vde-result-image{opacity:1;transform:none}.vde-result-stage.is-complete .vde-result-empty{display:none}.vde-result-footer{display:flex;align-items:center;height:28px;padding:0 8px;border-top:1px solid #111315;background:#050607;color:#f3f5f7;font-size:14px}.vde-result-footer b{margin-right:18px}.vde-result-footer span{flex:1;border-left:3px solid #079ce6;padding-left:8px}.vde-result-status{display:flex;justify-content:flex-end;gap:12px;height:23px;align-items:center;padding:0 8px;border-top:1px solid #33373b;color:#d7dce0;font-size:13px}
.vde-guide{position:absolute;inset:0;z-index:20;pointer-events:none}.vde-guide-backdrop{position:absolute;inset:0;background:rgba(5,9,13,.56);transition:background .2s ease}.vde-guide-card{position:absolute;top:136px;left:29%;width:268px;padding:18px 20px;border:1px solid rgba(15,35,54,.16);border-radius:8px;background:#f7f9fb;color:#13263a;box-shadow:0 18px 48px rgba(2,8,15,.36);transition:transform .22s ease,opacity .22s ease}.vde-guide-card:before{position:absolute;top:32px;left:-9px;width:16px;height:16px;border-bottom:1px solid rgba(15,35,54,.16);border-left:1px solid rgba(15,35,54,.16);background:#f7f9fb;content:"";transform:rotate(45deg)}.vde-guide-card small{display:block;margin-bottom:8px;color:#168fd9;font-size:14px;font-weight:700}.vde-guide-card strong{display:block;color:#11283f;font-size:21px}.vde-guide-card p{margin:9px 0 10px;color:#4f6172;font-size:16px;line-height:1.65}.vde-guide-card span{color:#8996a2;font-size:13px}.vde-guide[data-step="connect"] .vde-guide-card{top:205px;right:24px;left:auto}.vde-guide[data-step="connect"] .vde-guide-card:before{right:-9px;left:auto;transform:rotate(225deg)}.vde-guide[data-step="run"] .vde-guide-card{top:92px;right:24px;left:auto}.vde-guide[data-step="run"] .vde-guide-card:before{display:none}.vde-guide[data-step="done"] .vde-guide-card{top:104px;left:24px}.vde-guide[data-step="done"] .vde-guide-card:before{display:none}.vde-guide.is-error .vde-guide-card{border-color:#d96369}.vde-guide.is-error .vde-guide-card small{color:#cb3b45}.vde-guide.is-done .vde-guide-card{border-color:#4dbb85}.vde-guide.is-done .vde-guide-card small{color:#258c5e}.is-guide-focus{z-index:24!important;opacity:1!important;outline:2px solid #27a9ef!important;outline-offset:3px;box-shadow:0 0 0 7px rgba(39,169,239,.18)!important}.vde-node-list.is-guide-focus{outline:0!important;box-shadow:none!important}.vde-result-stage.is-guide-focus{position:relative}
.vde-drop-active{box-shadow:inset 0 0 0 2px #159ee8}.vde-running .vde-run-button{animation:vde-run-pulse .55s ease-in-out infinite alternate}.vde-drag-ghost{position:fixed;top:0;left:0;z-index:9999;width:92px;min-height:72px;opacity:.9;pointer-events:none;box-shadow:0 10px 28px rgba(0,0,0,.42);will-change:transform}.vde-drag-ghost[aria-disabled="true"]{opacity:.9}.vde-drag-ghost .vde-tool-icon{transform:scale(.82)}
@keyframes vde-node-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@keyframes vde-run-pulse{to{transform:scale(1.14)}}
@media(max-width:860px){.vde-builder-demo{padding:64px 16px 80px}.vde-tutorial-scroll{overflow-x:auto;border:1px solid #101317}.vde-tutorial-frame{width:980px;border:0;box-shadow:none}.vde-guide{position:absolute;width:980px}.vde-guide-card{left:286px}}
@media(prefers-reduced-motion:reduce){.vde-node.is-new,.vde-running .vde-run-button{animation:none}.vde-result-image,.vde-guide-card,.vde-guide-backdrop{transition:none}}
.vde-app-brand em{color:#f4f6f8;text-shadow:none}
.vde-app-icon{display:block;width:26px;height:26px;flex:0 0 26px;object-fit:contain;border:0;border-radius:4px}
.vde-run-button{padding:0;transform:none}
.vde-run-button:before,.vde-run-glyph{display:block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid currentColor;content:"";transform:translateX(2px)}
.vde-run-button:has(.vde-run-glyph):before{display:none}
.vde-run-button:disabled{color:#f28b00;opacity:.48}
.vde-tutorial-frame[data-step="run"] .vde-command-bar{position:relative;z-index:22}
.vde-tutorial-frame[data-step="run"] .vde-run-button{z-index:24;color:#f28b00;opacity:1}
.vde-guide[data-step="done"] [data-guide-note]{display:none}
.vde-output.is-connected i{color:#74ce61}
.vde-input.is-connected i{color:#18b6ef}

/* VDE-style port anchors and orthogonal data connection. */
.vde-node.is-linked{border-color:#e2cf00;box-shadow:0 0 0 1px #e2cf00}
.vde-port-anchor{position:relative;display:block;width:13px;height:10px;flex:0 0 13px;font-size:0!important;font-style:normal;color:#18b6ef}
.vde-port-anchor:before{position:absolute;top:4px;left:0;width:9px;height:2px;background:currentColor;content:""}
.vde-port-anchor:after{position:absolute;top:2px;right:0;width:5px;height:5px;border-top:2px solid currentColor;border-right:2px solid currentColor;content:"";transform:rotate(45deg)}
.vde-input .vde-port-anchor{margin:0 6px 0 0;color:#18b6ef;transform:none}
.vde-output .vde-port-anchor{margin:0 0 0 5px;color:#ff65c8}
.vde-output.is-connected .vde-port-anchor{color:#74ce61}
.vde-input.is-connected .vde-port-anchor{color:#18b6ef}
.vde-wires path{stroke:#f2d600;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke;filter:none}
.vde-wires path.preview{stroke:#f2d600;stroke-width:1.5;stroke-dasharray:none;opacity:.86;filter:none}
.vde-wires path.connected{filter:none}
.vde-wires{z-index:1}

.vde-guide[data-step="image"] .vde-guide-card{top:438px;left:16px}
.vde-guide[data-step="blob"] .vde-guide-card{top:505px;left:16px}
.vde-guide-card:before{display:none}

/* Decorative drag demonstration; real pointer input always passes through. */
.vde-motion-hint{position:absolute;inset:0;z-index:26;overflow:hidden;pointer-events:none!important;opacity:0}
.vde-motion-hint.is-visible{opacity:1}
.vde-motion-hint *{pointer-events:none!important}
.vde-hint-trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vde-hint-trail path{fill:none;stroke:#83d6ff;stroke-width:1.5;stroke-dasharray:4 7;stroke-linecap:round;opacity:0}
.vde-hint-pointer{position:absolute;top:0;left:0;width:28px;height:34px;opacity:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));will-change:transform}
.vde-hint-pointer>svg{position:relative;display:block;width:28px;height:34px;overflow:visible;fill:#fff;stroke:#19415b;stroke-width:1.5;stroke-linejoin:round}
.vde-hint-carry{position:absolute;left:20px;top:24px;display:grid;width:48px;height:42px;place-items:center;border:1px solid #54bff2;border-radius:7px;background:rgba(30,51,66,.9);opacity:0}
.vde-hint-carry svg{width:34px;height:30px;fill:none;stroke:#c3eaff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.vde-hint-carry .blue-fill{fill:#54c6ff;stroke:none}
.vde-hint-ring{position:absolute;top:-17px;left:-17px;width:34px;height:34px;box-sizing:border-box;border:2px solid #70cfff;border-radius:50%;background:rgba(65,183,244,.12);opacity:0}
@media(prefers-reduced-motion:reduce){.vde-motion-hint{display:none}}