/* Formal Canvas: matte media/text nodes, black dot grid and compact composer. */
html body[data-canvas-flat-nodes]{--canvas-flat-fill:#191b1e;--canvas-flat-ink:#e2e4e7;--canvas-flat-edge:#373b40;--canvas-flat-muted:#959ba4}
html body[data-canvas-flat-nodes][data-theme=light]{--canvas-flat-fill:#f3f4f5;--canvas-flat-ink:#262a30;--canvas-flat-edge:#c9cdd2;--canvas-flat-muted:#68717c}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])),
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView,
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #canvasShell{
 background:#000!important;background-image:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body[data-canvas-flat-nodes] #editorView #canvasShell::after{display:none!important}
html body[data-canvas-flat-nodes] #editorView #canvasViewport{
 background-color:#000!important;background-image:radial-gradient(circle,rgba(222,227,236,.21) .9px,transparent 1px)!important;
}
html body[data-canvas-flat-nodes] #editorView #canvasViewport.canvas-grid-hidden{background-image:none!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) .topbar :is(.board-title,.canvas-nav-icon){color:#d5d8dd!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #canvasTitleDock :is(#boardTitle,#canvasTitleEdit){color:#d5d8dd!important;caret-color:#d5d8dd!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) .topbar .daailok-logo-studio{color:#cdd0d5!important;-webkit-text-fill-color:#cdd0d5!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #nodesLayer > :is(.text-node,.image-node,.video-node){
 background:var(--canvas-flat-fill)!important;border:1px solid var(--canvas-flat-edge)!important;
 box-shadow:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--canvas-flat-ink)!important;
}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #nodesLayer > :is(.text-node,.image-node,.video-node).selected{border-color:#c7aa67!important;box-shadow:none!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node)::before,
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node)::after{display:none!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > :is(.node-header,.node-body){
 background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-header{border-bottom:1px solid var(--canvas-flat-edge)!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) :is(.node-heading,.node-text,.canvas-generation-message){color:var(--canvas-flat-ink)!important;text-shadow:none!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) :is(.node-kind,.node-placeholder){color:var(--canvas-flat-muted)!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > :is(.node-port,.node-resize){box-shadow:none!important;filter:none!important;backdrop-filter:none!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .canvas-glass-render{display:none!important}

html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-panel{
 width:780px!important;height:286px!important;max-height:calc(100dvh - 32px)!important;padding:14px 16px!important;gap:7px!important;
 background:#1c1d1f!important;color:#e1e3e6!important;border:1px solid #383a3e!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif!important;
}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-panel > header{flex-basis:20px!important;min-height:20px!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-panel > header strong{font-size:12px!important;font-weight:500!important;color:#cdd0d5!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-reference-strip{flex:0 0 auto!important;min-height:44px!important;gap:7px!important;flex-wrap:wrap!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-refs{flex-wrap:wrap!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog :is(.canvas-generator-ref,.canvas-generator-add-reference){width:44px!important;height:44px!important;flex-basis:44px!important;border-radius:9px!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog #canvasGeneratorPrompt{flex:1 1 auto!important;min-height:58px!important;padding:4px 0!important;line-height:1.65!important;font-size:13px!important;color:#e1e3e6!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-panel footer{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important;flex:0 0 auto!important;padding-top:4px!important;border:0!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-params{min-width:0!important;gap:10px!important;flex-wrap:nowrap!important;align-items:center!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-param-source{display:none!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-params > label:first-child{width:auto!important;max-width:260px!important;min-width:100px!important;flex:0 1 260px!important;font-size:0!important;gap:0!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-select-trigger,
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-spec-trigger{
 display:flex;align-items:center;justify-content:space-between;gap:9px;height:30px!important;min-height:30px!important;padding:0 5px!important;
 background:transparent!important;border:0!important;border-radius:7px!important;color:#b7bcc5!important;box-shadow:none!important;font-size:12px!important;font-weight:500!important;white-space:nowrap!important;
}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-spec-trigger:hover,
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-select-trigger:hover{background:rgba(255,255,255,.045)!important;color:#e4e6ea!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-choice-menu,
html body[data-canvas-flat-nodes] #canvasGeneratorSpecMenu{
 background:#232528!important;color:#e1e3e6!important;border:1px solid #3a3d43!important;box-shadow:0 8px 24px rgba(0,0,0,.25)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-choice{font-size:12px!important;font-weight:400!important;color:#d1d5db!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-choice[aria-selected=true]{background:rgba(255,255,255,.07)!important;color:#eee!important}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecMenu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:320;width:340px;max-width:calc(100vw - 48px);max-height:min(390px,55dvh);overflow:auto;border-radius:12px;padding:12px}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecMenu[hidden]{display:none!important}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecChoices{display:grid;gap:13px}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecChoices section > strong{display:block;font-size:11px;font-weight:400;color:#9198a4;margin-bottom:7px}
html body[data-canvas-flat-nodes] .canvas-generator-spec-options{display:flex;flex-wrap:wrap;gap:5px}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecMenu .canvas-generator-spec-option{
 flex:0 0 auto;min-width:46px;min-height:29px;padding:5px 9px;font-size:11px;font-weight:400;line-height:1.4;
 border:1px solid #3f4349!important;border-radius:7px!important;background:transparent!important;color:#cdd2da!important;box-shadow:none!important;
}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecMenu .canvas-generator-spec-option[aria-selected=true]{background:#393c41!important;border-color:#717781!important;color:#fff!important}
html body[data-canvas-flat-nodes] #canvasGeneratorSpecMenu .canvas-generator-spec-option:disabled{opacity:.5}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-actions{gap:7px!important;flex:0 0 auto!important}
html body[data-canvas-flat-nodes]:has(#editorView) #canvasGeneratorDialog :is(#canvasGeneratorCancel,#canvasGeneratorSubmit){
 height:32px!important;min-height:32px!important;border-radius:999px!important;padding:0 15px!important;font-size:12px!important;font-weight:500!important;box-shadow:none!important;
}
html body[data-canvas-flat-nodes]:has(#editorView) #canvasGeneratorDialog #canvasGeneratorCancel{background:transparent!important;border:1px solid #454950!important;color:#c7cbd1!important}
html body[data-canvas-flat-nodes]:has(#editorView) #canvasGeneratorDialog #canvasGeneratorSubmit{background:#d4d7dc!important;border:1px solid #d4d7dc!important;color:#202226!important}
html body[data-canvas-flat-nodes] #canvasGeneratorSubmit .daailok-points-price{color:inherit!important}
html body[data-canvas-flat-nodes] #canvasGeneratorStatus{grid-column:1/-1;margin:0!important;min-height:14px;max-height:32px;overflow:auto;color:#969da8!important;font-size:10px!important;line-height:1.5!important}
html body[data-canvas-flat-nodes] #canvasGeneratorTextOnly{color:#b6bdc8!important}
@media(max-width:620px){
 html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-panel{width:calc(100vw - 24px)!important;height:326px!important;padding:12px!important}
 html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-panel footer{grid-template-columns:1fr!important}
 html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-params > label:first-child{max-width:52%!important;min-width:0!important}
 html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-specs{margin-left:auto}
 html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-generator-actions{justify-self:end}
 html body[data-canvas-flat-nodes] #canvasGeneratorStatus{grid-row:3}
}

/* Matte cards: labels above the content, no glass/composited surface. */
html body[data-canvas-flat-nodes] #editorView #canvasWorld{will-change:auto!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node){background:transparent!important;border:0!important;border-radius:18px!important;box-shadow:none!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-header{position:absolute!important;left:0;right:0;top:auto!important;bottom:100%;height:30px;padding:0 8px;gap:7px;border:0!important;color:#a5a5a5!important;font-size:13px;cursor:grab}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) .node-kind{display:none}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-body{height:100%;flex:1 1 auto;background:#171717!important;border:1px solid transparent!important;border-radius:18px!important;overflow:hidden;box-sizing:border-box}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node).selected > .node-body{border-color:#777!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) .node-placeholder{display:flex;align-items:center;justify-content:center;height:100%;min-height:0;color:#626262!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .node-placeholder svg{width:54px;height:54px;flex:none}
html body[data-canvas-flat-nodes] .canvas-empty-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .node-media{width:100%;height:100%;object-fit:contain;border-radius:17px;filter:none!important;image-rendering:auto}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port{display:grid!important;place-items:center;position:absolute;top:50%;width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;max-width:24px!important;max-height:24px!important;padding:0!important;border:1px solid #ffe85d!important;border-radius:50%!important;background:#ffe85d!important;color:#171717!important;font:400 18px/1 Arial!important;box-sizing:border-box;transform:translateY(-50%)!important;box-shadow:none!important;opacity:1!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-port.port-in{left:-12px!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-port.port-out{right:-12px!important;left:auto!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port:hover{background:#fff19a!important;border-color:#fff19a!important}
html body[data-canvas-flat-nodes] .top-actions .canvas-navigation-pill{display:flex;align-items:center;gap:2px;border:1px solid #33363a;border-radius:999px;padding:4px;background:#151719;box-shadow:none;backdrop-filter:none}
html body[data-canvas-flat-nodes] .top-actions .canvas-navigation-pill > .canvas-nav-icon{position:static!important;display:grid;place-items:center;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;flex:0 0 28px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;transition:background-color .15s ease,color .15s ease!important}
html body[data-canvas-flat-nodes] .top-actions .canvas-navigation-pill > .canvas-nav-icon:hover{background:#303236!important;color:#fff!important}
html body[data-canvas-flat-nodes] .top-actions .canvas-navigation-pill svg{width:19px;height:19px;stroke-width:1.6}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog.canvas-generator-context{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog.canvas-generator-context .canvas-generator-panel{position:fixed!important;transform:none!important;margin:0!important;pointer-events:auto!important;overflow:visible}
html body[data-canvas-flat-nodes] #canvasGeneratorDialog .canvas-catalog-retry{display:inline-flex;min-height:24px!important;padding:2px 10px!important;margin-left:6px;border:1px solid #555!important;border-radius:999px!important;background:#292b2e!important;color:#eee!important;cursor:pointer}
@media(max-width:650px){html body[data-canvas-flat-nodes] #canvasGeneratorDialog.canvas-generator-context .canvas-generator-panel{height:326px!important}}

html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.image-node,.video-node) > .node-body{padding:0!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .node-placeholder{border:0!important;background:none!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .node-type-icon{display:flex;align-items:center;color:#aaa!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .node-type-icon svg{width:16px;height:16px}
html body[data-canvas-flat-nodes][data-canvas-default-hover]:has(#editorView:not([hidden])) .topbar .top-actions .canvas-navigation-pill > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink):hover{background:#303236!important;color:#fff!important;box-shadow:none!important}

/* Fixed 16:9 cards and an internal grab strip; media never starts native drag-copy. */
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node){width:320px!important;height:180px!important;min-width:320px!important;max-width:320px!important;min-height:180px!important;max-height:180px!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-node-drag-handle:not([hidden]){position:absolute;z-index:4;top:0;left:0;right:0;height:26px;border-radius:18px 18px 0 0;cursor:grab;touch-action:none;user-select:none}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-node-drag-handle:active{cursor:grabbing}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-node-drag-handle::after{content:"";position:absolute;top:8px;left:calc(50% - 12px);width:24px;height:3px;border-radius:999px;background:#888;opacity:0;transition:opacity .15s}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-node-drag-handle:hover::after{opacity:.5}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-node:has(.canvas-crop-pane) > .canvas-node-drag-handle{pointer-events:none}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > .text-node .node-body{padding-top:30px!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .node-media{-webkit-user-drag:none;user-select:none}
html body[data-canvas-flat-nodes] .top-actions .canvas-navigation-pill{height:36px!important;min-height:36px!important;padding:3px 6px!important;gap:3px!important;box-sizing:border-box;overflow:visible}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountControl{position:relative!important;flex:0 0 28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountTrigger{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountAvatar{width:28px!important;height:28px!important;border-radius:50%!important}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountTrigger .canvas-avatar-placeholder{width:19px!important;height:19px!important}
html body[data-canvas-flat-nodes] .topbar .canvas-navigation-pill > .daailok-credit-balance{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto!important;width:auto!important;min-width:48px!important;max-width:100px!important;height:28px!important;min-height:28px!important;margin:0 2px!important;padding:2px 7px!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;font-size:12px!important}
html body[data-canvas-flat-nodes][data-canvas-default-hover]:has(#editorView:not([hidden])) .topbar .canvas-navigation-pill :is(#canvasAccountTrigger,.daailok-credit-balance):hover{background:#303236!important;color:#fff!important;box-shadow:none!important}

html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountTrigger::before,html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountTrigger::after{display:none!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) .topbar .top-actions .canvas-navigation-pill > :is(#themeToggle,#canvasStudioLink,#canvasDirectorLink){width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important;flex:0 0 28px!important;padding:0!important;box-sizing:border-box!important}

html body[data-canvas-flat-nodes] #canvasGeneratorDialog.canvas-generator-dragging .canvas-generator-panel{visibility:hidden!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.image-node,.video-node) > .node-body{position:relative!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-regeneration-state{position:absolute;z-index:3;bottom:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:7px 10px;background:rgba(0,0,0,.82);color:#ddd;font-size:10px;line-height:1.5}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-regeneration-state span{min-width:0;max-height:42px;overflow:auto}
html body[data-canvas-flat-nodes] #editorView #nodesLayer .canvas-regeneration-state button{flex:none;min-height:24px;padding:2px 7px;border:1px solid #666;border-radius:999px;background:#303236;color:#eee;font-size:10px}

/* Screen-size controls: card contents zoom; borders, labels and ports do not. */
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #nodesLayer > :is(.text-node,.image-node,.video-node){border-width:calc(1px * var(--canvas-inverse-zoom,1))!important;outline-width:calc(1px * var(--canvas-inverse-zoom,1))!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-header{right:auto!important;width:calc(100% * var(--canvas-zoom,1));box-sizing:border-box;transform:scale(var(--canvas-inverse-zoom,1));transform-origin:bottom left}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port{width:calc(16px * var(--canvas-inverse-zoom,1))!important;height:calc(16px * var(--canvas-inverse-zoom,1))!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;border-width:calc(1px * var(--canvas-inverse-zoom,1))!important;border-color:#ffe85d!important;background:transparent!important;color:#ffe85d!important;font-size:calc(16px * var(--canvas-inverse-zoom,1))!important;line-height:1!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-port.port-in{left:calc(-25px * var(--canvas-inverse-zoom,1))!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-port.port-out{right:calc(-25px * var(--canvas-inverse-zoom,1))!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port:is(:hover,.armed){background:transparent!important;color:#ffe85d!important}
html body[data-canvas-flat-nodes] .top-actions .canvas-navigation-pill{display:inline-flex!important;align-items:center!important;flex-wrap:nowrap!important;isolation:isolate}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountTrigger{position:relative!important;display:grid!important;place-items:center!important;overflow:hidden!important;box-sizing:border-box!important;line-height:1!important}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountAvatar{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important;margin:0!important;transform:none!important}
html body[data-canvas-flat-nodes] .canvas-navigation-pill #canvasAccountTrigger [hidden]{display:none!important}

/* Geometry icons avoid font baselines and keep the smaller ports centered. */
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port{place-items:center!important;line-height:0!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port > svg{display:block!important;width:calc(7px * var(--canvas-inverse-zoom,1))!important;height:calc(7px * var(--canvas-inverse-zoom,1))!important;fill:none!important;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;align-self:center;justify-self:center;pointer-events:none;transform:none!important}
/* Override the legacy floating avatar's 36/44px minimum and hidden SVG rule. */
html body[data-canvas-flat-nodes]:has(#editorView) .topbar .canvas-navigation-pill #canvasAccountControl{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;margin:0!important;padding:0!important;transform:none!important}
html body[data-canvas-flat-nodes]:has(#editorView) .topbar .canvas-navigation-pill #canvasAccountControl > #canvasAccountTrigger{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;inset:auto!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;box-sizing:border-box!important;transform:none!important;line-height:0!important;overflow:hidden!important;transition:background-color .15s ease!important}
html body[data-canvas-flat-nodes]:has(#editorView) .topbar .canvas-navigation-pill #canvasAccountControl > #canvasAccountTrigger > #canvasAccountAvatar{position:absolute!important;inset:0!important;width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;min-height:28px!important;max-height:28px!important;margin:0!important;padding:0!important;border:0!important;object-fit:cover!important;object-position:center!important;transform:none!important;display:block!important;pointer-events:none!important}
html body[data-canvas-flat-nodes]:has(#editorView) .topbar .canvas-navigation-pill #canvasAccountControl > #canvasAccountTrigger > .canvas-avatar-placeholder{display:block!important;position:static!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;flex:none!important;transform:none!important}
html body[data-canvas-flat-nodes]:has(#editorView) .topbar .canvas-navigation-pill #canvasAccountControl > #canvasAccountTrigger > :is(#canvasAccountAvatar,.canvas-avatar-placeholder)[hidden]{display:none!important}

/* A small magnetic port with a larger transparent acquisition area. */
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port{transform:translate(calc(var(--port-dx,0px) + var(--port-pixel-x,0px)),calc(-50% + var(--port-dy,0px) + var(--port-pixel-y,0px)))!important;touch-action:none}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port::after{content:"";position:absolute;inset:calc(-10px * var(--canvas-inverse-zoom,1));border:0!important;background:transparent!important;border-radius:50%;box-shadow:none!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #nodesLayer > :is(.text-node,.image-node,.video-node){border-color:var(--canvas-flat-edge)!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > .node-body{border:0!important}
html body[data-canvas-flat-nodes]:has(#editorView:not([hidden])) #editorView #nodesLayer > :is(.text-node,.image-node,.video-node).selected{border-color:#ffe85d!important}
/* Theme-specific backgrounds; light mode retains its original silver surface. */
html body[data-canvas-flat-nodes][data-theme=dark]:has(#editorView:not([hidden])),html body[data-canvas-flat-nodes][data-theme=dark]:has(#editorView:not([hidden])) #editorView,html body[data-canvas-flat-nodes][data-theme=dark]:has(#editorView:not([hidden])) #canvasShell{background:#111!important}
html body[data-canvas-flat-nodes][data-theme=dark]:has(#editorView:not([hidden])) #editorView #canvasViewport{background-color:#111!important}
html body[data-canvas-flat-nodes][data-theme=light]:has(#editorView:not([hidden])){background:#eef0ef!important}
html body[data-canvas-flat-nodes][data-theme=light]:has(#editorView:not([hidden])) #editorView{background:#eef0ef!important}
html body[data-canvas-flat-nodes][data-theme=light]:has(#editorView:not([hidden])) #editorView #canvasShell{background:linear-gradient(45deg,#646563 0%,#91928f 50%,#d4d4d2 100%)!important}
html body[data-canvas-flat-nodes][data-theme=light]:has(#editorView:not([hidden])) #editorView #canvasViewport{background-color:transparent!important;background-image:radial-gradient(circle,rgba(28,38,40,.22) .8px,transparent 1px)!important}
/* Draw circle and cross in the same vector coordinate system. */
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port{border:0!important}
html body[data-canvas-flat-nodes] #editorView #nodesLayer > :is(.text-node,.image-node,.video-node) > button.node-port > svg{width:calc(16px * var(--canvas-inverse-zoom,1))!important;height:calc(16px * var(--canvas-inverse-zoom,1))!important;stroke-width:1.25!important;shape-rendering:geometricPrecision;overflow:visible}
#canvasBootStatus{display:none}
html[data-canvas-workspace=standalone] body[data-canvas-boot=loading] #canvasBootStatus{display:grid;position:fixed;inset:64px 0 0;place-items:center;background:#111;color:#bfc3c6;z-index:50}
html[data-canvas-workspace=standalone][data-canvas-theme=light] body[data-canvas-boot=loading] #canvasBootStatus{background:#eef0ef;color:#50585d}
html[data-canvas-workspace=standalone] body[data-canvas-boot=loading] > main{visibility:hidden}
html body[data-canvas-flat-nodes][data-theme=light]:has(#editorView:not([hidden])) .topbar :is(.board-title,.canvas-nav-icon,.daailok-logo-studio){color:var(--text)!important;-webkit-text-fill-color:currentColor!important}
html body[data-canvas-flat-nodes][data-theme=light]:has(#editorView:not([hidden])) .topbar .canvas-navigation-pill{background:#e3e6e4!important;border-color:#b8bfbb!important}
html[data-canvas-workspace=standalone] body[data-theme=dark] #boardsView{background:#111!important}
html[data-canvas-workspace=standalone] body[data-theme=light] #boardsView{background:linear-gradient(45deg,#646563 0%,#91928f 50%,#d4d4d2 100%)!important}
html[data-canvas-workspace=standalone] body[data-theme=light]:has(#boardsView) > .topbar{background:linear-gradient(125deg,#f8f9f8cf,#d9dedec7)!important;color:var(--text)!important}

/* Connected ports disappear per side; body-drop still accepts extra references. */
html body[data-canvas-flat-nodes] #editorView #nodesLayer > .canvas-node > button.node-port[hidden]{display:none!important;pointer-events:none!important}