/* Self-contained illustrative CraftOS Pipeline Agents editor. */
.cp-section{padding:80px 0;background:#f7f6fa;scroll-margin-top:32px;color:#19164f}
.cp-section *,.cp-section *::before,.cp-section *::after{box-sizing:border-box}
.cp-container{width:calc(100% - 64px);max-width:1280px;margin:0 auto}
.cp-heading{max-width:730px;margin-bottom:34px}
.cp-kicker{display:block;margin-bottom:13px;color:#7841bd;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cp-heading h2{margin:0;color:#19164f;font-size:clamp(30px,3.1vw,42px);font-weight:400;line-height:1.2;letter-spacing:-.04em}
.cp-heading p{margin:19px 0 0;color:#626176;font-size:14px;line-height:1.85}
.cp-app{overflow:hidden;border:1px solid #dddae4;border-radius:12px;background:#fff;box-shadow:0 20px 65px #1814480a;font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.cp-app button{font-family:inherit;cursor:pointer}
.cp-app button:focus-visible{outline:3px solid #9254df;outline-offset:4px}
.cp-app button:disabled{cursor:default}
.cp-app [hidden]{display:none!important}
.cp-appbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 20px;border-bottom:1px solid #eceaf0}
.cp-brand{display:flex;align-items:center;gap:10px;min-width:0;color:#75707d;font-size:11px}
.cp-brand>span:first-child{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#171547}
.cp-brand img{display:block;width:23px;height:23px}
.cp-brand strong{color:#25222f;font-size:15px;font-weight:600;letter-spacing:-.035em}
.cp-brand .cp-app-divider{padding:0 3px;font-size:19px;font-weight:300;color:#d1cbd8}
.cp-example-badge{flex:none;border:1px solid #e5def0;border-radius:5px;padding:4px 8px;color:#756086;background:#fbf9fe;font-size:10px}
.cp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:20px 24px;border-bottom:1px solid #e8e4ed}
.cp-folder{color:#7c6f8a;font-size:10px}
.cp-toolbar h3{margin:3px 0 0;color:#322d3c;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.025em}
.cp-toolbar p{margin:6px 0 0;color:#7b7086;font-size:11px;line-height:1.6}
.cp-test{display:flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:10px 15px;border:1px solid #1b1753;border-radius:6px;background:#1b1753;color:#fff;font-size:11px;font-weight:500;white-space:nowrap;transition:background .2s}
.cp-test:hover{background:#382271}
.cp-test:disabled{border-color:#e5dced;background:#f7f3fc;color:#806f91}
.cp-test svg{width:15px;height:15px;fill:currentColor;stroke:none}
.cp-workspace{display:grid;grid-template-columns:minmax(0,1fr) 245px;min-height:454px}
.cp-canvas{position:relative;min-width:0;padding:58px 22px 30px;background-color:#faf9fc;background-image:radial-gradient(#ddd8e5 .7px,transparent .7px);background-size:15px 15px}
.cp-canvas-label{position:absolute;top:19px;left:23px;right:23px;display:flex;align-items:center;gap:7px;color:#8a7f95;font-size:10px}
.cp-canvas-label>span:last-child{margin-left:auto;font-size:9px;color:#a198aa}
.cp-canvas-dot{width:5px;height:5px;border-radius:50%;background:#ad95c8}
.cp-flow{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"one two three" "six five four";grid-template-rows:repeat(2,minmax(153px,auto));gap:60px 38px;margin:0;padding:0;list-style:none}
.cp-node{position:relative;min-width:0;min-height:153px;padding:15px 13px 13px;border:1px solid #ddd7e6;border-radius:9px;background:#fff;box-shadow:0 3px 7px #29203604;transition:box-shadow .3s,border-color .3s,background .3s}
.cp-node[data-node="0"]{grid-area:one}.cp-node[data-node="1"]{grid-area:two}.cp-node[data-node="2"]{grid-area:three}.cp-node[data-node="3"]{grid-area:four}.cp-node[data-node="4"]{grid-area:five}.cp-node[data-node="5"]{grid-area:six}
.cp-node-number{display:block;color:#7f6e87;font-size:8px;font-weight:600;letter-spacing:.035em;text-transform:uppercase;line-height:1.4}
.cp-node-heading{display:flex;align-items:center;gap:8px;min-width:0;margin-top:12px}
.cp-icon{display:grid;place-items:center;width:29px;height:29px;flex:none;color:#765396}
.cp-icon>img,.cp-icon>svg{width:25px;height:25px;object-fit:contain}
.cp-icon>svg{fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.cp-node-heading strong{color:#45404b;font-size:12px;font-weight:600;line-height:1.4}
.cp-node p{margin:9px 0 11px;color:#7b6f85;font-size:10px;line-height:1.5;min-height:30px}
.cp-node-status{display:flex;align-items:center;gap:5px;border-top:1px solid #eeeaf2;padding-top:9px;color:#7f6e88;font-size:9px;line-height:1.4}
.cp-node-status::before{content:"";width:5px;height:5px;border:1px solid #b8a8c2;border-radius:50%;flex:none}
.cp-node[data-state="active"]{border-color:#9155d0;box-shadow:0 0 0 3px #a064d916,0 7px 20px #5a347612}
.cp-node[data-state="active"] .cp-node-status{color:#8443be}
.cp-node[data-state="active"] .cp-node-status::before{background:#8747c3;border-color:#8747c3;animation:cp-node-pulse 1.2s ease-in-out infinite}
.cp-node[data-state="done"]{border-color:#adcdbb}
.cp-node[data-state="done"] .cp-node-status{color:#3e7b58}
.cp-node[data-state="done"] .cp-node-status::before{content:"✓";display:grid;place-items:center;width:11px;height:11px;border:none;color:#3e7b58;font-size:10px;font-weight:700}
.cp-node[data-state="waiting"]{border-color:#c9a448;background:#fffef5;box-shadow:0 0 0 3px #f0d67623}
.cp-node[data-state="waiting"] .cp-node-status{color:#97731d}
.cp-node[data-state="waiting"] .cp-node-status::before{background:#c9a448;border-color:#c9a448}
.cp-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cp-connections path{fill:none;stroke:#cfc2de;stroke-width:1.5;vector-effect:non-scaling-stroke}
.cp-connections path[data-state="active"]{stroke:#9956cf;stroke-dasharray:5 6;stroke-width:2;animation:cp-flow-motion .7s linear infinite}
.cp-connections path[data-state="done"]{stroke:#8cb69f}
.cp-inspector{display:flex;flex-direction:column;gap:22px;min-width:0;padding:21px 20px;border-left:1px solid #e7e3eb;background:#fff}
.cp-inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#7d6e89;font-size:8px;letter-spacing:.07em;font-weight:600}
.cp-run-state{color:#71677c;font-size:9px;font-weight:400;letter-spacing:0;background:#f5f3f8;padding:3px 6px;border-radius:4px;white-space:nowrap}
.cp-app[data-state="running"] .cp-run-state{color:#8443be;background:#f6effc}
.cp-app[data-state="waiting"] .cp-run-state{color:#93701d;background:#fff8df}
.cp-app[data-state="complete"] .cp-run-state{color:#317348;background:#edf7ef}
.cp-result-step{display:block;color:#87679f;font-size:8px;font-weight:600;letter-spacing:.07em}
.cp-inspector h4{margin:10px 0;color:#41364f;font-size:17px;line-height:1.35;font-weight:500;letter-spacing:-.03em}
.cp-inspector p{margin:0;color:#7d6f88;font-size:11px;line-height:1.75}
.cp-result-data{margin:19px 0 0;padding:11px 12px;border:1px solid #e9e3ef;border-radius:6px;background:#fcfafc}
.cp-result-data>div+div{margin-top:11px}
.cp-result-data dt{color:#7a6d84;font-size:9px;line-height:1.4}
.cp-result-data dd{margin:3px 0 0;color:#695871;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.cp-approval-panel{padding:12px;border:1px solid #e8d59e;border-radius:7px;background:#fffdf1}
.cp-approval-panel>span{display:block;margin-bottom:6px;color:#92711a;font-size:8px;letter-spacing:.07em;font-weight:700}
.cp-approval-panel p{color:#8a743e;font-size:10px;line-height:1.7}
.cp-approval-panel button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:11px;padding:8px 10px;border:1px solid #d7bf5a;border-radius:4px;background:#ece438;color:#4c431d;font-size:10px;font-weight:600}
.cp-approval-panel button:hover{background:#f1ea55}
.cp-result-note{display:flex;align-items:flex-start;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid #eee9f2;color:#7d6f86;font-size:9px;line-height:1.65}
.cp-result-note svg{width:16px;height:18px;flex:none;fill:none;stroke:#9677ad;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cp-library{display:flex;align-items:center;gap:20px;padding:17px 23px;border-top:1px solid #e7e2ec;background:#fff}
.cp-library>span{flex:none;font-size:10px;color:#7e6e8b}
.cp-library ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.cp-library li{padding:4px 8px;border:1px solid #e5ddec;border-radius:4px;background:#fbf9fd;color:#7e688e;font-size:9px;line-height:1.4}
.cp-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 23px;border-top:1px solid #ede8f2;background:#fcfbfe;color:#796d83;font-size:9px;line-height:1.6}
.cp-footer>span:first-child{display:flex;align-items:center;gap:7px}
.cp-footer i{display:block;width:4px;height:4px;background:#a389b8;border-radius:50%;flex:none}
.cp-app[data-visibility="hidden"] *{animation-play-state:paused!important}
@keyframes cp-flow-motion{to{stroke-dashoffset:-22}}
@keyframes cp-node-pulse{50%{opacity:.4;box-shadow:0 0 0 4px #aa7bd121}}
@media(max-width:1180px){.cp-workspace{grid-template-columns:minmax(0,1fr) 215px}.cp-flow{gap:60px 25px}.cp-node{padding-inline:11px}.cp-inspector{padding-inline:16px}.cp-node-heading{gap:5px}.cp-node-heading strong{font-size:11px}}
@media(max-width:980px){.cp-workspace{grid-template-columns:1fr}.cp-inspector{border-left:0;border-top:1px solid #e7e3eb;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px 26px;padding:22px}.cp-inspector-heading{grid-column:1/-1}.cp-result-note{align-self:end;grid-column:2}.cp-inspector-content{grid-column:1;grid-row:2/4}.cp-approval-panel{grid-column:2;grid-row:2}.cp-flow{gap:60px 42px}.cp-canvas{padding-bottom:32px}.cp-result-data{display:flex;flex-wrap:wrap;gap:15px;margin-top:13px;padding:12px}.cp-result-data>div+div{margin-top:0}.cp-inspector h4{margin-top:6px}.cp-library{align-items:flex-start;gap:15px}.cp-library>span{padding-top:4px}}
@media(max-width:640px){.cp-section{padding:60px 0}.cp-container{width:calc(100% - 36px)}.cp-heading{margin-bottom:26px}.cp-heading h2{font-size:30px}.cp-appbar{padding:12px 15px;gap:9px;flex-wrap:wrap}.cp-brand{gap:8px}.cp-example-badge{font-size:8px}.cp-toolbar{padding:17px;align-items:flex-start;gap:16px;flex-direction:column}.cp-toolbar h3{font-size:16px}.cp-test{align-self:flex-start;min-height:39px;font-size:11px}.cp-canvas{padding:57px 25px 25px}.cp-canvas-label{left:18px;right:18px;font-size:9px}.cp-canvas-label>span:last-child{font-size:8px}.cp-flow{grid-template-columns:1fr;grid-template-rows:repeat(6,minmax(0,auto));grid-template-areas:"one" "two" "three" "four" "five" "six";gap:28px;max-width:380px;margin-inline:auto}.cp-node{min-height:0;padding:12px 15px}.cp-node-heading{gap:10px;margin-top:7px}.cp-node-heading strong{font-size:13px}.cp-node p{min-height:0;margin:6px 0 8px;font-size:11px}.cp-node-status{padding-top:7px;font-size:10px}.cp-node-number{font-size:9px}.cp-inspector{grid-template-columns:1fr;padding:20px;gap:18px}.cp-inspector-content,.cp-result-note,.cp-approval-panel{grid-column:auto;grid-row:auto}.cp-result-data{gap:18px 24px}.cp-inspector h4{font-size:20px}.cp-inspector p{font-size:12px}.cp-approval-panel button{padding:11px;font-size:12px}.cp-approval-panel p{font-size:12px}.cp-library{padding:16px;flex-direction:column;gap:10px}.cp-library li{font-size:10px;padding:5px 8px}.cp-footer{padding:12px 16px;flex-direction:column;gap:3px;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.cp-app *,.cp-app *::before,.cp-app *::after{animation:none!important;transition:none!important}}