:root{color-scheme:light}
html,body{margin:0;height:100%;overflow:hidden}
#canvas-workbench{--paper:#fff;--ink:#252628;--muted:#909195;--line:#e8e8eb;--board:#f7f7f8;--soft:#f3f3f5;--blue:#007aff;height:100%;overflow:hidden;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;font-size:13px;position:relative}
#canvas-workbench *{box-sizing:border-box}#canvas-workbench [hidden]{display:none!important}
#canvas-workbench button{font:inherit;font-size:12px;border:0;background:transparent;color:inherit;border-radius:7px;min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:5px 8px;cursor:pointer;transition:background .15s,color .15s}
#canvas-workbench button:hover{background:var(--soft)}#canvas-workbench button:disabled{opacity:.3;cursor:default}
#canvas-workbench :focus-visible{outline:2px solid #007aff80;outline-offset:3px}
#canvas-workbench svg:not(.cw-edges){width:16px;height:16px;stroke-width:1.6;flex-shrink:0}#canvas-workbench small{font-size:11px;color:var(--muted)}
.cw-header{position:absolute;inset:0 0 auto;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:20px;pointer-events:none;z-index:32}
.cw-brand,.cw-header-actions{display:flex;align-items:center;gap:8px;pointer-events:auto;background:#ffffffed;border:1px solid #e6e6e9b3;border-radius:12px;box-shadow:0 2px 6px #17192303;backdrop-filter:blur(16px)}
.cw-brand{height:42px;padding:0 14px;gap:12px}.cw-brand strong{font-size:13px;font-weight:600;letter-spacing:2px}.cw-brand>span{width:1px;height:14px;background:#dddde2}
.cw-brand input{width:130px;min-width:60px;border:0;color:var(--ink);background:transparent;font:inherit;font-size:12px;text-overflow:ellipsis;padding:4px 0}
.cw-save{margin-left:8px;font-size:10px!important;color:#929499!important;white-space:nowrap}
.cw-header-actions{padding:4px;gap:3px}.cw-header-actions button{height:32px;padding:5px 12px!important;font-size:12px!important}.cw-header-actions button[aria-label]{width:32px;padding:5px!important}
.cw-header-actions [data-action="redo"]{margin-right:8px;position:relative}.cw-header-actions [data-action="redo"]:after{content:'';position:absolute;right:-6px;height:14px;width:1px;background:var(--line)}
.cw-board{height:100dvh;position:relative;background:var(--board);overflow:hidden;touch-action:none;outline:none!important;isolation:isolate}
.cw-board:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#c5c6cc .55px,transparent .55px);background-size:24px 24px;opacity:.32;pointer-events:none}
.cw-board.is-hand,.cw-board.is-hand .cw-node-content{cursor:grab}.cw-board.is-dragging,.cw-board.is-dragging *{cursor:grabbing!important}
.cw-world{position:absolute;inset:0;transform-origin:0 0}.cw-edges{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.cw-edges path{fill:none;stroke:#b9bbc3;stroke-width:1.3;pointer-events:stroke;cursor:pointer}.cw-edges path.chosen{stroke:var(--blue);stroke-width:2}
.cw-node{position:absolute;width:240px;touch-action:none;user-select:none}
.cw-node-head{height:30px;display:flex;align-items:center;gap:6px;color:#929499;font-size:11px;cursor:grab;padding:0 3px}.cw-node-head svg{width:13px!important;height:13px!important;opacity:.8}
.cw-node-head>span{max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cw-node-head small{margin-left:auto;font-size:10px!important}.cw-node.selected .cw-node-head{color:#57595e}
.cw-node-content{position:relative;border:1px solid #e2e3e7;border-radius:13px;background:var(--paper);min-height:150px;box-shadow:0 2px 3px #17192302,0 8px 24px #17192303;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;overflow:hidden;cursor:grab!important;transition:box-shadow .15s,border-color .15s}
.cw-node:hover .cw-node-content{border-color:#c9cbd2;box-shadow:0 4px 20px #17192307}
.cw-node.selected .cw-node-content{border-color:var(--blue);outline:1px solid var(--blue);outline-offset:0;box-shadow:0 0 0 4px #007aff08}
.cw-node-content>svg{width:25px!important;height:25px!important;color:#b8bac2;stroke-width:1.3!important}.cw-node-content>span{font-size:11px;color:#a0a2a9;padding:0 16px;text-align:center;line-height:1.6}
.cw-node-content p{padding:20px;margin:0;width:100%;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;max-height:200px;overflow:hidden}
.cw-node[data-type="note"] .cw-node-content{background:#fffdf4;border-color:#ece7d4;align-items:flex-start}
.cw-node-content img,.cw-node-content video{width:100%;max-height:200px;object-fit:contain;display:block}.cw-node-content img{-webkit-user-drag:none}.cw-node-content audio{width:100%;padding:12px}
.cw-port{position:absolute;top:94px;width:20px;min-height:20px!important;padding:0!important;border-radius:50%!important;border:1px solid #dfe0e5!important;background:var(--paper)!important;opacity:0;color:#8e919b!important;transition:opacity .15s!important}
.cw-node:hover .cw-port,.cw-node.selected .cw-port,.cw-board.linking .cw-port{opacity:1}.cw-port[data-port="in"]{left:-10px}.cw-port[data-port="out"]{right:-10px}
.cw-node-status{font-size:10px;color:var(--muted);margin-top:9px;display:flex;justify-content:space-between;padding:0 3px;gap:8px}.cw-node-status>span{max-width:175px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-node-status button{font-size:10px!important;min-height:18px!important;padding:0!important;color:#868991!important}.cw-node.busy .cw-node-content{background:#fafafa}.cw-node.busy .cw-node-content>svg{animation:cw-spin 1.5s linear infinite}@keyframes cw-spin{to{transform:rotate(360deg)}}
.cw-empty{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--muted);pointer-events:none;white-space:nowrap}
.cw-empty-symbol{width:54px;height:54px;border:1px solid #e5e5e9;border-radius:16px;display:grid;place-items:center;background:#ffffffa8;box-shadow:0 4px 12px #17192303;margin-bottom:6px}
.cw-empty-symbol svg{width:23px!important;height:23px!important;stroke:#b1b3bb}.cw-empty strong{font-weight:400;font-size:14px;color:#777b83;letter-spacing:.5px}.cw-empty>span{font-size:11px;color:#a7a9b0}
.cw-composer{position:absolute;width:360px;background:#fffffff7;border:1px solid #e0e1e6;border-radius:14px;padding:10px 13px;box-shadow:0 4px 8px #17192303,0 14px 40px #17192308;backdrop-filter:blur(16px);z-index:12}
.cw-compose-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#a0a2aa;padding-bottom:5px;gap:10px}.cw-compose-title{max-width:210px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:text}
.cw-compose-head>div{display:flex;gap:4px}.cw-compose-head button{min-height:22px!important;padding:4px!important;color:#9b9da4!important}.cw-compose-head svg{width:12px!important;height:12px!important}
.cw-refbar{display:flex;align-items:center;gap:6px;margin:0 -3px}.cw-refbar button{font-size:10px!important;color:#8a8d95!important;padding:4px!important;min-height:25px!important}.cw-refbar svg{width:12px!important;height:12px!important}.cw-refbar small{margin-left:auto;font-size:10px!important;color:#b1b3b9!important}
.cw-prompt{display:block;width:100%;height:66px;resize:none;max-height:120px;border:0;background:transparent;color:var(--ink);padding:11px 0;font:inherit;font-size:12px;line-height:1.7;outline:none!important}.cw-prompt::placeholder{color:#acaeb5}
.cw-bottom{display:flex;align-items:center;gap:7px;padding-top:5px;margin-top:3px;border-top:1px solid #f0f0f2}.cw-bottom>button{font-size:10px!important;padding:4px 2px!important;white-space:nowrap;color:#666a73!important;gap:4px}
.cw-flex{flex:1}.cw-estimate{font-size:9px!important;white-space:nowrap;color:#a9abb3!important;max-width:80px;overflow:hidden;text-overflow:ellipsis}
.cw-bottom .cw-generate{height:28px;width:28px;min-height:28px;flex-shrink:0;background:#292b30!important;color:#fff!important;border-radius:8px;padding:0!important}.cw-bottom .cw-generate:disabled{opacity:.22}
.cw-inputs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:3px}.cw-inputs:empty{display:none}.cw-input-tag{font-size:10px;border-radius:5px;background:#f2f4f7;color:#7b818d;padding:4px 6px;display:flex;align-items:center;gap:7px}.cw-input-tag button{min-height:12px!important;font-size:11px!important;padding:0!important;opacity:.6}
.cw-media-settings{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}.cw-audio-help{font-size:11px;color:var(--muted);padding:12px 0;line-height:1.8}
.cw-menu,.cw-context{position:absolute;width:188px;background:#fffffffa;padding:6px;border:1px solid #dedfe5;border-radius:11px;box-shadow:0 6px 12px #17192306,0 16px 48px #17192310;backdrop-filter:blur(20px);z-index:50}
.cw-menu small{display:block;margin:6px 9px;font-size:10px!important;color:#a6a8b0!important}
#canvas-workbench .cw-menu button,#canvas-workbench .cw-context button{display:flex;width:100%;justify-content:flex-start;padding:7px 9px;gap:10px;font-size:12px;min-height:33px;border-radius:6px;text-align:left}
.cw-menu button svg,.cw-context button svg{width:14px!important;height:14px!important;color:#8d9099}.cw-context button small{margin-left:auto;font-size:10px!important;color:#b3b5bc!important}
.cw-context hr{border:0;border-top:1px solid #ededf0;margin:5px 3px}#canvas-workbench .cw-context button.danger{color:#d54d49}.cw-context button.danger svg{color:inherit}#canvas-workbench .cw-context button.danger:hover{background:#fff0ef}.cw-context button:focus-visible{outline:none!important;background:#f0f3f9}
.cw-dock{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:#ffffffee;border:1px solid #e1e2e8;border-radius:14px;padding:6px;z-index:20;box-shadow:0 2px 6px #17192304,0 8px 24px #17192307;backdrop-filter:blur(16px)}
.cw-dock button{width:34px;height:34px;padding:0!important;border-radius:9px!important;color:#82858e!important}.cw-dock>span{width:1px;height:18px;background:var(--line);margin:0 4px}
.cw-dock .active{color:#292b30!important;background:#ededf1!important}.cw-dock [data-action="add"]{color:#fff!important;background:#292b30!important}.cw-dock [data-action="add"]:hover{background:#44474d!important}
.cw-zoom{position:absolute;left:24px;bottom:27px;height:36px;display:flex;gap:2px;align-items:center;color:#8e919a;font-size:10px;z-index:20;background:#ffffffc9;border:1px solid #e9e9ed;border-radius:9px;padding:2px 4px;backdrop-filter:blur(16px)}
.cw-zoom button{width:26px;min-height:26px!important;padding:0!important;color:#9c9fa8!important}.cw-zoom span{min-width:36px;text-align:center;font-size:10px}.cw-zoom [data-action="fit"]{margin-left:5px}.cw-zoom [data-action="fit"] svg{width:14px!important;height:14px!important}
.cw-message{position:absolute;left:10px;right:10px;bottom:86px;text-align:center;font-size:11px;color:#858992;pointer-events:none;z-index:25}.cw-selection{position:absolute;top:86px;left:25px;font-size:11px;color:#7c879b;z-index:15}
.cw-drawer{position:absolute;right:24px;top:78px;bottom:86px;width:290px;border-radius:14px;border:1px solid #e2e3e8;background:#fffffff7;box-shadow:0 12px 45px #1719230b;backdrop-filter:blur(20px);padding:18px;z-index:24;overflow:auto}
.cw-drawer>header{display:flex;justify-content:space-between;align-items:center;font-size:12px}.cw-drawer>header b{font-weight:500}.cw-drawer>header button{color:#a0a2aa!important;padding:0!important;width:26px}
.cw-record{border-top:1px solid #efeff2;padding:14px 0;margin-top:10px}.cw-record p{font-size:11px;line-height:1.8;overflow-wrap:anywhere;margin:8px 0;color:var(--muted)}.cw-record b{font-size:12px;font-weight:500}.cw-record button{color:#6e7d96!important;font-size:11px!important;padding-left:0!important}.cw-record small{display:block;font-size:10px!important;line-height:1.8}.cw-record img{max-width:100%;height:70px;object-fit:contain}.cw-help{font-size:11px;line-height:2;color:var(--muted)}
.cw-login{position:absolute;inset:0;background:var(--board);display:grid;place-items:center;z-index:100}.cw-login form{width:min(340px,90%);background:var(--paper);border:1px solid var(--line);padding:32px;border-radius:20px;box-shadow:0 16px 60px #17192306}.cw-login strong{font-size:22px;font-weight:500}.cw-login p{font-size:12px;color:var(--muted);margin-bottom:26px}.cw-login label{display:block;font-size:12px;margin:14px 0;color:var(--muted)}.cw-login input{display:block;width:100%;border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:7px;font:inherit;background:var(--soft);color:var(--ink)}
#canvas-workbench .cw-login button{background:var(--ink);color:var(--paper);width:100%;padding:10px}.cw-login-error{color:#d54d49;font-size:12px;margin-bottom:10px}
@media(max-width:650px){.cw-header{padding:0 12px;height:64px;gap:10px}.cw-brand{padding:0 10px;gap:8px}.cw-brand input{width:80px}.cw-save{display:none}.cw-header-actions{gap:0}.cw-header-actions button{padding:4px 7px!important}.cw-header-actions [data-action="undo"],.cw-header-actions [data-action="redo"]{display:none}.cw-composer{width:calc(100% - 24px);max-width:360px}.cw-drawer{right:12px;top:68px;width:calc(100% - 24px)}.cw-zoom{left:12px;bottom:85px}.cw-dock{bottom:20px}}
@media(prefers-reduced-motion:reduce){#canvas-workbench *{transition:none!important}.cw-node.busy .cw-node-content>svg{animation:none}}
.cw-port{width:28px;height:28px;min-height:28px!important;top:90px;border:0!important;background:transparent!important;opacity:.65;cursor:crosshair!important}
.cw-port[data-port="in"]{left:-14px}.cw-port[data-port="out"]{right:-14px}
.cw-port>span{width:9px;height:9px;border:2px solid #a5b1c5;background:var(--paper);border-radius:50%;box-shadow:0 0 0 3px var(--board)}
.cw-port:hover>span,.cw-board.linking .cw-port>span{border-color:var(--blue);background:var(--blue)}
.cw-node.link-target .cw-node-content{outline:2px solid var(--blue);box-shadow:0 0 0 6px #86a8e61a}
.cw-node.link-invalid .cw-node-content{outline:1px solid #bd7771}
.cw-edges path.cw-edge-hit{stroke:transparent;stroke-width:14;pointer-events:stroke}
.cw-edges path.cw-edge-line{stroke:#8b9bb5;stroke-width:1.7}
.cw-edges path.cw-edge-line.chosen{stroke:var(--blue);stroke-width:2.5}
.cw-edges path.cw-edge-preview{stroke:var(--blue);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
.cw-selection{border:1px solid var(--line);padding:5px 8px;border-radius:8px;display:flex;align-items:center;gap:10px}
#canvas-workbench .cw-selection button{min-height:24px;font-size:11px;color:#e7a098}