*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background:#391157;color:#9f77e9;font-size:clamp(1rem,.75vw + .7rem,1.375rem);overflow-x:hidden}h1{color:#fff;text-align:center;font-size:3em;margin-block-end:.75em;text-wrap:balance}.color-white,h2,h3,h4,h5{color:#fff}html{scroll-timeline:--page-scroll block}@keyframes grow-progress{0%{transform:scaleX(0)}to{transform:scaleX(1);opacity:1}}.progress{position:fixed;left:0;top:0;width:100%;height:.5em;background:#7209b7;z-index:10;transform-origin:0 50%;animation:grow-progress auto linear;animation-timeline:--page-scroll}@keyframes reveal{0%{opacity:0;clip-path:inset(45% 50% 45% 60%)}to{opacity:1;clip-path:inset(0% 0% 0% 0%)}}.revealing-image{view-timeline-name:--revealing-image;view-timeline-axis:block;animation:ease-out reveal both;animation-timeline:--revealing-image;animation-range:entry 25% cover 50%}@keyframes slideIn{0%{transform:perspective(1000px) rotateX(66deg) scale(1.3)}to{transform:perspective(1000px) rotate3d(0,0,0,0) scale(1)}}.sliding-image{view-timeline-name:--sliding-image;view-timeline-axis:block;animation:ease-out slideIn both;animation-timeline:--sliding-image;animation-range:entry 25% cover 50%}@keyframes move{to{transform:translate(calc(-100% + 100vw));left:0}}.section-pin{height:500vh;overflow:visible;background:#222;color:#fff;view-timeline-name:--section-pin-tl;view-timeline-axis:block}.pin-wrap-sticky{height:100vh;position:sticky;top:0;width:100%;overflow-x:hidden}.pin-wrap{height:100vh;width:250vmax;display:flex;justify-content:flex-start;align-items:center;padding:50px 0;will-change:transform;animation:linear move forwards;animation-timeline:--section-pin-tl;animation-range:contain 0% contain 100%}.pin-wrap img{height:80vh;min-width:60vmax;padding:0 5vmax;width:auto;max-width:100%;object-fit:cover}@keyframes phone1spin{0%{transform:perspective(1000px) rotate3d(0,.2,-.02,30deg)}to{transform:perspective(1000px) rotate3d(0,-.1,.04,35deg)}}@keyframes phone2spin{0%{transform:perspective(1000px) rotate3d(.01,.2,-.02,15deg)}to{transform:perspective(1000px) rotate3d(-.1,-.1,-0,45deg)}}@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}.phone-container{display:flex;justify-content:center;align-items:center;flex-direction:column}@media all and (min-width: 576px){.phone-container{flex-direction:row;justify-content:space-between;align-items:flex-start}}.phone{position:relative;height:60vh;aspect-ratio:9/16;transform-origin:center center;transform-style:preserve-3d}.phone-1{view-timeline:--phone-1-spin block;animation:phone1spin ease-in-out both;animation-timeline:--phone-1-spin;animation-range:entry 25% cover 100%}.phone-2{margin-top:25vh;view-timeline:--phone-2-spin block;animation:phone2spin ease-in-out both;animation-timeline:--phone-2-spin;animation-range:entry 25% cover 100%}.phone-back{position:absolute;height:61vh;aspect-ratio:9/16;background:linear-gradient(0deg,#9c9b99,#91908f) 50% 50%;border-radius:4vh;transform:translateZ(5px) scale(1.01);transform-origin:center center}.phone-front{height:60vh;aspect-ratio:9/16;background:conic-gradient(from -17.18deg at 50% 50%,#e7e7e7,#ccc 139.21deg) 50% 50%;border-radius:4vh;z-index:5;position:absolute;top:0;left:0;transform:translateZ(40px)}.phone-screen{position:absolute;top:7px;right:7px;bottom:50px;left:7px;background-color:#0ff;border-radius:3.5vh;overflow:hidden;box-shadow:inset 0 0 10px 3px #00000080}.phone-screen:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;background:conic-gradient(from -17.18deg at 50% 50%,#ffffff4d,#fff0 139.21deg) 50% 50%}.phone-screen-img{width:100%;height:100%;object-fit:cover}:root{--container-padding: 1rem;--gap: clamp(1rem, 6vw, 3rem);--full: minmax(var(--gap), 1fr);--content: min(30em, 100% - var(--gap) * 2);--popout: minmax(0, 2rem);--feature: minmax(0, 5rem)}.content{display:grid;grid-template-columns:[full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end]}.content>*{grid-column:content}.popout{grid-column:popout}.feature{grid-column:feature}.full{grid-column:full}.container{max-width:33em;margin:4em auto}.container>*+*{margin-block-start:1em}img{max-width:100%}.my-4{margin:4em 0}.breadcrumbs,.source{background-color:#fff9}@keyframes emptyAnim{to{opacity:1}}.video-scrub-track{height:400vh;background:#00008b;view-timeline:--video-scrub block;animation:linear emptyAnim forwards;animation-timeline:--video-scrub;animation-range:cover 0 cover 100%}.video-scrub-el{position:sticky;top:0;width:100%;height:100dvh}.video-scrub-cover{width:100%;height:100%;object-fit:cover}.container{margin:0 auto;max-width:45rem;padding-left:1rem;padding-right:1rem}.flow>*+*{margin-block-start:var(--flow-space, 1em)}.flow-0{--flow-space: 0em}.flow-1{--flow-space: 1em}.flow-2{--flow-space: 2em}.m-content{margin-block:5vh}.my-4{margin-block:4em}