@keyframes how-process-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes how-process-pop{0%{opacity:0;transform:scale(.82)}62%{opacity:1;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}@keyframes how-process-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes how-github-demo-button{0%,28%,54%,to{transform:scale(1)}38%,45%{transform:scale(.94)}}@keyframes how-github-demo-cursor{0%{opacity:0;transform:translate(18px,16px)}14%{opacity:1}32%,to{opacity:1;transform:translate(-16px,-18px)}}@keyframes how-process-frame-left{0%{opacity:0;transform:translate(-16px,8px) rotate(-1.5deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes how-process-frame-right{0%{opacity:0;transform:translate(18px,-6px) rotate(1.5deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes how-process-cursor{0%{opacity:0;transform:translate(28px,20px)}45%,to{opacity:1;transform:translate(0)}}@keyframes how-process-comment{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.how-process-progress{animation:how-process-progress 4.2s linear forwards}.how-process-pop{animation:how-process-pop .48s .3s cubic-bezier(.2,.85,.2,1) both}.how-github-demo-button{animation:how-github-demo-button 1.8s .25s cubic-bezier(.2,.8,.2,1) both}.how-github-demo-cursor{animation:how-github-demo-cursor 1.8s .25s cubic-bezier(.2,.8,.2,1) both}.how-process-tile{animation:how-process-rise .42s cubic-bezier(.2,.8,.2,1) both}.how-process-frame-left{animation:how-process-frame-left .62s .12s cubic-bezier(.2,.8,.2,1) both}.how-process-frame-right{animation:how-process-frame-right .62s .26s cubic-bezier(.2,.8,.2,1) both}.how-process-cursor{animation:how-process-cursor .9s .6s cubic-bezier(.2,.8,.2,1) both}.how-process-comment-one,.how-process-comment-two{animation:how-process-comment .42s cubic-bezier(.2,.8,.2,1) both}.how-process-comment-one{animation-delay:.76s}.how-process-comment-two{animation-delay:1.04s}@media(prefers-reduced-motion:reduce){.how-process-progress,.how-process-pop,.how-github-demo-button,.how-github-demo-cursor,.how-process-tile,.how-process-frame-left,.how-process-frame-right,.how-process-cursor,.how-process-comment-one,.how-process-comment-two{animation:none}}@keyframes how-canvas-panel-appear{0%{opacity:0;translate:-18px 0}to{opacity:1;translate:0 0}}@keyframes how-canvas-frame-appear{0%{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:0 0;scale:1}}@keyframes how-canvas-toolbar-appear{0%{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes how-canvas-drag-surface{0%,15%{left:14%;top:15%;opacity:0;transform:scale(.16) rotate(-2deg)}21%{left:14%;top:15%;opacity:.96;transform:scale(.18) rotate(-2deg)}62%{left:55%;top:22%;opacity:.96;transform:scale(.86) rotate(0)}70%{left:55%;top:22%;opacity:1;transform:scale(1.04) rotate(0)}77%,to{left:55%;top:22%;opacity:1;transform:scale(1) rotate(0)}}@keyframes how-canvas-drag-cursor{0%{left:9%;top:25%;opacity:0;transform:scale(1)}9%{left:17%;top:16%;opacity:1;transform:scale(1)}16%,23%{left:17%;top:16%;opacity:1;transform:scale(.9)}62%{left:88%;top:58%;opacity:1;transform:scale(.9)}70%,80%{left:88%;top:58%;opacity:1;transform:scale(1)}93%{left:93%;top:66%;opacity:1;transform:scale(1)}to{left:93%;top:66%;opacity:0;transform:scale(1)}}@keyframes how-canvas-drag-grab{0%,12%{opacity:0;scale:.3}18%{opacity:.9;scale:.45}28%,56%{opacity:0;scale:1.35}64%{opacity:.9;scale:.45}77%,to{opacity:0;scale:1.55}}@keyframes how-canvas-source-highlight{0%,10%,30%,to{box-shadow:inset 0 0 0 0 transparent}16%,23%{box-shadow:inset 3px 0 0 var(--brand-burnt-orange);background:color-mix(in srgb,var(--brand-burnt-orange) 10%,transparent)}}.marketing-workspace-preview .c2-stage[data-frame-id]{transform-origin:top center}.marketing-workspace-preview[data-active=true] .ws-panel{animation:how-canvas-panel-appear .46s 80ms cubic-bezier(.16,1,.3,1) both}.marketing-workspace-preview[data-active=true] .c2-stage[data-frame-id=frame_01_01]{animation:how-canvas-frame-appear .56s .3s cubic-bezier(.16,1,.3,1) both}.marketing-workspace-preview[data-active=true] .ws-toolbar{animation:how-canvas-toolbar-appear .46s .72s cubic-bezier(.16,1,.3,1) both}.how-canvas-drag-surface{position:absolute;width:34%;aspect-ratio:16 / 10;transform-origin:top left;opacity:0}.how-canvas-drag-demo.is-active{opacity:1}.how-canvas-drag-demo.is-active .how-canvas-drag-surface{animation:how-canvas-drag-surface 3.3s .35s cubic-bezier(.2,.8,.2,1) both}.how-canvas-drag-demo.is-active .how-canvas-drag-cursor{animation:how-canvas-drag-cursor 3.3s .35s cubic-bezier(.2,.8,.2,1) both}.how-canvas-drag-demo.is-active .how-canvas-drag-grab{animation:how-canvas-drag-grab 3.3s .35s ease-out both}.marketing-workspace-preview[data-active=true] .ws-project-page-list .ws-project-page-row:first-child .ws-project-page{animation:how-canvas-source-highlight 3.3s .35s ease-out both}@media(prefers-reduced-motion:reduce){.marketing-workspace-preview[data-active=true] .ws-panel,.marketing-workspace-preview[data-active=true] .c2-stage[data-frame-id],.marketing-workspace-preview[data-active=true] .ws-toolbar,.marketing-workspace-preview[data-active=true] .ws-project-page,.how-canvas-drag-surface,.how-canvas-drag-cursor,.how-canvas-drag-grab{animation:none!important}.how-canvas-drag-demo.is-active{opacity:1}.how-canvas-drag-surface{left:55%;top:22%;opacity:1;transform:scale(1)}.how-canvas-drag-cursor{display:none}}