/* The page keeps normal document scrolling. Motion belongs to the objects. */
.hero-stage{perspective:1200px;--pointer-x:0;--pointer-y:0;mask-image:linear-gradient(transparent,#000 5%,#000 97%,transparent)}
.hero-source{translate:calc(var(--pointer-x)*-9px) calc(var(--pointer-y)*-6px)}
.prompt-note{translate:calc(var(--pointer-x)*-15px) calc(var(--pointer-y)*-10px)}
.hero-takes{translate:calc(var(--pointer-x)*5px) calc(var(--pointer-y)*4px)}
.hero-output{translate:calc(var(--pointer-x)*13px) calc(var(--pointer-y)*8px);rotate:y calc(var(--pointer-x)*-3deg);box-shadow:0 30px 45px -15px #27352335,0 1px 4px #27352315}
.hero-take{padding:0;display:block;text-align:left;width:100%;transition:transform .55s cubic-bezier(.18,.9,.25,1.25),border-color .2s,box-shadow .4s}
.hero-take>span{pointer-events:none}.hero-take:not(.selected) b{display:none}.hero-take.selected{transform:translateX(10px) scale(1.075)!important;box-shadow:0 10px 24px #264ae522}.hero-take:hover:not(.selected){transform:translateX(5px) scale(1.04)}.hero-take:focus-visible{outline-offset:5px}.hero-take.selected>span{color:var(--blue);background:#f2f4ff}.hero-wires{transform:none!important;filter:drop-shadow(0 2px 2px #264ae512)}.wire-base{stroke:#bec5b8;stroke-width:1.15}.wire-active{stroke:#244bea;stroke-width:2.2;stroke-dasharray:7 7;animation:flow-wire 10s linear infinite}
.hero-output video{background:#f0f1e9}.output-caption{min-height:31px}.round-play{transition:transform .4s var(--ease),background .2s}.cursor-label{transition:background .3s;pointer-events:none}.hero-takes:has(.hero-take:hover)~.cursor-label{background:#1839bf}
.hero-source,.prompt-note,.hero-output,.hero-takes{will-change:translate}.hero-stage:not(.stage-visible) .wire-active{animation-play-state:paused}
.button{overflow:hidden;isolation:isolate}.button:before{content:'';position:absolute;z-index:-1;inset:0;background:#0d2fad;border-radius:inherit;transform:translateY(105%);transition:transform .45s var(--ease)}.button:hover:before{transform:translateY(0)}.button>span{display:inline-block;transition:transform .4s var(--ease)}.button:hover>span{transform:translate(3px,-3px)}.button:active{transform:translateY(1px);box-shadow:0 1px 0 #1736b7}
.brand-film{width:min(854px,80vw);transform:perspective(1200px) rotateX(calc((1 - var(--film-progress,1))*9deg)) rotate(calc((1 - var(--film-progress,1))*-4deg));transform-origin:center;box-shadow:14px 14px 0 #e9ee7e,0 25px 40px -25px #212b2940}.brand-film>video{aspect-ratio:854/480;object-fit:contain}.film-frame{position:absolute;inset:0;border:1px solid #264ae533;pointer-events:none}.brand-film:hover{transform:perspective(1200px) rotateX(0) rotate(0)}
.canvas-shell{transition:box-shadow .5s}.canvas-shell:focus-within{box-shadow:0 32px 48px -28px #46533238,0 0 0 4px #264ae509}.canvas-shell[data-step="1"] .demo-main{transform:translateY(-5px)}.canvas-shell[data-step="2"] .demo-main{transform:translateY(-4px) scale(1.035)}.take-picker button{transition:transform .25s var(--ease),background .25s,border-color .25s}.take-picker button:hover{transform:translateY(-3px)}
.work-reel{cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x pan-y;user-select:none}.work-reel.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}.work-reel.dragging .work{pointer-events:none}.work-reel .work{cursor:inherit}.work-reel:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}.reel-progress{height:2px;background:#e2e5d9;max-width:1120px;width:88%;margin:0 auto 25px;overflow:hidden}.reel-progress>span{display:block;width:28%;height:100%;background:var(--blue);transform:translateX(calc(var(--reel-progress,0)*257%));transition:background .2s}.work,.work-wide{height:auto;max-height:none;background:#f4f1e7;border:1px solid #e4e1d6;border-radius:4px}.work video{width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#22251f}.work-wide{width:490px}.work-wide video{aspect-ratio:854/480}.work:after{inset:0 0 auto;height:100px;background:linear-gradient(#0007,transparent);pointer-events:none}.work-title{display:block;position:relative;inset:auto;padding:22px 52px 23px 20px;color:var(--ink);font-size:25px;text-shadow:none;min-height:118px}.work-wide .work-title{font-size:26px}.work-play{color:var(--ink);border-color:#a7ae9b;bottom:25px;transition:background .2s,color .2s,transform .35s}.work:hover .work-play{background:var(--blue);border-color:var(--blue);color:white;transform:rotate(45deg)}
.editorial-features details[open] .feature-content{animation:feature-open .48s var(--ease)}@keyframes feature-open{from{opacity:.3;translate:0 -7px}to{opacity:1;translate:0 0}}
@media(max-width:767px){.hero-stage{width:100%;left:auto;margin:31px 0 0;height:365px;transform:none;max-width:100%;overflow:visible}.hero-source{left:4%;width:23%;top:137px}.hero-source>img{height:80px}.hero-source .mini-top{font-size:7px;padding:7px 6px;gap:4px}.source-bottom{font-size:6px;padding:9px 6px}.prompt-note{left:12%;top:20px;width:158px;padding:13px}.prompt-note p{font-size:10px}.hero-takes{width:17%;left:33%;top:126px;gap:14px}.hero-take.first{display:block}.hero-take{height:55px;min-height:0}.hero-take>span{font-size:6px;padding:3px 4px}.hero-take.selected b{font-size:5px}.hero-take.selected{transform:translateX(3px) scale(1.065)!important}.hero-output{width:44%;right:3%;top:118px;padding:6px}.output-header{font-size:5.5px;padding:4px 2px 8px}.output-header .dot{width:3px;height:3px;margin-right:3px}.output-caption{font-size:8px;padding:9px 2px 3px;min-height:25px}.round-play{width:30px;height:30px;font-size:17px;bottom:35px;right:12px}.cursor-label{right:5%;top:338px;font-size:7px;padding:6px 8px}.cursor-label svg{width:18px;top:-19px}.top-coordinate{left:6%;top:0;font-size:6px}.hero-wires{height:100%;inset:0}.hero-foot{margin-top:4px}.brand-film{width:100%;margin-top:38px;box-shadow:8px 8px 0 #e9ee7e}.work-title,.work-wide .work-title{font-size:21px;padding:19px 46px 20px 16px;min-height:101px}.work-play{right:13px;bottom:23px;width:29px;height:29px}.work-wide{width:88vw;max-width:440px}.work-index{left:16px;top:19px}.reel-progress{margin-bottom:24px}.take-picker button{min-height:70px}}
.motion-paused .hero-stage{--pointer-x:0!important;--pointer-y:0!important}.motion-paused .hero-source,.motion-paused .prompt-note,.motion-paused .hero-output,.motion-paused .hero-takes{translate:none;rotate:none;will-change:auto}.motion-paused .brand-film{transform:none!important}.motion-paused .button,.motion-paused .button:before,.motion-paused .hero-take,.motion-paused .canvas-shell,.motion-paused .demo-main,.motion-paused .take-picker button{transition:none!important}
@media(prefers-reduced-motion:reduce){.hero-source,.prompt-note,.hero-output,.hero-takes{translate:none;rotate:none;will-change:auto}.brand-film{transform:none!important}}

.hero-media{position:relative;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#edf0e7}.hero-media .hero-output-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:1;pointer-events:none;transition:opacity .2s}.hero-media.has-frame .hero-output-cover{opacity:0}.hero-media video{height:100%;width:100%}.motion-paused .hero-output-cover{transition:none}
.round-play{z-index:2}