.canvas-welcome-preview{--preview-cycle:20s;--preview-ease:cubic-bezier(.77,0,.175,1);--preview-enter:cubic-bezier(.23,1,.32,1);position:relative;flex:none;width:min(520px,44vw);margin:0;overflow:hidden;border:1px solid #ffffff24;border-radius:16px;background:#111212;box-shadow:0 24px 80px #0004;isolation:isolate}.canvas-preview-heading{height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d;color:#e1e2dd;font-size:12px}.canvas-preview-heading>span{display:flex;align-items:center;gap:9px}.canvas-preview-presence{display:inline-block;width:5px;height:5px;flex:none;border-radius:50%;background:#bfff00}.canvas-welcome-preview .canvas-preview-heading button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:66px;min-height:44px;padding:0 8px;border:0;background:transparent;color:#b9bcb4;font-size:11px;border-radius:7px;cursor:pointer;transition:transform .16s var(--preview-enter)}.canvas-welcome-preview .canvas-preview-heading button:active{transform:scale(.97)}.canvas-welcome-preview .canvas-preview-heading button:focus-visible{outline:2px solid #bfff00;outline-offset:-3px}.canvas-preview-viewport{position:relative;width:100%;overflow:hidden;background-image:radial-gradient(#ffffff24 .7px,transparent 0);background-size:20px 20px}.canvas-preview-world{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none}.canvas-preview-world .canvas-card{cursor:default;border-color:#ffffff30;box-shadow:0 10px 26px #0005;z-index:2}.canvas-preview-world .canvas-node-header{font-size:11px;height:32px;min-height:32px;color:#c7cac2;gap:7px}.canvas-preview-world .canvas-node-header svg{color:#92958d}.canvas-preview-world .canvas-preview-added{margin-left:auto;color:#bfff00;font:9px monospace;letter-spacing:0;opacity:0}.canvas-preview-world .canvas-preview-output{border-color:#9ba9866b;box-shadow:0 0 0 1px #bfff000a,0 15px 40px #0006}.canvas-preview-world .canvas-card-body{display:flex;flex-direction:column;overflow:hidden}.canvas-preview-reference .canvas-card-body>img{display:block;width:100%;height:110px;object-fit:contain;background:#090a09}.canvas-preview-image-caption{padding:6px 9px;color:#9da199;font:10px/1.4 monospace;background:#161716}.canvas-preview-direction .canvas-note{padding:18px!important;justify-content:center;background:#1c1e1b!important}.canvas-preview-direction .canvas-note>svg{display:none}.canvas-preview-direction .canvas-note p{margin:0;white-space:pre-line;font-size:17px;line-height:1.45;color:#e6e8df;letter-spacing:-.3px}.canvas-preview-port{position:absolute;top:50%;height:8px;width:8px;margin-top:-4px;border:1px solid #aeb5a4;border-radius:50%;background:#141613;z-index:3}.canvas-preview-port.is-input{left:-5px;background:#bfff00;border-color:#bfff00}.canvas-preview-port.is-output{right:-5px}.canvas-preview-film{position:relative;flex:1;min-height:0;background:#090a09;overflow:hidden}.canvas-preview-film>img,.canvas-preview-film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.canvas-preview-film>video{opacity:0}.canvas-welcome-preview[data-video-ready=true] .canvas-preview-film>video{opacity:1}.canvas-preview-film-caption{height:28px;display:flex;align-items:center;gap:7px;padding:0 11px;background:#151713;color:#bfc3b8;font-size:10px}.canvas-preview-film-caption>span:last-child{margin-left:auto;font:9px monospace;color:#979e8e}.canvas-preview-palette{position:absolute;left:332px;top:373px;display:flex;align-items:center;gap:8px;color:#969c8e;font:10px monospace}.canvas-preview-palette>span{margin-right:5px}.canvas-preview-palette>div{height:28px;width:40px;border:1px solid #ffffff26;border-radius:4px;overflow:hidden}.canvas-preview-palette .canvas-color span{display:none}.canvas-preview-wires{position:absolute;inset:0;z-index:1}.canvas-preview-wires .canvas-edge-line{stroke:#b0c48a;stroke-width:1.3}.canvas-preview-wires text{display:none}.canvas-preview-cursor{position:absolute;left:0;top:0;color:#bfff00;display:flex;align-items:flex-start;gap:3px;opacity:0;z-index:4}.canvas-preview-cursor svg{stroke:#171b11;stroke-width:1.5}.canvas-preview-cursor>span{background:#bfff00;color:#172008;font:10px/1 monospace;border-radius:4px;padding:5px 7px;margin-top:14px}.canvas-welcome-preview figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px 20px;border-top:1px solid #ffffff0d;font-size:11px;line-height:1.4;color:#c3c6bd}.canvas-welcome-preview figcaption>span:last-child{font-size:10px;color:#818779;white-space:nowrap}@media(prefers-reduced-motion:no-preference){.canvas-preview-output{animation:canvas-card-add var(--preview-cycle) var(--preview-enter) infinite}.canvas-preview-added{animation:canvas-added-detail var(--preview-cycle) var(--preview-enter) infinite}.canvas-preview-wires .canvas-edge:first-child{animation:canvas-image-connect var(--preview-cycle) var(--preview-enter) infinite}.canvas-preview-wires .canvas-edge:nth-child(2){animation:canvas-text-connect var(--preview-cycle) var(--preview-enter) infinite}.canvas-preview-cursor{animation:canvas-cursor-connect var(--preview-cycle) var(--preview-ease) infinite}.canvas-welcome-preview[data-playing=false] :is(.canvas-preview-output,.canvas-preview-added,.canvas-preview-wires .canvas-edge,.canvas-preview-cursor){animation-play-state:paused}}@keyframes canvas-card-add{0%,8%,96%,to{opacity:0;transform:translateY(18px) scale(.96)}9.25%,94%{opacity:1;transform:translateY(0) scale(1)}95%{opacity:0;transform:translateY(18px) scale(.96)}}@keyframes canvas-added-detail{0%,16.2%,8%,to{opacity:0}15%,9.2%{opacity:1}}@keyframes canvas-image-connect{0%,22%,93.2%,to{opacity:0}23.2%,92%{opacity:1}}@keyframes canvas-text-connect{0%,33%,93.2%,to{opacity:0}34.2%,92%{opacity:1}}@keyframes canvas-cursor-connect{0%,5%{opacity:0;transform:translate(484px,400px)}6%{opacity:1;transform:translate(484px,400px)}10%,8%{opacity:1;transform:translate(470px,295px)}15%,17%{opacity:1;transform:translate(222px,139px)}22%,24%{opacity:1;transform:translate(304px,231px)}28%,29%{opacity:1;transform:translate(234px,328px)}33%,34%{opacity:1;transform:translate(304px,231px)}35%{opacity:0;transform:translate(327px,248px)}36%,to{opacity:0;transform:translate(484px,400px)}}@media(hover:hover) and (pointer:fine){.canvas-welcome-preview .canvas-preview-heading button:hover{color:#f0f4e8;background:#ffffff08}}@media(max-width:1100px){.canvas-welcome-preview{width:min(360px,42vw)}}@media(max-width:700px){.canvas-welcome{justify-content:flex-start}.canvas-welcome>div:first-child{flex-shrink:0}.canvas-welcome-preview{width:100%;max-width:460px}.canvas-preview-heading{height:52px;padding:0 16px}.canvas-welcome-preview figcaption{padding:12px 16px}.canvas-welcome-preview figcaption>span:last-child{display:none}}.canvas-welcome-preview[data-unavailable=true] :is(.canvas-preview-output,.canvas-preview-added,.canvas-preview-wires .canvas-edge,.canvas-preview-cursor){animation:none}.canvas-welcome-preview[data-unavailable=true] .canvas-preview-film>video{opacity:0}@media(prefers-reduced-motion:reduce){.canvas-welcome-preview .canvas-preview-heading button{transition:none}.canvas-welcome-preview .canvas-preview-heading button:active{transform:none}}