.magic-canvas-workspace{position:relative;isolation:isolate;width:100%;height:100%;overflow:hidden;background:var(--color-surface);color:var(--color-on-surface)}.magic-canvas-workspace .react-flow{background:var(--color-surface)!important}.magic-canvas-main{container-type:inline-size}.magic-canvas-return-to-nodes{position:absolute;z-index:50;left:50%;bottom:max(24px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 32px);padding:8px 16px;border:1px solid var(--color-outline);border-radius:999px;background:color-mix(in srgb,var(--color-surface) 92%,transparent);box-shadow:0 4px 20px #0003;backdrop-filter:blur(12px);transform:translateX(-50%);animation:magic-canvas-return-in .18s ease-out}.magic-canvas-return-to-nodes p{margin:0;font-size:14px;line-height:20px;color:var(--color-on-surface)}.magic-canvas-return-to-nodes button{flex-shrink:0;min-height:32px;padding:6px 12px;border:0;border-radius:12px;background:var(--color-primary);color:var(--color-on-primary);font-size:13px;line-height:20px;font-weight:600;transition:opacity .15s ease}.magic-canvas-return-to-nodes button:hover{opacity:.88}@keyframes magic-canvas-return-in{0%{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%)}}@container (max-width: 1100px){.magic-canvas-return-to-nodes{bottom:calc(80px + env(safe-area-inset-bottom));gap:12px}}@container (max-width: 480px){.magic-canvas-return-to-nodes{padding:8px 12px;border-radius:20px}.magic-canvas-return-to-nodes p{font-size:12px;line-height:18px}.magic-canvas-return-to-nodes button{min-height:44px}}.magic-canvas-node-pin-marks{display:inline-flex;flex-shrink:0;align-items:center;margin-left:3px;overflow:visible!important}.magic-canvas-node-pin-marks>span{width:12px;height:12px;flex-shrink:0;border-radius:50%;border:1px solid #ffffffb3}.magic-canvas-node-pin-marks>span+span{margin-left:-4px}.magic-canvas-workspace .react-flow__pane{background:transparent!important}.magic-canvas-workspace .react-flow__background-pattern{fill:rgba(255,255,255,.28)}.magic-canvas-workspace a,.magic-canvas-workspace button{cursor:pointer}.magic-canvas-workspace button:disabled{cursor:not-allowed}.magic-canvas-workspace a:focus-visible,.magic-canvas-workspace button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.magic-canvas-topbar{position:absolute;z-index:60;inset:0;height:0;pointer-events:none}.magic-canvas-account-cluster,.magic-canvas-project-cluster{position:absolute;top:16px;display:flex;align-items:center;gap:8px;pointer-events:auto}.magic-canvas-project-cluster{left:16px;max-width:calc(100% - 220px)}.magic-canvas-account-cluster{right:16px}.magic-canvas-project-pill{min-width:0;max-width:100%;height:48px;padding:0 4px;display:flex;align-items:center;border:1px solid var(--color-outline);border-radius:16px;background:var(--color-control);box-shadow:0 10px 26px rgba(0,0,0,.24)}.magic-canvas-brand-button{flex:none;width:60px;height:36px;display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:12px;background:transparent;color:var(--color-muted);transition:background .14s ease,color .14s ease}.magic-canvas-brand-button.active,.magic-canvas-brand-button:hover,.magic-canvas-project-name.active,.magic-canvas-project-name:hover{background:color-mix(in srgb,var(--color-on-surface) 9%,transparent);color:var(--color-primary)}.magic-canvas-divider{width:1px;height:24px;margin:0 4px;background:color-mix(in srgb,var(--color-on-surface) 10%,transparent)}.magic-canvas-project-name{min-width:0;width:clamp(150px,19vw,268px);height:36px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;gap:6px;border:0;border-radius:8px;background:transparent;color:var(--color-on-surface);font-size:14px;font-weight:500;transition:background .14s ease}.magic-canvas-project-name span{min-width:0;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.magic-canvas-brand-button svg:last-child,.magic-canvas-project-name svg{flex:none;color:var(--color-muted);transition:transform .16s ease,color .16s ease}.magic-canvas-project-name.active svg{transform:rotate(180deg);color:var(--color-primary)}.magic-canvas-save-state{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--color-muted)}.magic-canvas-save-state.saving{color:var(--color-muted)}.magic-canvas-save-state.saving svg{animation:magic-canvas-spin .8s linear infinite}.magic-canvas-save-state.saved{color:var(--color-muted)}.magic-canvas-save-state.error{color:var(--color-error)}.magic-canvas-node-menu,.magic-canvas-project-menu,.magic-canvas-shortcuts,.magic-canvas-tool-drawer{border:1px solid var(--color-outline);background:var(--color-control);box-shadow:0 22px 58px rgba(0,0,0,.48);animation:magic-canvas-menu-in .16s cubic-bezier(.22,1,.36,1)}.magic-canvas-project-menu{position:absolute;top:56px;left:0;width:224px;padding:6px;border-radius:12px}.magic-canvas-primary-menu{left:0}.magic-canvas-switcher-menu{left:72px;width:326px;padding:8px}.magic-canvas-project-menu a,.magic-canvas-project-menu button{width:100%;min-height:36px;padding:0 10px;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;color:var(--color-muted);font-size:12px;text-decoration:none;transition:background .14s ease,color .14s ease}.magic-canvas-project-menu button:disabled{opacity:.3}.magic-canvas-project-menu button.danger{color:var(--color-error)}.magic-canvas-project-menu kbd{margin-left:auto;color:var(--color-muted);font-size:9px}.magic-canvas-menu-divider{display:block;height:1px;margin:6px 8px;background:color-mix(in srgb,var(--color-on-surface) 8%,transparent)}.magic-canvas-menu-label{display:block;padding:4px 10px 3px;color:var(--color-muted);font-size:10px}.magic-canvas-project-search{height:36px;padding:0 11px;display:flex;align-items:center;gap:8px;border-radius:9px;background:color-mix(in srgb,var(--color-on-surface) 7%,transparent);color:var(--color-muted)}.magic-canvas-project-search input{min-width:0;flex:1;border:0;outline:0!important;background:transparent;color:var(--color-on-surface);font-size:12px}.magic-canvas-project-search input::placeholder{color:var(--color-muted)}.magic-canvas-project-list{max-height:min(320px,48vh);padding-top:6px;overflow-y:auto}.magic-canvas-project-list button{min-height:44px;padding:5px 8px}.magic-canvas-project-list button.active{color:var(--color-primary)}.magic-canvas-project-list button strong{min-width:0;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.magic-canvas-project-list button>svg{flex:none;margin-left:auto}.magic-canvas-project-thumb{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:7px;background:color-mix(in srgb,var(--color-on-surface) 9%,transparent);color:var(--color-muted)}.magic-canvas-project-thumb img{object-fit:cover}.magic-canvas-project-empty{margin:0;padding:24px 8px;color:var(--color-muted);text-align:center;font-size:12px}.magic-canvas-switcher-menu .magic-canvas-create-project{min-height:40px;color:var(--color-on-surface)}.magic-canvas-avatar,.magic-canvas-credit-pill,.magic-canvas-login-pill,.magic-canvas-round-button{height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-outline);background:var(--color-control);color:var(--color-on-surface);text-decoration:none;transition:background .14s ease,color .14s ease}.magic-canvas-credit-pill,.magic-canvas-login-pill{min-width:72px;padding:0 12px;gap:6px;border-radius:12px;font-size:13px}.magic-canvas-avatar,.magic-canvas-round-button{width:40px;border-radius:50%}.magic-canvas-avatar{position:relative;overflow:hidden;font-size:12px;font-weight:700}.magic-canvas-avatar img{object-fit:cover}.magic-canvas-avatar:hover,.magic-canvas-credit-pill:hover,.magic-canvas-login-pill:hover,.magic-canvas-round-button.active,.magic-canvas-round-button:hover{background:rgba(65,65,65,.9);color:var(--color-primary)}.magic-canvas-account-skeleton{width:72px;height:40px;border-radius:12px;background:var(--color-control);animation:magic-canvas-pulse 1.2s ease-in-out infinite}.magic-canvas-side-toolbar{position:absolute;z-index:45;left:15px;top:50%;width:54px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translateY(-50%);border:1px solid var(--color-outline);border-radius:32px;background:var(--color-control);box-shadow:0 18px 44px rgba(0,0,0,.34)}.magic-canvas-side-toolbar button{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--color-muted);transition:background .14s ease,color .14s ease}.magic-canvas-side-toolbar button.active,.magic-canvas-side-toolbar button:hover{background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-primary)}.magic-canvas-side-toolbar button:disabled{opacity:.35}.magic-canvas-side-toolbar .magic-canvas-add-button{width:40px;height:40px;border-radius:50%;background:var(--color-primary);color:var(--color-on-primary)}.magic-canvas-add-button svg{transition:transform .18s cubic-bezier(.22,1,.36,1)}.magic-canvas-add-button.active svg{transform:rotate(45deg)}.magic-canvas-side-tools{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}.magic-canvas-node-search-layer{position:fixed;z-index:78;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:16px;background:var(--color-control)}.magic-canvas-node-search{width:min(640px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 32px));overflow:hidden;border:1px solid var(--color-outline);border-radius:16px;background:var(--color-panel);color:var(--color-on-surface);box-shadow:0 24px 70px rgba(0,0,0,.48)}.magic-canvas-node-search-input{height:68px;padding:0 18px;display:flex;align-items:center;gap:13px;color:var(--color-muted)}.magic-canvas-node-search-input input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--color-on-surface);font-size:15px}.magic-canvas-node-search-input input::placeholder{color:var(--color-muted)}.magic-canvas-node-search-input input:focus,.magic-canvas-node-search-input input:focus-visible{border-color:transparent!important;outline:0!important;box-shadow:none!important}.magic-canvas-node-search-filters{min-height:49px;padding:7px 12px;display:flex;align-items:center;gap:4px;overflow-x:auto;border-block:1px solid var(--color-outline)}.magic-canvas-node-search-filters button{min-height:32px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;border:0;border-radius:9px;background:transparent;color:var(--color-muted);font-size:13px;cursor:pointer;transition:background .16s ease,color .16s ease}.magic-canvas-node-search-filters button.active,.magic-canvas-node-search-filters button:hover:not(:disabled){background:var(--color-control);color:var(--color-primary)}.magic-canvas-node-search-filters button:disabled{opacity:.25;cursor:default}.magic-canvas-node-search-filters button:focus-visible,.magic-canvas-node-search-results button:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.magic-canvas-node-search-results{max-height:430px;padding:8px;overflow-y:auto}.magic-canvas-node-search-results button{width:100%;min-height:60px;padding:9px 12px;display:flex;align-items:center;gap:12px;border:0;border-radius:12px;background:transparent;color:var(--color-muted);text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease}.magic-canvas-node-search-results button.active,.magic-canvas-node-search-results button:hover{background:#444;color:var(--color-primary)}.magic-canvas-node-search-result-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border:1px solid var(--color-outline);border-radius:11px}.magic-canvas-node-search-results button>span:last-child{min-width:0;display:grid;gap:2px}.magic-canvas-node-search-results strong{overflow:hidden;color:inherit;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.magic-canvas-node-search-results small{overflow:hidden;color:var(--color-muted);font-size:12px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.magic-canvas-node-search-empty{margin:0;padding:30px 16px;color:var(--color-muted);text-align:center;font-size:13px}.magic-canvas-asset-layer{position:fixed;z-index:75;inset:0}.magic-canvas-asset-panel{position:fixed;z-index:76;left:78px;top:50%;width:372px;max-height:min(720px,calc(100vh - 32px));display:flex;flex-direction:column;overflow:hidden;transform:translateY(-50%);border:1px solid var(--color-outline);border-radius:16px;background:var(--color-control);color:var(--color-on-surface);box-shadow:0 24px 70px rgba(0,0,0,.48)}.magic-canvas-asset-panel>header{min-height:54px;padding:0 14px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-outline)}.magic-canvas-asset-panel>header strong{font-size:14px;font-weight:600}.magic-canvas-asset-panel>header>div{display:flex;gap:4px}.magic-canvas-asset-panel>header button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--color-muted);cursor:pointer;transition:background .16s ease,color .16s ease}.magic-canvas-asset-panel>header button:hover{background:color-mix(in srgb,var(--color-on-surface) 8%,transparent);color:var(--color-on-surface)}.magic-canvas-asset-panel>nav{min-height:50px;padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:1px solid var(--color-outline)}.magic-canvas-asset-panel>nav button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;background:transparent;color:var(--color-muted);font-size:13px;cursor:pointer;transition:background .16s ease,color .16s ease}.magic-canvas-asset-panel>nav button.active,.magic-canvas-asset-panel>nav button:hover{background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-primary)}.magic-canvas-asset-content{min-height:180px;flex:1;overflow-y:auto;padding:10px}.magic-canvas-asset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.magic-canvas-asset-grid article{position:relative;min-width:0;aspect-ratio:3/4;overflow:hidden;border:1px solid transparent;border-radius:12px;background:#111;transition:border-color .16s ease,box-shadow .16s ease}.magic-canvas-asset-grid article.selected{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}.magic-canvas-asset-grid article>img,.magic-canvas-asset-grid article>video{width:100%;height:100%;object-fit:cover}.magic-canvas-asset-check{position:absolute;z-index:2;top:8px;left:8px;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--color-outline);border-radius:7px;background:var(--color-control);color:#111;opacity:0;cursor:pointer;transition:opacity .16s ease,background .16s ease}.magic-canvas-asset-check.selected,.magic-canvas-asset-grid article:hover .magic-canvas-asset-check{opacity:1}.magic-canvas-asset-check.selected{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}.magic-canvas-asset-overlay{position:absolute;z-index:1;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.62));opacity:0;transition:opacity .18s ease}.magic-canvas-asset-grid article:focus-within .magic-canvas-asset-overlay,.magic-canvas-asset-grid article:hover .magic-canvas-asset-overlay{opacity:1}.magic-canvas-asset-overlay button{min-height:32px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:18px;background:var(--color-primary);color:var(--color-on-primary);font-size:12px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28)}.magic-canvas-asset-overlay button:disabled{opacity:.55;cursor:wait}.magic-canvas-asset-state{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--color-muted);text-align:center;font-size:13px}.magic-canvas-asset-state p{margin:0}.magic-canvas-asset-state a,.magic-canvas-asset-state button{min-height:32px;padding:0 13px;display:inline-flex;align-items:center;border:0;border-radius:9px;background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-on-surface);text-decoration:none;cursor:pointer}.magic-canvas-asset-panel>footer{min-height:58px;padding:10px 12px 10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--color-outline);background:var(--color-control)}.magic-canvas-asset-panel>footer span{color:var(--color-muted);font-size:12px}.magic-canvas-asset-panel>footer button{min-height:36px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:10px;background:var(--color-primary);color:var(--color-on-primary);font-size:12px;font-weight:600;cursor:pointer}.magic-canvas-asset-panel>footer button:disabled{opacity:.55;cursor:wait}.magic-canvas-template-layer{position:fixed;z-index:75;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(4px)}.magic-canvas-template-panel{position:fixed;z-index:76;left:78px;top:50%;width:min(500px,calc(100vw - 94px));height:min(500px,calc(100vh - 32px));display:flex;flex-direction:column;overflow:hidden;transform:translateY(-50%);border:1px solid var(--color-outline);border-radius:12px;background:rgba(24,24,27,.98);color:var(--color-on-surface);box-shadow:0 24px 70px rgba(0,0,0,.48);transition:width .18s cubic-bezier(.22,1,.36,1),height .18s cubic-bezier(.22,1,.36,1)}.magic-canvas-template-panel.expanded{width:min(760px,calc(100vw - 94px));height:min(720px,calc(100vh - 32px))}.magic-canvas-template-panel>header{min-height:46px;padding:0 11px 0 16px;display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid var(--color-outline)}.magic-canvas-template-tabs{height:100%;display:flex;align-items:end;gap:12px}.magic-canvas-template-tabs button{height:100%;padding:3px 0 10px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--color-muted);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .15s ease,color .15s ease}.magic-canvas-template-tabs button:hover{color:var(--color-muted)}.magic-canvas-template-tabs button.active{border-bottom-color:var(--color-primary);color:var(--color-primary)}.magic-canvas-template-actions{height:100%;display:flex;align-items:center;gap:2px}.magic-canvas-template-actions button,.magic-canvas-template-search>button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--color-muted);cursor:pointer;transition:background .15s ease,color .15s ease}.magic-canvas-template-actions button:hover,.magic-canvas-template-search>button:hover{background:color-mix(in srgb,var(--color-on-surface) 8%,transparent);color:var(--color-on-surface)}.magic-canvas-template-search{flex:0 0 28px;margin:12px 16px 8px;padding:0 8px;display:flex;align-items:center;gap:7px;border:1px solid var(--color-outline);border-radius:10px;background:rgba(63,63,70,.3);color:var(--color-muted)}.magic-canvas-template-search:focus-within{border-color:var(--color-outline)}.magic-canvas-template-search input{min-width:0;height:100%;flex:1;border:0;outline:0;background:transparent;color:var(--color-on-surface);font-size:12px}.magic-canvas-template-search input::placeholder{color:var(--color-muted)}.magic-canvas-template-search>button{width:22px;height:22px;margin-right:-5px}.magic-canvas-template-content{min-height:0;flex:1;overflow-y:auto;padding:0 16px 16px}.magic-canvas-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.magic-canvas-template-panel.expanded .magic-canvas-template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.magic-canvas-template-card{position:relative;min-width:0;padding:0;display:flex;flex-direction:column;gap:6px;overflow:hidden;border:0;background:transparent;color:var(--color-muted);text-align:left;cursor:pointer}.magic-canvas-template-card:disabled{cursor:default}.magic-canvas-template-card-title{width:100%;overflow:hidden;font-size:12px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;transition:color .15s ease}.magic-canvas-template-card:hover:not(:disabled) .magic-canvas-template-card-title{color:var(--color-on-surface)}.magic-canvas-template-card-meta{width:100%;margin-top:-5px;overflow:hidden;color:var(--color-muted);font-size:10px;line-height:15px;text-overflow:ellipsis;white-space:nowrap}.magic-canvas-template-preview{position:relative;width:100%;aspect-ratio:1;display:block;overflow:hidden;border:1px solid var(--color-outline);border-radius:12px;background-color:var(--color-panel);background-image:radial-gradient(circle,rgba(255,255,255,.14) .75px,transparent .85px);background-size:9px 9px;transition:border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)}.magic-canvas-template-card:hover:not(:disabled) .magic-canvas-template-preview{border-color:var(--color-outline);transform:translateY(-1px)}.magic-canvas-template-preview-glow{position:absolute;width:72%;height:72%;left:14%;top:14%;border-radius:50%;background:var(--template-preview-color);opacity:.13;filter:blur(25px)}.magic-canvas-template-preview-node{position:absolute;z-index:2;display:block;border:1px solid color-mix(in srgb,var(--template-preview-color) 42%,var(--color-outline));border-radius:5px;background:linear-gradient(145deg,color-mix(in srgb,var(--template-preview-color) 20%,#262626),#171717 68%);box-shadow:0 7px 16px rgba(0,0,0,.36)}.magic-canvas-template-preview-node:after,.magic-canvas-template-preview-node:before{content:"";position:absolute;left:17%;height:3px;border-radius:3px;background:color-mix(in srgb,var(--color-on-surface) 32%,transparent)}.magic-canvas-template-preview-node:before{top:27%;width:56%}.magic-canvas-template-preview-node:after{top:46%;width:38%;opacity:.48}.magic-canvas-template-preview-node.source{left:12%;top:36%;width:30%;height:28%}.magic-canvas-template-preview-node.target{left:61%;width:27%;height:25%}.magic-canvas-template-preview-node.target-one{top:16%}.magic-canvas-template-preview-node.target-two{top:58%}.magic-canvas-template-preview-node.target-three{display:none}.magic-canvas-template-preview-line{position:absolute;z-index:1;left:37%;width:31%;height:1px;display:block;background:color-mix(in srgb,var(--template-preview-color) 58%,color-mix(in srgb,var(--color-on-surface) 16%,transparent));transform-origin:left center}.magic-canvas-template-preview-line.line-one{top:48%;transform:rotate(-27deg)}.magic-canvas-template-preview-line.line-two{top:54%;transform:rotate(28deg)}.magic-canvas-template-preview-line.line-three{display:none}.magic-canvas-template-preview-badge{position:absolute;z-index:3;right:7px;bottom:7px;padding:3px 6px;border:1px solid var(--color-outline);border-radius:7px;background:rgba(15,15,16,.72);color:var(--color-muted);font-size:8px;line-height:1}.magic-canvas-template-preview.tone-amber{--template-preview-color:#f59e0b}.magic-canvas-template-preview.tone-violet{--template-preview-color:#8b5cf6}.magic-canvas-template-preview.tone-cyan{--template-preview-color:#06b6d4}.magic-canvas-template-preview.tone-rose{--template-preview-color:#f43f5e}.magic-canvas-template-preview.tone-blue{--template-preview-color:#3b82f6}.magic-canvas-template-preview.tone-lime{--template-preview-color:#84cc16}.magic-canvas-template-preview.layout-gallery .source,.magic-canvas-template-preview.layout-variants .source{left:8%;top:38%;width:24%;height:24%}.magic-canvas-template-preview.layout-gallery .target,.magic-canvas-template-preview.layout-variants .target{width:22%;height:30%}.magic-canvas-template-preview.layout-gallery .target-one,.magic-canvas-template-preview.layout-variants .target-one{left:42%;top:13%}.magic-canvas-template-preview.layout-gallery .target-two,.magic-canvas-template-preview.layout-variants .target-two{left:70%;top:35%}.magic-canvas-template-preview.layout-gallery .target-three,.magic-canvas-template-preview.layout-variants .target-three{left:42%;top:58%;display:block}.magic-canvas-template-preview.layout-gallery .line-one,.magic-canvas-template-preview.layout-variants .line-one{left:29%;top:48%;width:23%;transform:rotate(-39deg)}.magic-canvas-template-preview.layout-gallery .line-two,.magic-canvas-template-preview.layout-variants .line-two{left:29%;top:51%;width:44%;transform:rotate(0)}.magic-canvas-template-preview.layout-gallery .line-three,.magic-canvas-template-preview.layout-variants .line-three{left:29%;top:54%;width:23%;display:block;transform:rotate(39deg)}.magic-canvas-template-preview.layout-video .source{left:7%;top:39%;width:22%;height:23%}.magic-canvas-template-preview.layout-video .target-one{left:39%;top:31%;width:27%;height:31%}.magic-canvas-template-preview.layout-video .target-two{left:75%;top:34%;width:19%;height:25%}.magic-canvas-template-preview.layout-video .line-one{left:27%;top:50%;width:14%;transform:rotate(0)}.magic-canvas-template-preview.layout-video .line-two{left:64%;top:48%;width:13%;transform:rotate(0)}.magic-canvas-template-preview.layout-chain .source{left:8%;top:36%;width:23%;height:27%}.magic-canvas-template-preview.layout-chain .target-one{left:39%;top:36%;width:23%;height:27%}.magic-canvas-template-preview.layout-chain .target-two{left:70%;top:32%;width:22%;height:35%}.magic-canvas-template-preview.layout-chain .line-one{left:29%;top:50%;width:12%;transform:rotate(0)}.magic-canvas-template-preview.layout-chain .line-two{left:60%;top:50%;width:12%;transform:rotate(0)}.magic-canvas-template-preview.layout-grid .source,.magic-canvas-template-preview.layout-grid .target{width:25%;height:25%}.magic-canvas-template-preview.layout-grid .source{left:21%;top:18%}.magic-canvas-template-preview.layout-grid .target-one{left:55%;top:18%}.magic-canvas-template-preview.layout-grid .target-two{left:21%;top:55%}.magic-canvas-template-preview.layout-grid .target-three{left:55%;top:55%;display:block}.magic-canvas-template-preview.layout-grid .magic-canvas-template-preview-line{display:none}.magic-canvas-template-applying{position:absolute;inset:0 0 24px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;background:rgba(9,9,11,.78);color:var(--color-on-surface);font-size:11px}.magic-canvas-template-empty{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--color-muted);text-align:center}.magic-canvas-template-empty strong{color:var(--color-muted);font-size:14px;font-weight:600}.magic-canvas-template-empty p{margin:0;font-size:12px}.magic-canvas-template-empty button{min-height:32px;margin-top:4px;padding:0 13px;border:0;border-radius:9px;background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-on-surface);font-size:12px;cursor:pointer}.magic-canvas-template-panel button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.magic-canvas-template-search input:focus-visible{outline:0}.magic-canvas-custom-template-preview{position:relative;width:100%;aspect-ratio:1;display:block;overflow:hidden;border:1px solid var(--color-outline);border-radius:12px;background-color:var(--color-panel);background-image:radial-gradient(circle,rgba(255,255,255,.12) .75px,transparent .85px);background-size:9px 9px;transition:border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)}.magic-canvas-template-card:hover:not(:disabled) .magic-canvas-custom-template-preview{border-color:var(--color-outline);transform:translateY(-1px)}.magic-canvas-custom-template-preview.large{width:112px;aspect-ratio:4/5;flex:0 0 112px;border-radius:10px}.magic-canvas-custom-template-cover{position:absolute;inset:0;background-position:50%;background-size:cover;filter:saturate(.78) brightness(.72)}.magic-canvas-custom-template-scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(9,9,11,.88))}.magic-canvas-custom-template-flow span{position:absolute;z-index:1;width:25%;height:24%;border:1px solid var(--color-outline);border-radius:5px;background:rgba(63,63,70,.86);box-shadow:0 8px 18px rgba(0,0,0,.35)}.magic-canvas-custom-template-flow span:first-child{left:12%;top:38%;width:30%}.magic-canvas-custom-template-flow span:nth-child(2){right:12%;top:17%}.magic-canvas-custom-template-flow span:nth-child(3){right:12%;bottom:17%}.magic-canvas-custom-template-count{position:absolute;z-index:3;left:8px;bottom:8px;color:var(--color-on-surface);font-size:10px;font-weight:600}.magic-canvas-custom-template-types{position:absolute;z-index:3;right:7px;bottom:7px;display:flex;gap:3px}.magic-canvas-custom-template-types span{padding:2px 4px;border-radius:5px;background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-muted);font-size:7px}.magic-canvas-custom-template-preview.large .magic-canvas-custom-template-count{font-size:11px}.magic-canvas-custom-template-preview.large .magic-canvas-custom-template-types{left:7px;right:auto;bottom:25px}.magic-canvas-workspace .react-flow__node-group{padding:0;box-sizing:border-box;border:0;border-radius:16px;background-color:transparent;color:inherit;text-align:left}.magic-canvas-workspace .react-flow__node-group.selectable.selected,.magic-canvas-workspace .react-flow__node-group.selectable:focus,.magic-canvas-workspace .react-flow__node-group.selectable:focus-visible,.magic-canvas-workspace .react-flow__node-group.selectable:hover{box-shadow:none}.magic-canvas-group-node{position:relative;width:100%;height:100%;box-sizing:border-box;border:1px solid transparent;border-radius:16px;background:color-mix(in srgb,var(--magic-canvas-group-color) 18%,transparent);box-shadow:0 0 0 .5px rgba(26,25,43,.72);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.magic-canvas-group-node.selected{border:2px solid var(--color-primary);background:color-mix(in srgb,var(--magic-canvas-group-color) 31%,transparent);box-shadow:0 0 0 .5px rgba(26,25,43,.92)}.magic-canvas-group-node .magic-canvas-node-label{top:-28px;height:28px;padding-bottom:8px;font-size:14px}.magic-canvas-group-node .magic-canvas-node-label button,.magic-canvas-group-node .magic-canvas-node-label span{font-size:14px;font-weight:400;line-height:20px}.magic-canvas-workspace .react-flow__resize-control.line.magic-canvas-group-resize-line{z-index:4;border-color:transparent}.magic-canvas-workspace .react-flow__resize-control.line.magic-canvas-group-resize-line.left,.magic-canvas-workspace .react-flow__resize-control.line.magic-canvas-group-resize-line.right{width:12px}.magic-canvas-workspace .react-flow__resize-control.line.magic-canvas-group-resize-line.bottom,.magic-canvas-workspace .react-flow__resize-control.line.magic-canvas-group-resize-line.top{height:12px}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-group-resize-handle{z-index:5;width:18px;height:18px;border:0;border-radius:0;background:transparent}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-group-resize-handle:before{content:"";position:absolute;inset:3px;box-sizing:border-box;border:0 solid rgba(245,245,245,.82)}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-group-resize-handle.top.left:before{border-top-width:2px;border-left-width:2px;border-top-left-radius:7px}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-group-resize-handle.top.right:before{border-top-width:2px;border-right-width:2px;border-top-right-radius:7px}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-group-resize-handle.bottom.left:before{border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:7px}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-group-resize-handle.bottom.right:before{border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:7px}.magic-canvas-node-toolbar{box-sizing:border-box;height:48px;min-height:48px;padding:4px;display:flex;align-items:center;gap:2px;overflow:visible;border:1px solid var(--color-outline);border-radius:999px;background:rgba(69,69,69,.8);box-shadow:none;-webkit-backdrop-filter:blur(16px)}.magic-canvas-toolbar-button{position:relative;z-index:0;isolation:isolate;height:40px;min-width:40px;padding:0 10px;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:7px;border:0;border-radius:999px;outline:0;background:transparent;color:var(--color-on-surface);font-size:12px;line-height:1;white-space:nowrap;cursor:pointer;transition:color .2s cubic-bezier(.25,.8,.25,1),opacity .15s ease,transform .15s ease}.magic-canvas-toolbar-button:before{content:"";position:absolute;z-index:-1;inset:0;border:1px solid transparent;border-radius:inherit;background:radial-gradient(200% 140% at 50% 40%,var(--color-panel) 16%,#656766 85%) padding-box,conic-gradient(#5d5d5d 0deg,rgba(106,106,106,.1) 70deg,#909090 180deg,rgba(144,144,144,.1) 290deg,#5d5d5d 1turn) border-box;box-shadow:0 2px 8px rgba(0,0,0,.3);opacity:0;transition:opacity .2s cubic-bezier(.25,.8,.25,1);pointer-events:none}.magic-canvas-toolbar-button.is-active,.magic-canvas-toolbar-button:focus-visible,.magic-canvas-toolbar-button:hover:not(:disabled){color:var(--color-primary)}.magic-canvas-toolbar-button:focus-visible,.magic-canvas-toolbar-button:hover:not(:disabled){z-index:2}.magic-canvas-toolbar-button.is-active:before,.magic-canvas-toolbar-button:focus-visible:before,.magic-canvas-toolbar-button:hover:not(:disabled):before{opacity:1}.magic-canvas-toolbar-button:active:not(:disabled){transform:scale(.94)}.magic-canvas-toolbar-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.magic-canvas-toolbar-button:disabled{opacity:.36;cursor:not-allowed}.magic-canvas-toolbar-button.icon-only{width:40px;padding:0}.magic-canvas-toolbar-button.text-button{min-width:40px;padding:0 10px}.magic-canvas-toolbar-button.danger{color:#ff968a}.magic-canvas-toolbar-button.danger:focus-visible,.magic-canvas-toolbar-button.danger:hover:not(:disabled){color:#ffc3bb}.magic-canvas-toolbar-button>svg{position:relative;z-index:1;width:18px;height:18px;stroke-width:1.8}.magic-canvas-toolbar-button[data-tooltip]:after{content:attr(data-tooltip);position:absolute;z-index:60;left:50%;bottom:calc(100% + 10px);padding:6px 10px;border:1px solid var(--color-outline);border-radius:10px;background:var(--color-control);box-shadow:0 10px 24px rgba(0,0,0,.34);color:var(--color-on-surface);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;opacity:0;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.magic-canvas-toolbar-button[data-tooltip]:focus-visible:after,.magic-canvas-toolbar-button[data-tooltip]:hover:after{opacity:1;transform:translate(-50%)}.magic-canvas-toolbar-divider{width:1px;height:18px;margin:0 4px;flex:0 0 auto;background:color-mix(in srgb,var(--color-on-surface) 12%,transparent)}.magic-canvas-group-toolbar-shell{max-width:calc(100vw - 24px)}.magic-canvas-group-toolbar-color{width:20px;height:20px;flex:0 0 auto;border:1px solid var(--color-outline);border-radius:50%}.magic-canvas-group-color-popover,.magic-canvas-group-layout-menu{position:absolute;top:56px;z-index:3;border:1px solid var(--color-outline);border-radius:12px;background:var(--color-control);box-shadow:0 18px 48px rgba(0,0,0,.48)}.magic-canvas-group-color-popover{left:0;padding:10px;display:flex;align-items:center;gap:8px}.magic-canvas-group-color-popover>button{position:relative;width:24px;height:24px;padding:0;flex:0 0 24px;border:1px solid var(--color-outline);border-radius:50%;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.magic-canvas-group-color-popover>button:hover{transform:scale(1.1)}.magic-canvas-group-color-popover>button.selected{box-shadow:0 0 0 2px #202020,0 0 0 4px var(--color-primary)}.magic-canvas-group-color-popover .reset-color{background:#fafafa}.magic-canvas-group-color-popover .reset-color span{position:absolute;left:4px;top:11px;width:16px;height:2px;border-radius:2px;background:rgba(63,63,70,.55);transform:rotate(-45deg)}.magic-canvas-group-color-popover>button:focus-visible,.magic-canvas-group-layout-menu button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.magic-canvas-group-layout-menu{left:44px;min-width:128px;padding:6px}.magic-canvas-group-layout-menu button{width:100%;min-height:36px;padding:0 10px;display:flex;align-items:center;gap:8px;border:0;border-radius:8px;background:transparent;color:var(--color-muted);font-size:12px;cursor:pointer}.magic-canvas-create-template-layer{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:20px;background:var(--color-control)}.magic-canvas-create-template-dialog{width:min(500px,calc(100vw - 32px));overflow:hidden;border:1px solid var(--color-outline);border-radius:13px;background:rgba(29,29,32,.98);color:var(--color-on-surface);box-shadow:0 26px 90px rgba(0,0,0,.62);animation:magic-canvas-template-dialog-in .18s cubic-bezier(.22,1,.36,1)}.magic-canvas-create-template-dialog>header{min-height:52px;padding:0 12px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-outline)}.magic-canvas-create-template-tabs{height:52px;display:flex;align-items:end;gap:18px}.magic-canvas-create-template-tabs span{height:100%;margin:0;padding-top:17px;border-bottom:2px solid transparent;color:var(--color-muted);font-size:13px;font-weight:500}.magic-canvas-create-template-tabs span.active{border-bottom-color:var(--color-primary);color:var(--color-primary)}.magic-canvas-create-template-dialog>header>button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--color-muted);cursor:pointer}.magic-canvas-create-template-dialog>header>button:hover{background:color-mix(in srgb,var(--color-on-surface) 8%,transparent);color:var(--color-on-surface)}.magic-canvas-create-template-body{min-height:298px;padding:20px 16px 14px;display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start;gap:16px}.magic-canvas-create-template-cover-field{width:112px}.magic-canvas-create-template-cover-field>input{display:none}.magic-canvas-create-template-cover-picker{position:relative;width:112px;padding:0;display:block;overflow:hidden;border:0;border-radius:10px;background:transparent;cursor:pointer}.magic-canvas-create-template-cover-picker:disabled{cursor:wait}.magic-canvas-create-template-cover-picker .magic-canvas-custom-template-preview{pointer-events:none}.magic-canvas-create-template-cover-overlay{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:10px;background:var(--color-control);color:var(--color-on-surface);font-size:11px;opacity:0;transition:opacity .15s ease}.magic-canvas-create-template-cover-picker:disabled .magic-canvas-create-template-cover-overlay,.magic-canvas-create-template-cover-picker:focus-visible .magic-canvas-create-template-cover-overlay,.magic-canvas-create-template-cover-picker:hover .magic-canvas-create-template-cover-overlay{opacity:1}.magic-canvas-create-template-form{min-width:0;display:flex;flex-direction:column;gap:14px}.magic-canvas-create-template-form label{position:relative;display:flex;flex-direction:column;gap:7px;color:var(--color-muted);font-size:12px}.magic-canvas-create-template-form label>small{position:absolute;right:9px;top:34px;color:var(--color-muted);font-size:9px}.magic-canvas-create-template-form input,.magic-canvas-create-template-form textarea,.magic-canvas-create-template-tag-list>input{width:100%;border:1px solid var(--color-outline);border-radius:9px;outline:0;background:rgba(63,63,70,.44);color:var(--color-on-surface);font:inherit}.magic-canvas-create-template-form label>input{height:38px;padding:0 45px 0 11px}.magic-canvas-create-template-form textarea{min-height:88px;padding:10px 11px;resize:vertical;line-height:1.5}.magic-canvas-create-template-form input:focus-visible,.magic-canvas-create-template-form textarea:focus-visible,.magic-canvas-create-template-tag-list>input:focus-visible{border-color:var(--color-outline);box-shadow:0 0 0 2px rgba(255,255,255,.08)}.magic-canvas-create-template-form input::placeholder,.magic-canvas-create-template-form textarea::placeholder{color:var(--color-muted)}.magic-canvas-create-template-tags>div:first-child{display:flex;justify-content:space-between;color:var(--color-muted);font-size:12px}.magic-canvas-create-template-tags small{color:var(--color-muted);font-size:10px}.magic-canvas-create-template-tag-list{min-height:34px;margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}.magic-canvas-create-template-tag-list button{min-height:30px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--color-outline);border-radius:8px;background:color-mix(in srgb,var(--color-on-surface) 8%,transparent);color:var(--color-muted);font-size:11px;cursor:pointer}.magic-canvas-create-template-tag-list button.add-tag{background:#9bd9f5;color:#14212a}.magic-canvas-create-template-tag-list button:disabled{opacity:.38;cursor:not-allowed}.magic-canvas-create-template-tag-list>input{width:116px;height:30px;padding:0 8px}.magic-canvas-create-template-tag-picker{margin-top:8px;padding:10px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--color-outline);border-radius:10px;background:rgba(15,15,17,.72)}.magic-canvas-create-template-tag-picker>span{color:var(--color-muted);font-size:10px}.magic-canvas-create-template-tag-picker>div:not(.magic-canvas-create-template-custom-tag){display:flex;flex-wrap:wrap;gap:6px}.magic-canvas-create-template-tag-picker>div:not(.magic-canvas-create-template-custom-tag) button{min-height:27px;padding:0 8px;border:1px solid var(--color-outline);border-radius:7px;background:color-mix(in srgb,var(--color-on-surface) 5%,transparent);color:var(--color-muted);font-size:10px;cursor:pointer}.magic-canvas-create-template-tag-picker>div:not(.magic-canvas-create-template-custom-tag) button.selected{border-color:var(--color-primary);background:rgba(142,205,245,.16);color:#d9f2ff}.magic-canvas-create-template-tag-picker button:disabled{opacity:.34;cursor:not-allowed}.magic-canvas-create-template-custom-tag{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:6px}.magic-canvas-create-template-custom-tag input{width:100%;height:30px;padding:0 8px;border:1px solid var(--color-outline);border-radius:7px;outline:0;background:rgba(63,63,70,.42);color:var(--color-on-surface);font-size:10px}.magic-canvas-create-template-custom-tag button{width:30px;height:30px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-on-surface);cursor:pointer}.magic-canvas-create-template-custom-tag input:focus-visible{border-color:var(--color-outline);box-shadow:0 0 0 2px rgba(255,255,255,.08)}.magic-canvas-create-template-form [role=alert]{margin:-5px 0 0;color:#fca5a5;font-size:11px}.magic-canvas-create-template-dialog>footer{min-height:64px;padding:10px 14px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid var(--color-outline)}.magic-canvas-create-template-confirm{min-width:84px;min-height:38px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:18px;background:#8ecdf5;color:#10212d;font-size:12px;font-weight:600;cursor:pointer}.magic-canvas-create-template-confirm:hover:not(:disabled){filter:brightness(1.07)}.magic-canvas-create-template-confirm:disabled{opacity:.38;cursor:not-allowed}.magic-canvas-create-template-dialog button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@keyframes magic-canvas-template-dialog-in{0%{opacity:0;transform:translateY(8px) scale(.985)}}.magic-canvas-node-menu{position:fixed;z-index:80;left:78px;top:50%;width:244px;padding:8px;transform:translateY(-50%);border-radius:10px}.magic-canvas-node-menu-section,.magic-canvas-node-menu-title{padding:4px 7px 8px;color:var(--color-muted);font-size:10px}.magic-canvas-node-menu-section{margin-top:7px;padding-top:9px;border-top:1px solid var(--color-outline)}.magic-canvas-node-menu>button{width:100%;min-height:56px;padding:7px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;column-gap:10px;align-items:center;border:0;border-radius:11px;background:transparent;color:var(--color-muted);text-align:left;transition:background .14s ease}.magic-canvas-node-menu>button:disabled{opacity:.35}.magic-canvas-node-menu>button>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--color-on-surface) 7.5%,transparent)}.magic-canvas-node-menu strong{align-self:end;font-size:12px}.magic-canvas-node-menu small{align-self:start;color:var(--color-muted);font-size:9px}.magic-canvas-empty-state{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.magic-canvas-empty-hint{display:flex;align-items:center;gap:9px;color:var(--color-muted);font-size:13px}.magic-canvas-empty-hint span{height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border-radius:10px;background:color-mix(in srgb,var(--color-on-surface) 10%,transparent);color:var(--color-on-surface);font-weight:600}.magic-canvas-empty-hint p{margin:0}.magic-canvas-empty-actions{margin-top:13px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;pointer-events:auto}.magic-canvas-empty-actions button{height:38px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--color-outline);border-radius:9px;background:var(--color-control);color:var(--color-muted);font-size:11px;transition:background .14s ease,color .14s ease,border-color .14s ease}.magic-canvas-empty-actions button:hover{border-color:var(--color-outline);background:var(--color-control);color:var(--color-on-surface)}.magic-canvas-viewport-cluster{position:absolute;z-index:44;left:16px;bottom:16px;display:flex;align-items:center;gap:8px}.magic-canvas-zoom-pill{height:42px;padding:4px;display:flex;align-items:center;gap:1px;border:1px solid var(--color-outline);border-radius:14px;background:var(--color-control);box-shadow:0 10px 28px rgba(0,0,0,.28)}.magic-canvas-zoom-pill button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--color-muted);transition:background .14s ease,color .14s ease}.magic-canvas-zoom-pill button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.magic-canvas-zoom-pill button.active,.magic-canvas-zoom-pill button:hover{background:color-mix(in srgb,var(--color-on-surface) 13%,transparent);color:var(--color-primary)}.magic-canvas-zoom-pill input[type=range]{width:88px;height:3px;margin:0 7px;accent-color:#f1f1f1}.magic-canvas-shortcut-layer{position:fixed;z-index:43;inset:0}.magic-canvas-shortcuts{z-index:1;left:16px;bottom:66px;max-height:min(540px,calc(100vh - 98px))}.magic-canvas-shortcuts,.magic-canvas-tool-drawer{position:absolute;width:286px;overflow:hidden;border-radius:12px}.magic-canvas-tool-drawer{z-index:46;left:82px;top:50%;max-height:min(540px,calc(100vh - 112px));transform:translateY(-50%)}.magic-canvas-shortcuts header,.magic-canvas-tool-drawer>header{height:50px;padding:0 10px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-outline);font-size:13px}.magic-canvas-shortcuts header button,.magic-canvas-tool-drawer>header button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--color-muted)}.magic-canvas-shortcuts header button:hover,.magic-canvas-tool-drawer>header button:hover{background:color-mix(in srgb,var(--color-on-surface) 8%,transparent);color:var(--color-on-surface)}.magic-canvas-shortcuts ul{margin:0;padding:10px 14px 14px;list-style:none}.magic-canvas-shortcuts li{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--color-muted);font-size:11px}.magic-canvas-shortcuts kbd{padding:3px 6px;border:1px solid var(--color-outline);border-radius:5px;background:color-mix(in srgb,var(--color-on-surface) 6%,transparent);color:var(--color-muted);font-size:10px}.magic-canvas-tool-drawer-content{max-height:470px;overflow-y:auto}.magic-canvas-workspace .react-flow__minimap{left:16px!important;bottom:70px!important;width:190px;height:108px;overflow:hidden;border:1px solid var(--color-outline);border-radius:14px;background:var(--color-control);box-shadow:0 16px 42px rgba(0,0,0,.34)}.magic-canvas-node{position:relative;border-radius:16px;color:var(--color-on-surface);transition:opacity .18s ease}.magic-canvas-node-frame{overflow:hidden;border:1px solid color-mix(in srgb,var(--color-on-surface) 10%,transparent)!important;border-radius:16px!important;background:color-mix(in srgb,var(--color-panel) 94%,var(--color-on-surface) 6%);box-shadow:none;transition:border-color .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1)}.magic-canvas-node.selected .magic-canvas-node-frame{border-color:var(--color-primary)!important;box-shadow:0 0 0 2px var(--color-primary),0 18px 42px rgba(0,0,0,.42)}.magic-canvas-text-node .tiptap,.magic-canvas-text-node .tiptap:focus,.magic-canvas-text-node .tiptap:focus-visible,.magic-canvas-text-node [data-tiptap-editor],.magic-canvas-text-node textarea:focus,.magic-canvas-text-node textarea:focus-visible{border:0!important;outline:0!important;box-shadow:none!important}.magic-canvas-custom-scrollbar{scrollbar-gutter:stable}[contenteditable=true][data-placeholder]:empty:before{color:var(--color-muted);content:attr(data-placeholder);pointer-events:none}.magic-canvas-node.magic-canvas-layer-asset{border-radius:0}.magic-canvas-node.magic-canvas-layer-asset .magic-canvas-layer-asset-frame,.magic-canvas-node.magic-canvas-layer-asset.selected .magic-canvas-layer-asset-frame{overflow:visible;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.magic-canvas-node.magic-canvas-layer-asset.selected .magic-canvas-layer-asset-frame{box-shadow:0 0 0 2px var(--color-primary)!important}.magic-canvas-node-label{position:absolute;left:4px;top:-32px;z-index:10;max-width:100%;height:32px;padding-bottom:8px;display:flex;align-items:center;gap:4px;color:var(--color-muted);font-size:16px;pointer-events:auto}.magic-canvas-node-label button,.magic-canvas-node-label span{overflow:hidden;min-width:0;max-width:100%;color:inherit;font-size:16px;font-weight:500;line-height:24px;text-overflow:ellipsis;white-space:nowrap}.magic-canvas-node-label button{cursor:text;background:transparent;border:0;padding:0;text-align:left}.magic-canvas-node-label input{width:min(220px,100%);height:24px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--color-on-surface);padding:0;font:inherit;line-height:inherit;outline:none}.magic-canvas-node-label input:focus-visible{border:0;box-shadow:none;outline:none}.magic-canvas-workspace .react-flow__resize-control.handle{width:8px;height:8px;border-color:#f5f5f5;background:var(--color-panel)}.magic-canvas-workspace .react-flow__resize-control.line{border-color:transparent}.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-corner-resize{width:28px;height:28px;z-index:15;border:0;border-radius:0;background:transparent;color:var(--color-on-surface);opacity:0;transition:opacity .12s ease}.magic-canvas-corner-resize svg{width:100%;height:100%;pointer-events:none}.magic-canvas-main[data-touch-input=true] .magic-canvas-node.selected .magic-canvas-corner-resize{opacity:1;touch-action:none}.magic-canvas-main[data-touch-input=true] .magic-canvas-node:not(.selected) .magic-canvas-corner-resize{pointer-events:none}.magic-canvas-main[data-touch-input=true] .magic-canvas-corner-resize:before{content:"";position:absolute;inset:-8px}.magic-canvas-main{overscroll-behavior:contain}.magic-canvas-floating-toolbar,.magic-canvas-floating-toolbar>.magic-canvas-node-toolbar{width:max-content;max-width:none}.magic-canvas-corner-resize.top-left svg{transform:rotate(180deg)}.magic-canvas-corner-resize.top-right svg{transform:rotate(-90deg)}.magic-canvas-corner-resize.bottom-left svg{transform:rotate(90deg)}.magic-canvas-workspace .react-flow__node.resizing .magic-canvas-corner-resize,.magic-canvas-workspace .react-flow__resize-control.handle.magic-canvas-corner-resize:hover{opacity:1}@media (hover:none){.magic-canvas-workspace .magic-canvas-node.selected .magic-canvas-corner-resize{opacity:1}}.magic-canvas-generation-panel[data-layout=node]{min-height:200px;box-shadow:0 18px 50px rgba(0,0,0,.36)}.magic-canvas-generation-panel[data-layout=node] textarea{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}.magic-canvas-placeholder-icon{width:48px;height:48px;flex-shrink:0;color:var(--color-on-surface);opacity:.2}.magic-canvas-workspace .magic-canvas-connection-handle{width:24px!important;height:24px!important;padding:0!important;border:2px solid!important;border-radius:50%!important;background:transparent!important;color:var(--color-muted)!important;box-shadow:none!important;cursor:crosshair;transition:color .15s ease}.magic-canvas-connection-handle:focus-visible,.magic-canvas-connection-handle:hover{color:var(--color-on-surface)!important}.magic-canvas-node .react-flow__handle:after{content:"";position:absolute;top:50%;width:80px;height:80px;border-radius:50%;transform:translateY(-50%)}.magic-canvas-node .react-flow__handle-left:after{right:-1px}.magic-canvas-node .react-flow__handle-right:after{left:-1px}.magic-canvas-workspace .react-flow__edge-path{stroke:rgba(245,245,245,.26)!important;stroke-width:2!important}.magic-canvas-workspace .react-flow__edge.magic-canvas-edge-related .react-flow__edge-path,.magic-canvas-workspace .react-flow__edge.selected .react-flow__edge-path,.magic-canvas-workspace .react-flow__edge:hover .react-flow__edge-path{stroke:rgba(245,245,245,.7)!important;stroke-width:2.4!important;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--color-primary) 34%,transparent))}.magic-canvas-workspace .magic-canvas-task-edge-flow{fill:none;stroke:var(--color-primary);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 100;stroke-dashoffset:0;vector-effect:non-scaling-stroke;pointer-events:none;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--color-primary) 72%,transparent));animation:magic-canvas-task-edge-flow 1.6s linear infinite}@keyframes magic-canvas-task-edge-flow{to{stroke-dashoffset:-106}}@media (prefers-reduced-motion:reduce){.magic-canvas-workspace .magic-canvas-task-edge-flow{animation:none;stroke-dasharray:none;opacity:.72}}.magic-canvas-template-panel.expanded{left:50%;top:50%;width:min(1100px,calc(100vw - 48px));height:min(700px,calc(100dvh - 48px));flex-direction:row;transform:translate(-50%,-50%);border-color:var(--color-outline);border-radius:18px;background:var(--color-surface);box-shadow:0 28px 100px rgba(0,0,0,.68);transition:none}.magic-canvas-template-card{overflow:visible;cursor:default}.magic-canvas-template-card-visual{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:12px;background:var(--color-panel)}.magic-canvas-template-card-cover{width:100%;height:100%;padding:0;display:block;border:0;background:transparent;cursor:pointer}.magic-canvas-template-card-cover .magic-canvas-custom-template-preview,.magic-canvas-template-card-cover .magic-canvas-template-preview,.magic-canvas-template-card-cover>span{width:100%;height:100%;aspect-ratio:auto}.magic-canvas-template-card-overlay{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:inherit;background:rgba(7,7,8,.58);opacity:0;pointer-events:none;transition:opacity .15s ease}.magic-canvas-template-card:focus-within .magic-canvas-template-card-overlay,.magic-canvas-template-card:hover .magic-canvas-template-card-overlay{opacity:1}.magic-canvas-template-card-overlay:focus-within,.magic-canvas-template-card:hover .magic-canvas-template-card-overlay{pointer-events:auto}.magic-canvas-template-card-overlay button{min-width:48px;height:34px;padding:0 4px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--color-outline);border-radius:9px;background:rgba(34,34,37,.9);color:var(--color-on-surface);font-size:12px;line-height:1;white-space:nowrap;cursor:pointer}.magic-canvas-template-card-overlay button:last-child{border-color:var(--color-outline);background:var(--color-primary);color:var(--color-on-primary)}.magic-canvas-template-card-overlay button:disabled{opacity:.52;cursor:wait}.magic-canvas-template-card .magic-canvas-template-card-title{width:100%;min-height:18px;padding:0;border:0;background:transparent;color:var(--color-muted);text-align:left;cursor:pointer}.magic-canvas-template-card:hover .magic-canvas-template-card-title{color:var(--color-on-surface)}.magic-canvas-template-card .magic-canvas-template-applying{inset:0;z-index:6}.magic-canvas-template-status{position:absolute;z-index:3;top:7px;right:7px;padding:3px 6px;border:1px solid var(--color-outline);border-radius:6px;background:rgba(15,15,16,.82);color:var(--color-muted);font-size:9px;line-height:1}.magic-canvas-template-review-badge.status-pending,.magic-canvas-template-status.status-pending{color:var(--color-warning)}.magic-canvas-template-review-badge.status-published,.magic-canvas-template-status.status-published{color:var(--color-success)}.magic-canvas-template-review-badge.status-rejected,.magic-canvas-template-status.status-rejected{color:var(--color-error)}.magic-canvas-template-review-badge.status-hidden,.magic-canvas-template-review-badge.status-withdrawn,.magic-canvas-template-status.status-hidden,.magic-canvas-template-status.status-withdrawn{color:var(--color-muted)}.magic-canvas-template-error,.magic-canvas-template-notice,.magic-canvas-template-success{margin:0 16px 8px;padding:8px 10px;border:1px solid var(--color-outline);background:color-mix(in srgb,var(--color-on-surface) 3.5000000000000004%,transparent);color:var(--color-muted);font-size:11px;line-height:16px}.magic-canvas-template-success{border-color:rgba(69,196,125,.24);background:rgba(69,196,125,.08);color:var(--color-success)}.magic-canvas-template-error{border-color:rgba(238,96,96,.24);background:rgba(238,96,96,.08);color:var(--color-error)}.magic-canvas-template-manager-nav{width:255px;flex:0 0 255px;padding:20px 16px;overflow-y:auto;border-right:1px solid var(--color-outline);background:var(--color-control)}.magic-canvas-template-manager-nav button{width:100%;min-height:37px;padding:0 12px;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;color:var(--color-muted);font-size:13px;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}.magic-canvas-template-manager-nav button:hover{color:var(--color-on-surface)}.magic-canvas-template-manager-nav button.active{background:var(--color-control);color:var(--color-primary)}.magic-canvas-template-manager-divider{height:1px;margin:10px 0 14px;background:color-mix(in srgb,var(--color-on-surface) 12%,transparent)}.magic-canvas-template-manager-nav strong{min-height:32px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;color:var(--color-on-surface);font-size:13px;font-weight:600}.magic-canvas-template-manager-nav strong~button{padding-left:20px}.magic-canvas-template-manager-main{min-width:0;flex:1;display:flex;flex-direction:column;background:var(--color-surface)}.magic-canvas-template-manager-main>header{height:60px;flex:0 0 60px;padding:0 18px 0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-outline);background:var(--color-control)}.magic-canvas-template-manager-main>header h1{margin:0;color:var(--color-on-surface);font-size:20px;font-weight:650;letter-spacing:-.02em}.magic-canvas-template-manager-main>header>div{display:flex;gap:3px}.magic-canvas-template-back,.magic-canvas-template-detail-actions button,.magic-canvas-template-manager-main>header button{width:34px;height:34px;display:inline-grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--color-muted);cursor:pointer}.magic-canvas-template-back:hover,.magic-canvas-template-detail-actions button:hover,.magic-canvas-template-manager-main>header button:hover{background:color-mix(in srgb,var(--color-on-surface) 7%,transparent);color:var(--color-on-surface)}.magic-canvas-template-manager-list{min-height:0;flex:1;display:flex;flex-direction:column}.magic-canvas-template-manager-toolbar{padding:20px 24px 16px;display:flex;justify-content:flex-end;gap:8px}.magic-canvas-template-manager-toolbar .magic-canvas-template-search{width:min(345px,100%);height:38px;flex:0 1 345px;margin:0;border-color:var(--color-outline);border-radius:9px;background:var(--color-control)}.magic-canvas-template-create-button{height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:9px;background:var(--color-primary);color:var(--color-on-primary);font-size:13px;font-weight:600;cursor:pointer}.magic-canvas-template-manager-list>.magic-canvas-template-error,.magic-canvas-template-manager-list>.magic-canvas-template-notice,.magic-canvas-template-manager-list>.magic-canvas-template-success{margin:0 24px 12px}.magic-canvas-template-manager-scroll{min-height:0;flex:1;overflow-y:auto;padding:0 24px 24px}.magic-canvas-template-manager-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 14px}.magic-canvas-template-manager-grid .magic-canvas-template-card-title{font-size:13px}.magic-canvas-template-manager-grid .magic-canvas-template-empty{grid-column:1/-1}.magic-canvas-template-built-in-large{width:100%;height:100%;display:block}.magic-canvas-template-built-in-large .magic-canvas-template-preview{width:100%;height:100%;aspect-ratio:auto}.magic-canvas-template-detail,.magic-canvas-template-editor{position:relative;min-height:0;flex:1;padding:28px 24px 20px;display:flex;flex-direction:column;overflow-y:auto}.magic-canvas-template-back{margin:-8px 0 10px -8px;flex:0 0 auto}.magic-canvas-template-detail-actions{position:absolute;z-index:3;top:20px;right:24px;display:flex;gap:10px}.magic-canvas-template-detail-actions button{width:40px;height:40px;color:var(--color-muted)}.magic-canvas-template-detail-actions button:disabled{opacity:.35;cursor:not-allowed}.magic-canvas-template-detail-layout{display:grid;grid-template-columns:minmax(280px,400px) minmax(240px,1fr);gap:32px}.magic-canvas-template-detail-preview{width:100%;aspect-ratio:1;overflow:hidden;border-radius:16px;background:var(--color-panel)}.magic-canvas-template-detail-preview .magic-canvas-custom-template-preview,.magic-canvas-template-detail-preview>span{width:100%;height:100%;aspect-ratio:auto;border-radius:inherit}.magic-canvas-template-detail-copy{padding:4px 60px 0 0}.magic-canvas-template-detail-copy h2{margin:0;color:var(--color-on-surface);font-size:25px;font-weight:650}.magic-canvas-template-detail-copy time{margin-top:8px;display:block;color:var(--color-muted);font-size:13px}.magic-canvas-template-review-badge{margin-top:16px;padding:7px 10px;display:inline-flex;border-radius:8px;background:color-mix(in srgb,var(--color-on-surface) 7%,transparent);font-size:12px}.magic-canvas-template-detail-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}.magic-canvas-template-detail-tags span{padding:7px 11px;border-radius:9px;background:var(--color-control);color:var(--color-muted);font-size:12px}.magic-canvas-template-detail-copy>p{max-width:430px;margin:16px 0 0;color:var(--color-muted);font-size:14px;line-height:1.7;white-space:pre-wrap}.magic-canvas-template-detail-copy .magic-canvas-template-rejection{padding:10px 12px;border:1px solid rgba(238,96,96,.2);background:rgba(238,96,96,.08);color:var(--color-error);font-size:12px}.magic-canvas-template-detail>.magic-canvas-template-error,.magic-canvas-template-detail>.magic-canvas-template-notice,.magic-canvas-template-detail>.magic-canvas-template-success,.magic-canvas-template-editor>.magic-canvas-template-error,.magic-canvas-template-editor>.magic-canvas-template-notice,.magic-canvas-template-editor>.magic-canvas-template-success{margin:16px 0 0}.magic-canvas-template-detail>footer,.magic-canvas-template-editor>footer{margin-top:auto;padding-top:20px;display:flex;justify-content:flex-end;gap:10px}.magic-canvas-template-detail>footer button,.magic-canvas-template-editor>footer button{min-width:120px;height:38px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:19px;font-size:13px;font-weight:600;cursor:pointer}.magic-canvas-template-detail>footer button.primary,.magic-canvas-template-editor>footer button.primary{border:0;background:var(--color-primary);color:var(--color-on-primary)}.magic-canvas-template-detail>footer button.primary{width:min(364px,100%)}.magic-canvas-template-detail>footer button.secondary,.magic-canvas-template-editor>footer button.secondary{border:1px solid var(--color-outline);background:var(--color-control);color:var(--color-muted)}.magic-canvas-template-detail>footer button:disabled,.magic-canvas-template-editor>footer button:disabled{opacity:.5;cursor:wait}.magic-canvas-template-editor-layout{display:grid;grid-template-columns:256px minmax(280px,1fr);gap:36px;align-items:start;max-width:660px;margin:0 auto}.magic-canvas-template-editor-cover{position:relative;width:256px;aspect-ratio:1;overflow:hidden;border:2px dashed var(--color-primary);border-radius:14px;background:var(--color-panel)}.magic-canvas-template-editor-cover .magic-canvas-custom-template-preview,.magic-canvas-template-editor-cover>span{width:100%;height:100%;aspect-ratio:auto;border-radius:11px}.magic-canvas-template-editor-cover>button{position:absolute;z-index:4;inset:auto 10px 10px;height:34px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--color-outline);border-radius:9px;background:rgba(19,19,21,.78);color:var(--color-on-surface);font-size:12px;cursor:pointer}.magic-canvas-template-editor-fields{display:flex;flex-direction:column;gap:16px}.magic-canvas-template-editor-fields fieldset,.magic-canvas-template-editor-fields label{min-width:0;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;border:0}.magic-canvas-template-editor-fields label>span,.magic-canvas-template-editor-fields legend{width:100%;display:flex;justify-content:space-between;color:var(--color-muted);font-size:12px}.magic-canvas-template-editor-fields small{color:var(--color-muted);font-size:10px}.magic-canvas-template-editor-fields input,.magic-canvas-template-editor-fields textarea{width:100%;border:1px solid var(--color-outline);border-radius:9px;outline:0;background:var(--color-control);color:var(--color-on-surface);font-size:13px}.magic-canvas-template-editor-fields input{height:38px;padding:0 11px}.magic-canvas-template-editor-fields textarea{min-height:92px;padding:10px 11px;resize:vertical;line-height:1.55}.magic-canvas-template-editor-fields input:focus,.magic-canvas-template-editor-fields textarea:focus{border-color:color-mix(in srgb,var(--color-primary) 70%,transparent)}.magic-canvas-template-tag-options{display:flex;flex-wrap:wrap;gap:6px}.magic-canvas-template-tag-options button{min-height:30px;padding:0 9px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--color-outline);border-radius:8px;background:var(--color-control);color:var(--color-muted);font-size:11px;cursor:pointer}.magic-canvas-template-tag-options button.active{border-color:color-mix(in srgb,var(--color-primary) 50%,transparent);background:color-mix(in srgb,var(--color-primary) 16%,transparent);color:var(--color-primary)}@media (max-width:1020px){.magic-canvas-template-panel.expanded{width:calc(100vw - 24px);height:calc(100dvh - 24px)}.magic-canvas-template-manager-nav{width:190px;flex-basis:190px}.magic-canvas-template-manager-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.magic-canvas-template-detail-layout{grid-template-columns:minmax(240px,340px) minmax(220px,1fr)}}@media (max-width:720px){.magic-canvas-template-panel.expanded{left:50%;top:50%;width:calc(100vw - 16px);height:calc(100dvh - 16px);transform:translate(-50%,-50%)}.magic-canvas-template-manager-nav{width:132px;flex-basis:132px;padding:12px 8px}.magic-canvas-template-manager-nav button{padding:0 8px}.magic-canvas-template-manager-nav strong~button{padding-left:14px}.magic-canvas-template-manager-main>header{padding-inline:14px 8px}.magic-canvas-template-manager-toolbar{padding:12px}.magic-canvas-template-manager-list>.magic-canvas-template-error,.magic-canvas-template-manager-list>.magic-canvas-template-notice,.magic-canvas-template-manager-list>.magic-canvas-template-success{margin-inline:12px}.magic-canvas-template-manager-scroll{padding:0 12px 16px}.magic-canvas-template-manager-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.magic-canvas-template-detail,.magic-canvas-template-editor{padding:18px 14px 14px}.magic-canvas-template-detail-layout,.magic-canvas-template-editor-layout{grid-template-columns:1fr;gap:18px}.magic-canvas-template-detail-preview,.magic-canvas-template-editor-cover{width:min(100%,300px)}.magic-canvas-template-detail-copy{padding-right:0}}@media (hover:none){.magic-canvas-template-card-overlay{align-items:flex-end;padding-bottom:10px;opacity:1;pointer-events:auto;background:linear-gradient(180deg,transparent 48%,rgba(7,7,8,.76))}}.magic-canvas-workspace .react-flow__selection{border:1px solid var(--color-primary);border-radius:5px;background:rgba(245,245,245,.055)}.magic-canvas-workspace #canvas-context-menu,.magic-canvas-workspace #canvas-dblclick-menu,.magic-canvas-workspace .magic-canvas-dark-menu{border-color:var(--color-outline)!important;background:var(--color-control)!important;color:var(--color-muted)!important;box-shadow:0 20px 50px rgba(0,0,0,.48)!important}.magic-canvas-workspace :where(#canvas-context-menu,#canvas-dblclick-menu,.magic-canvas-dark-menu) button{width:100%;min-height:38px;padding:0 10px;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;color:var(--color-muted);font-size:11px;text-align:left;transition:background .14s ease,color .14s ease}.magic-canvas-workspace #canvas-context-menu kbd{margin-left:auto;color:var(--color-muted);font-size:9px}.magic-canvas-handle-hitbox{width:80px;height:80px;pointer-events:none;cursor:crosshair;touch-action:none}.magic-canvas-handle-magnet{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;pointer-events:auto;will-change:transform}.magic-canvas-handle-magnet[data-disabled=true]{pointer-events:none}.magic-canvas-handle-anchor{--handle-enter-x:-24px;visibility:hidden;pointer-events:none;transition:visibility 0s .3s}.magic-canvas-handle-anchor[data-direction=left]{--handle-enter-x:24px}.magic-canvas-handle-anchor .magic-canvas-connection-handle{opacity:0;transform:translateX(var(--handle-enter-x));transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .3s cubic-bezier(.34,1.56,.64,1),color .15s ease}.magic-canvas-handle-anchor[data-visible=true]{visibility:visible;transition-delay:0s}.magic-canvas-handle-anchor[data-visible=true] .magic-canvas-connection-handle{opacity:1;transform:translateX(0)}.magic-canvas-handle-anchor[data-connecting=true]{pointer-events:none}.magic-canvas-workspace:has(.react-flow__handle:active) .magic-canvas-handle-magnet{pointer-events:none}@starting-style{.magic-canvas-handle-anchor[data-visible=true] .magic-canvas-connection-handle{opacity:0;transform:translateX(var(--handle-enter-x))}}@media (prefers-reduced-motion:reduce){.magic-canvas-handle-anchor,.magic-canvas-handle-anchor .magic-canvas-connection-handle,.magic-canvas-handle-magnet{transition:none!important}}.magic-canvas-pending-edge{fill:none;stroke:#b1b1b7;stroke-width:1;stroke-linecap:round}.magic-canvas-workspace .magic-canvas-connection-menu button{min-height:56px;padding:6px 8px;gap:8px;border-radius:12px;font-size:14px}.magic-canvas-connection-menu-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--color-on-surface) 5%,transparent)}@keyframes magic-canvas-menu-in{0%{opacity:0;transform:translateY(-5px)}}@keyframes magic-canvas-pulse{0%,to{opacity:.52}50%{opacity:1}}@keyframes magic-canvas-spin{to{transform:rotate(1turn)}}@media (max-width:720px){.magic-canvas-account-cluster,.magic-canvas-project-cluster{top:max(8px,env(safe-area-inset-top))}.magic-canvas-project-cluster{max-width:calc(100% - 96px)}.magic-canvas-project-pill{min-width:0;max-width:100%}.magic-canvas-brand-button{flex:none;height:44px}.magic-canvas-project-name{min-width:0;width:116px;height:44px}.magic-canvas-project-pill>.magic-canvas-divider:last-of-type{display:none}.magic-canvas-project-menu{width:min(224px,calc(100vw - 16px))}.magic-canvas-switcher-menu{left:0;width:min(326px,calc(100vw - 16px))}.magic-canvas-account-cluster .magic-canvas-round-button,.magic-canvas-account-skeleton,.magic-canvas-credit-pill,.magic-canvas-save-state{display:none}.magic-canvas-avatar,.magic-canvas-login-pill{height:44px}.magic-canvas-avatar{width:44px}.magic-canvas-account-cluster{right:8px}.magic-canvas-project-cluster{left:8px}.magic-canvas-side-toolbar{left:8px;width:52px;max-height:calc(100% - 144px);padding:3px;overflow-y:auto}.magic-canvas-side-toolbar .magic-canvas-add-button,.magic-canvas-side-toolbar button{width:44px;height:44px;flex-shrink:0}.magic-canvas-node-menu,.magic-canvas-tool-drawer{left:64px;width:min(286px,calc(100vw - 76px))}.magic-canvas-tool-drawer{max-height:calc(100% - 144px);display:flex;flex-direction:column}.magic-canvas-tool-drawer>header{flex-shrink:0}.magic-canvas-tool-drawer-content{min-height:0}.magic-canvas-shortcuts{left:8px;bottom:calc(64px + env(safe-area-inset-bottom));width:min(286px,calc(100vw - 16px));max-height:calc(100dvh - 144px - env(safe-area-inset-bottom));overflow-y:auto}.magic-canvas-asset-panel{left:8px;width:min(372px,calc(100vw - 16px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.magic-canvas-asset-content{min-height:0}.magic-canvas-asset-panel>footer,.magic-canvas-asset-panel>header,.magic-canvas-asset-panel>nav{flex-shrink:0}.magic-canvas-template-panel{left:8px;width:min(500px,calc(100vw - 16px));height:min(500px,calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}.magic-canvas-template-panel.expanded{left:50%;width:calc(100vw - 16px);height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));flex-direction:column}.magic-canvas-template-manager-nav{width:100%;flex-basis:auto;flex-shrink:0;max-height:min(160px,28dvh);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:8px;border-right:0;border-bottom:1px solid var(--color-outline)}.magic-canvas-template-manager-nav strong{grid-column:1/-1}.magic-canvas-template-manager-divider{display:none}.magic-canvas-template-manager-main{min-height:0}.magic-canvas-template-manager-main>header{gap:8px}.magic-canvas-template-manager-main>header h1{min-width:0;font-size:17px;overflow-wrap:anywhere}.magic-canvas-template-manager-main>header>div{flex-shrink:0}.magic-canvas-template-manager-toolbar{flex-wrap:wrap}.magic-canvas-template-manager-toolbar .magic-canvas-template-search{min-width:0;flex-basis:100%}.magic-canvas-asset-panel>header button,.magic-canvas-shortcuts header button,.magic-canvas-template-actions button,.magic-canvas-template-manager-main>header button,.magic-canvas-template-manager-nav button,.magic-canvas-tool-drawer>header button{min-width:44px;min-height:44px}.magic-canvas-template-panel.expanded .magic-canvas-template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.magic-canvas-create-template-layer{padding:10px}.magic-canvas-create-template-dialog{width:min(500px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow-y:auto}.magic-canvas-create-template-body{grid-template-columns:1fr}.magic-canvas-create-template-cover-field,.magic-canvas-create-template-cover-picker{width:100%}.magic-canvas-custom-template-preview.large{width:100%;max-height:116px;aspect-ratio:3/1}.magic-canvas-viewport-cluster{left:8px;bottom:max(8px,env(safe-area-inset-bottom))}.magic-canvas-zoom-pill{height:48px}.magic-canvas-zoom-pill button{width:40px;height:40px}.magic-canvas-zoom-pill input[type=range]{display:none}.magic-canvas-empty-state{padding:80px 16px 80px 72px}.magic-canvas-empty-hint{flex-wrap:wrap;justify-content:center;text-align:center}.magic-canvas-empty-actions button{min-height:44px}}@media (max-width:1023px){.magic-canvas-project-search input,.magic-canvas-template-editor-fields input,.magic-canvas-template-editor-fields textarea,.magic-canvas-template-search input{font-size:16px}}@media (max-width:480px){.magic-canvas-template-grid,.magic-canvas-template-panel.expanded .magic-canvas-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:379px){.magic-canvas-zoom-pill{display:grid;grid-template-columns:repeat(4,40px);height:auto}.magic-canvas-zoom-pill>button{grid-column:span 2;justify-self:center}.magic-canvas-workspace{--canvas-minimap-bottom:calc(104px + env(safe-area-inset-bottom))}}@media (hover:none){.magic-canvas-asset-check{opacity:1}.magic-canvas-asset-overlay{align-items:end;padding-bottom:12px;opacity:1;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.62))}}@media (prefers-reduced-motion:reduce){.magic-canvas-workspace *,.magic-canvas-workspace :after,.magic-canvas-workspace :before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}