.preset-canvas{--canvas-panel: #101111;--canvas-panel-2: #171818;--canvas-border: rgba(255,255,255,.12);--canvas-muted: rgba(255,255,255,.48);overflow:hidden;border:1px solid var(--canvas-border);border-radius:24px;background:#090a0a;color:#f4f4f1;box-shadow:0 40px 100px #00000057}.canvas-topbar{height:62px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 18px 0 22px;border-bottom:1px solid var(--canvas-border);background:#0d0e0ef5}.canvas-workspace-title,.canvas-actions{display:flex;align-items:center;gap:10px}.canvas-workspace-title{min-width:0;font-size:12px;font-weight:600}.canvas-status-dot{width:7px;height:7px;border-radius:50%;background:#b7e3c2;box-shadow:0 0 0 4px #b7e3c214}.canvas-saved{color:var(--canvas-muted);font-size:10px;font-weight:400}.canvas-actions button,.canvas-actions a{padding:8px 12px;border:1px solid var(--canvas-border);border-radius:999px;background:#ffffff09;color:#ffffffb8;font-size:10px;cursor:pointer}.canvas-actions a{background:#f1f1ee;color:#0b0b0b;font-weight:600}.canvas-viewport{position:relative;height:680px;overflow:hidden;touch-action:none;cursor:grab;outline:none;background-color:#090a0a;background-image:radial-gradient(circle,rgba(255,255,255,.115) 1px,transparent 1.25px);background-size:20px 20px}.canvas-viewport.is-panning{cursor:grabbing}.canvas-viewport:before{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .6s ease;pointer-events:none}.canvas-world{position:absolute;left:0;top:0;transform-origin:0 0}.canvas-world.is-animating{transition:transform .42s cubic-bezier(.22,1,.36,1)}.is-layout-locked .canvas-world.is-animating{transition:transform .9s cubic-bezier(.4,0,.2,1);will-change:transform}.canvas-world.is-animating.is-video-transitioning{transition:transform .85s cubic-bezier(.22,1,.36,1);will-change:transform}.canvas-edges,.canvas-nodes{position:absolute;inset:0}.canvas-edges{overflow:visible;pointer-events:none;transition:opacity .4s ease}.canvas-edges path{fill:none;stroke:#d0dcda70;stroke-width:1.5;vector-effect:non-scaling-stroke}.canvas-edges text{fill:#ffffff6b;font-family:Inter,sans-serif;font-size:11px;letter-spacing:.08em;text-anchor:middle}.canvas-edges path[data-edge-kind=main-image]{stroke:#eeefe88a}.canvas-edges path[data-edge-kind=reference-image]{stroke:#b4bec66b;stroke-dasharray:7 6}.canvas-edges path[data-edge-kind=brush-source]{stroke:#ffffff57;stroke-dasharray:2 5}.canvas-edges path[data-edge-kind=derived-stylized]{stroke:#d1ae93ad}.canvas-edges text[data-edge-kind=derived-stylized]{fill:#e1c0a5c2}.canvas-node{position:absolute;display:grid;grid-template-rows:38px minmax(0,1fr) auto;overflow:visible;border:1px solid rgba(255,255,255,.17);border-radius:15px;background:var(--canvas-panel);box-shadow:0 20px 42px #00000057;cursor:move;transition:border-color .16s ease,box-shadow .16s ease,opacity .4s ease,background-color .4s ease}.canvas-node.is-selected{border-color:#eeefe8c7;box-shadow:0 0 0 3px #eeefe814,0 24px 58px #00000075}.canvas-node.canvas-relation-reference-image{border-style:dashed}.canvas-node.canvas-relation-brush-source header{background:#ffffff09}.canvas-node.canvas-relation-derived-stylized{border-color:#d1ae937a}.canvas-node.is-dragging{z-index:20}.canvas-node header{display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:#ffffffad;font-size:10px;letter-spacing:.08em}.canvas-node .node-kind{color:#ffffff52;font-size:8px}.node-media{position:relative;min-height:0;overflow:hidden;background:#121313}.node-media img{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;filter:saturate(.95) contrast(1.04)}.canvas-node-video>.node-media{display:grid;place-items:center}.node-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:default;touch-action:manipulation}.node-model-viewer{position:relative;width:100%;height:100%;overflow:hidden;background:#292c2c;cursor:grab;touch-action:none}.node-model-viewer canvas{display:block;width:100%;height:100%;outline-offset:-3px}.node-model-viewer[data-model-interacting=true]{cursor:grabbing}.node-model-status{position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:#ffffff9e;font-size:12px;text-align:center;pointer-events:none}.node-model-viewer[data-model-state=ready] .node-model-status{display:none}.node-model-hint{position:absolute;right:14px;bottom:12px;padding:6px 9px;border-radius:6px;background:#0c0e0e80;color:#fff9;font-size:9px;pointer-events:none}.node-model-viewer:not([data-model-state=ready]) .node-model-hint{display:none}.canvas-viewport.is-video-expanded{cursor:default}.canvas-viewport.is-video-expanded:before{opacity:1}.canvas-viewport.is-video-expanded .canvas-edges,.canvas-viewport.is-video-expanded .canvas-node:not(.is-video-expanded){opacity:0;pointer-events:none}.canvas-viewport.is-video-expanded .canvas-node.is-video-expanded{border-color:transparent;background:transparent;box-shadow:none;cursor:default}.canvas-node-video>header,.canvas-node-video>.node-copy,.canvas-node-video>.node-port{transition:opacity .3s ease}.canvas-node.is-video-expanded>header,.canvas-node.is-video-expanded>.node-copy,.canvas-node.is-video-expanded>.node-port{opacity:0;pointer-events:none}.canvas-node-empty{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.07),transparent 58%),#101111;color:#ffffff61;font-size:10px;letter-spacing:.1em}.node-play{position:absolute;inset:50% auto auto 50%;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:#0808087a;transform:translate(-50%,-50%);font-size:12px}.node-replace{position:absolute;right:10px;bottom:10px;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:#090909a8;color:#fff;font-size:9px;cursor:pointer;opacity:0;transition:opacity .15s ease}.canvas-node:hover .node-replace,.canvas-node.is-selected .node-replace{opacity:1}.node-copy{padding:13px 14px 14px;background:var(--canvas-panel);border-radius:0 0 15px 15px}.node-copy strong{display:block;margin-bottom:5px;font-size:12px;font-weight:600}.node-copy p{margin:0;color:var(--canvas-muted);font-size:9px;line-height:1.55}.node-port{position:absolute;top:50%;width:11px;height:11px;border:2px solid #101111;border-radius:50%;background:#d8dedb;transform:translateY(-50%)}.node-port-in{left:-6px}.node-port-out{right:-6px}.canvas-node-reference .node-port-in,.canvas-node-video .node-port-out{display:none}.preset-canvas.is-layout-locked,.preset-canvas.is-layout-locked *{-webkit-user-select:none;user-select:none}.preset-canvas.is-layout-locked .canvas-node{cursor:grab}.preset-canvas.is-layout-locked .is-panning .canvas-node{cursor:grabbing}.preset-canvas.is-layout-locked .canvas-node.is-video-expanded{cursor:default}.canvas-hint{position:absolute;left:18px;bottom:17px;color:#ffffff52;font-size:9px;letter-spacing:.12em;pointer-events:none}.canvas-view-controls{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--canvas-border);border-radius:999px;background:#0c0d0ddb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.canvas-view-controls button{min-width:31px;height:29px;display:inline-grid;place-items:center;padding:0 9px;border:0;border-radius:999px;background:transparent;color:#ffffffad;font-size:11px;cursor:pointer}.canvas-view-controls button:hover{background:#ffffff17;color:#fff}.canvas-view-controls output{min-width:44px;color:#ffffff70;font-size:9px;text-align:center}.canvas-page{min-height:100vh;display:flex;flex-direction:column;background:#070808;color:#f4f4f1}.canvas-page-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid rgba(255,255,255,.1)}.canvas-page-header img{width:176px;height:30px;object-fit:contain}.canvas-page-header a:last-child{padding:9px 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#ffffffb3;font-size:11px}.canvas-page-main{flex:1;min-height:0;padding:18px}.canvas-page-main .preset-canvas{height:calc(100vh - 108px);border-radius:18px}.canvas-page-main .canvas-viewport{height:calc(100% - 62px)}@media(prefers-reduced-motion:reduce){.canvas-world,.canvas-node,.canvas-edges,.canvas-viewport:before,.canvas-node-video>header,.canvas-node-video>.node-copy,.canvas-node-video>.node-port{transition:none!important}}
