*{box-sizing:border-box}@font-face{font-display:block;font-family:Mori;font-style:normal;font-weight:400;src:url(https://assets.codepen.io/16327/PPMori-Regular.woff) format("woff")}@font-face{font-display:block;font-family:Mori;font-style:normal;font-weight:600;src:url(https://assets.codepen.io/16327/PPMori-SemiBold.woff) format("woff")}@font-face{font-display:block;font-family:Fraktion Mono;font-style:normal;font-weight:400;src:url(https://assets.codepen.io/16327/PPFraktionMono-Bold.woff) format("woff")}:root{--color-shockingly-green: #0ae448;--color-just-black: #0e100f;--color-surface-white: #fffce1;--color-pink: #fec5fb;--color-shockingly-pink: #f100cb;--color-orangey: #ff8709;--color-lilac: #9d95ff;--color-lt-green: #abff84;--color-blue: #00bae2;--color-grey: #2c2c2c;--color-surface75: #bbbaa6;--color-surface50: #7c7c6f;--color-surface25: #42433d;--gradient-macha: linear-gradient( 114.41deg, var(--color-shockingly-green) 20.74%, var(--color-lt-green) 65.5% );--gradient-orange-crush: linear-gradient( 111.45deg, var(--color-orangey) 19.42%, #f7bdf8 73.08% );--gradient-lipstick: linear-gradient(165.72deg, #f7bdf8 21.15%, #cd237f 81.93%);--gradient-purple-haze: linear-gradient( 153.58deg, #f7bdf8 32.25%, #2f3cc0 92.68% );--gradient-skyfall: linear-gradient(131.77deg, #0a157a 30.82%, #15bfe4 81.82%);--gradient-emerald-city: linear-gradient( 166.9deg, var(--color-shockingly-green) 53.19%, #0085d0 107.69% );--gradient-summer-fair: linear-gradient( 144.02deg, var(--color-blue) 4.56%, var(--color-pink) 72.98% );--color-core-green: #dfffd1;--color-core-green-lt: #f3ffee;--color-core-gradient: radial-gradient( 89.08% 84.62% at 16.54% 78.46%, #fbfefa 0%, #c9f6b4 39.58%, #abff84 77.6%, #2fee65 100% );--color-core-button-gradient: linear-gradient( 114.41deg, #0ae448 20.74%, #abff84 65.5% );--color-core-heading-gradient: linear-gradient( 180deg, #d6ffc3 0%, rgba(214, 255, 195, 0) 100% ), #f3ffee;--color-core-intro-gradient: linear-gradient( 144.5deg, #e8ffdd 65.09%, #7dea7b 122.73% ), linear-gradient(311.31deg, #7ef89e 36.08%, #e5ffd9 106.98%);--color-text-purple: #d2ceff;--color-text-purple-lt: #dfdcff;--color-text-gradient: radial-gradient( 129.03% 100% at 120.97% 81.45%, #dfdcff 27.08%, #a69eff 100% );--color-svg-tangerine: #ffe3c7;--color-svg-tangerine-lt: #fff0e0;--color-svg-gradient: radial-gradient( 70.77% 70.77% at 0% 70.77%, #ffd9b0 0%, #fd9f3b 80.73%, #ff8709 100% );--color-svg-heading-gradient: linear-gradient( 180deg, #ffbd77 0%, rgba(254, 197, 251, 0) 100% ), #ffe4c7;--color-ui-blue: #bef3fe;--color-ui-blue-lt: #e1faff;--color-ui-blue-codeblk: #f6feff;--color-ui-text-gradient: linear-gradient( 168.89deg, #fec5fb -21.3%, #00bae2 89.88% );--color-ui-code-blocktext-gradient: linear-gradient( 142.91deg, #cef6ff 18.75%, #a6efff 54.93% );--color-ui-gradient: radial-gradient( 78.77% 78.77% at 71.71% 30.77%, #f0fcff 0%, #9bedff 67.21%, #98ecff 76.04%, #5be1ff 84.9%, #00bae2 94.79% );--color-ui-gradient-background: linear-gradient( 137.1deg, #ecfcff 27.5%, #a6efff 94.09% );--color-ui-gradient-flip-background: radial-gradient( 140% 190% at 117.54% 131.12%, #f0fcff 0%, #9bedff 25.52%, #98ecff 42.71%, #5be1ff 60.94%, #00bae2 94.79% );--color-scroll-pink: #ffd7fd;--color-scroll-pink-lt: #ffe9fe;--color-scroll-gradient: linear-gradient( 317.42deg, #ffe9fe 10.4%, #ff96f9 83.03% );--ease-in: cubic-bezier(.755, .05, .855, .06);--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.86, 0, .07, 1);--ease-out-quart: cubic-bezier(.175, .79, .38, .905);--ease-in-out-quart: cubic-bezier(.645, .045, .355, 1)}:root{--dark: var(--color-just-black);--grey-dark: #201f1f;--light: var(--color-surface-white);--mid: #7c7c6f;--grey: var(--color-grey);--gray: var(--color-grey);--green: var(--color-shockingly-green);--green-dark: #0ae448;--green-light: var(--color-lt-green);--blue: var(--color-blue);--purple: var(--color-lilac);--red: #cd237f;--orange: var(--color-orangey);accent-color:var(--color-shockingly-green)}:root{--f-0-min: 16;--f-0-max: 18;--step-0: calc( ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp) );--f-1-min: 16;--f-1-max: 22.5;--step-1: calc( ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp) );--f-2-min: 23.04;--f-2-max: 28.13;--step-2: calc( ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp) );--f-3-min: 27.65;--f-3-max: 35.16;--step-3: calc( ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp) );--f-4-min: 33.18;--f-4-max: 46;--step-4: calc( ((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp) )}:root{--fluid-min-width: 320;--fluid-max-width: 1140;--fluid-screen: 100vw;--fluid-bp: calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)) )}@media screen and (min-width: 1140px){:root{--fluid-screen: calc(var(--fluid-max-width) * 1px)}}:root{--fc-s-min: (var(--f-0-min, 21));--fc-s-max: (var(--f-0-max, 24));--fc-m-min: (var(--fc-s-min) * 6);--fc-m-max: (var(--fc-s-max) * 6);--fc-l-min: (var(--fc-s-min) * 8);--fc-l-max: (var(--fc-s-max) * 8);--fc-xl-min: (var(--fc-s-min) * 10);--fc-xl-max: (var(--fc-s-max) * 10);--space-s: calc( ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp) );--space-m: calc( ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp) );--space-l: calc( ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp) );--space-xl: calc( ((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp) );--space-s-m: calc( ((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp) );--space-m-l: calc( ((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp) );--space-l-xl: calc( ((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp) )}.pad-s{padding-top:var(--space-s);padding-bottom:var(--space-s)}.pad-m{padding-top:var(--space-m);padding-bottom:var(--space-m)}.pad-l{padding-top:var(--space-l);padding-bottom:var(--space-l)}.pad-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.flow>*+*{margin-top:1em}.text-center{text-align:center}.box{width:75px;height:75px;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--dark);background:var(--gradient-macha),url(https://assets.codepen.io/16327/noise-e82662fe.png);background-blend-mode:color-dodge;font-weight:600;line-height:1.2;will-change:transform}.circle{width:75px;height:75px;border-radius:99px;display:flex;align-items:center;justify-content:center;text-align:center;background-color:var(--green);font-weight:600;color:var(--dark);line-height:1.2;will-change:transform}.flex-row{width:100%;display:flex;align-items:center;justify-content:space-around}.center{display:flex;align-items:center;justify-content:center}.dark{background-color:var(--dark);color:var(--color-surface75)}.light,.light h1,.light h2,.light h3,.light h4{background-color:var(--light);color:var(--dark)}h1,h2,h3,h4,.text-light{color:var(--light)}.text-dark{color:var(--dark)}.gray,.grey{background-color:var(--grey)}body{color:var(--color-surface75);background-color:var(--dark);font-family:Mori,sans-serif;font-weight:400;margin:0;font-size:var(--step-0);line-height:1.45}h1,h2,h3,h4{margin:10px 0;font-weight:400;line-height:1.2}h1,.h1{font-size:var(--step-4)}h2,.h2{font-size:var(--step-3)}h3,.h3{font-size:var(--step-2)}h4,.h4,.lead{font-size:var(--step-1)}.heading-l{font-size:max(2.625rem,min(5.56634vw + 1.32039rem,8rem))}a{color:inherit;font-weight:700;text-decoration:none}a:hover{text-decoration:underline}button{display:inline-block;outline:none;background:var(--dark);border:solid 2px var(--color-surface75);color:var(--color-surface75);text-decoration:none;border-radius:99px;padding:12px 25px;cursor:pointer;line-height:1;font-size:.9rem;transition:opacity .2s ease-out}button:hover{border:solid 2px var(--light);color:var(--light)}.light button{background:var(--light);border:solid 2px var(--dark);color:var(--dark)}.light button:hover{border:solid 2px var(--dark);color:var(--dark)}.gsap-logo{width:20vw;max-width:90px;position:fixed;bottom:15px;right:15px;mix-blend-mode:difference;z-index:9999}.gsap-logo img{width:100%}.gsap-3-logo{width:20vw;max-width:150px;position:fixed;bottom:15px;right:15px}.panel{--background: var(--dark);position:relative;width:100%;height:100%;min-height:100vh;padding-left:2rem;padding-right:2rem;display:flex;align-items:center;justify-content:center;gap:1rem;background-color:var(--background);box-sizing:border-box;z-index:1}.panel p{max-width:75ch}.panel.blue{color:var(--dark);--background: var(--color-ui-blue-lt)}.panel.orange{color:var(--dark);--background: var(--color-svg-tangerine)}.panel.red{color:var(--dark);--background: var(--color-scroll-pink)}.panel.purple{color:var(--dark);--background: var(--color-text-purple)}.panel.green{color:var(--dark);--background: var(--color-core-green-lt)}.panel.light{--background: var(--light);color:var(--dark)}.panel.grey{--background: var(--grey);color:var(--light)}.panel.description{text-align:center}.panel h1{color:var(--color-surface-white)}.panel__number{font-size:50vw;line-height:1;opacity:.25;margin:0}.panel.border{border-radius:0;border-top:2px grey dashed}.hr-top:before{background-color:var(--color-surface25);content:"";height:.0625rem;left:10%;position:absolute;top:0;width:80%}.hr-bottom:after{background-color:var(--color-surface25);content:"";height:.0625rem;left:10%;position:absolute;bottom:0;width:80%}.scroll-down{position:absolute;bottom:30px;left:50%;transform:translate(-50%);font-weight:400;text-transform:uppercase;font-size:16px;overflow:visible;mix-blend-mode:difference;z-index:999}.scroll-down .arrow{position:relative;top:-4px;margin:0 auto;width:20px;height:20px;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmY2UxIiBkPSJNNDU2LjIsMTkyLjJjLTIwLjUtMjAuNS01My41LTIwLjgtNzMuNy0wLjZMMjU3LDM0NC4xTDEwNC41LDE5MS42Yy0yMC4yLTIwLjItNTMuMi0xOS45LTczLjcsMC42Yy0yMC41LDIwLjUtMjAuOCw1My41LTAuNiw3My43bDE5MCwxOTBjMTAuMSwxMC4xLDIzLjQsMTUuMSwzNi44LDE1YzEzLjMsMC4xLDI2LjctNC45LDM2LjgtMTVsMTkwLTE5MEM0NzYuOSwyNDUuNyw0NzYuNywyMTIuNyw0NTYuMiwxOTIuMnoiLz48L3N2Zz4=);background-size:contain}.panel p strong,.panel li strong{font-weight:400}.panel p code,.panel li code{background-color:#28292b;color:var(--color-surface-white);padding:2px 4px;border-radius:5px;font-size:.9em}.panel li{margin:0}pre.prettyprint{max-width:100%;overflow:auto}ul pre.prettyprint{margin-left:-.5rem}.vh{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.checkbox label{display:flex;align-items:center;flex-direction:row;justify-content:center}.checkbox label:before{content:"";width:20px;height:20px;border-radius:2px;background:var(--light);display:inline-block;margin-right:10px}.checkbox input[type=checkbox]:checked~label:before{background:var(--green) no-repeat center;background-size:12px 12px;background-image:url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ1LjcwMSA0NS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NS43MDEgNDUuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMC42ODcsMzguMzMyYy0yLjA3MiwyLjA3Mi01LjQzNCwyLjA3Mi03LjUwNSwwTDEuNTU0LDI2LjcwNGMtMi4wNzItMi4wNzEtMi4wNzItNS40MzMsMC03LjUwNCAgICBjMi4wNzEtMi4wNzIsNS40MzMtMi4wNzIsNy41MDUsMGw2LjkyOCw2LjkyN2MwLjUyMywwLjUyMiwxLjM3MiwwLjUyMiwxLjg5NiwwTDM2LjY0Miw3LjM2OGMyLjA3MS0yLjA3Miw1LjQzMy0yLjA3Miw3LjUwNSwwICAgIGMwLjk5NSwwLjk5NSwxLjU1NCwyLjM0NSwxLjU1NCwzLjc1MmMwLDEuNDA3LTAuNTU5LDIuNzU3LTEuNTU0LDMuNzUyTDIwLjY4NywzOC4zMzJ6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)}.flair{width:100px;height:100px;background-image:url(https://assets.codepen.io/16327/flair.png);background-size:contain;background-repeat:no-repeat;will-change:transform}.flair--2{background-image:url(https://assets.codepen.io/16327/flair-2.png)}.flair--3{background-image:url(https://assets.codepen.io/16327/flair-3.png)}.flair--4{background-image:url(https://assets.codepen.io/16327/flair-4.png)}.flair--5{background-image:url(https://assets.codepen.io/16327/flair-5.png)}.flair--6{background-image:url(https://assets.codepen.io/16327/flair-6.png)}.flair--7{background-image:url(https://assets.codepen.io/16327/flair-7.png)}.flair--8{background-image:url(https://assets.codepen.io/16327/flair-8.png)}.flair--9{background-image:url(https://assets.codepen.io/16327/flair-9.png)}.flair--10{background-image:url(https://assets.codepen.io/16327/flair-10.png)}.flair--11{background-image:url(https://assets.codepen.io/16327/flair-11.png)}.flair--12{background-image:url(https://assets.codepen.io/16327/flair-12.png)}.flair--13{background-image:url(https://assets.codepen.io/16327/flair-13.png)}.flair--14{background-image:url(https://assets.codepen.io/16327/flair-14.png)}.flair--15{background-image:url(https://assets.codepen.io/16327/flair-15.png)}.flair--16{background-image:url(https://assets.codepen.io/16327/flair-16.png)}.flair--17{background-image:url(https://assets.codepen.io/16327/flair-17.png)}.flair--18{background-image:url(https://assets.codepen.io/16327/flair-18.png)}.flair--19{background-image:url(https://assets.codepen.io/16327/flair-19.png)}.flair--20{background-image:url(https://assets.codepen.io/16327/flair-20.png)}.flair--21{background-image:url(https://assets.codepen.io/16327/flair-21.png)}.flair--22{background-image:url(https://assets.codepen.io/16327/flair-22.png)}.flair--23{background-image:url(https://assets.codepen.io/16327/flair-23.png)}.flair--24{background-image:url(https://assets.codepen.io/16327/flair-24.png)}.flair--25{background-image:url(https://assets.codepen.io/16327/flair-25.png)}.flair--26{background-image:url(https://assets.codepen.io/16327/flair-26.png)}.flair--27{background-image:url(https://assets.codepen.io/16327/flair-27.png)}.flair--28{background-image:url(https://assets.codepen.io/16327/flair-28.png)}.flair--29{background-image:url(https://assets.codepen.io/16327/flair-29.png)}.flair--30{background-image:url(https://assets.codepen.io/16327/flair-30.png)}.flair--31{background-image:url(https://assets.codepen.io/16327/flair-31.png)}.flair--32{background-image:url(https://assets.codepen.io/16327/flair-32.png)}.flair--33{background-image:url(https://assets.codepen.io/16327/flair-33.png)}.flair--34{background-image:url(https://assets.codepen.io/16327/flair-34.png)}.flair--35{background-image:url(https://assets.codepen.io/16327/flair-35.png)}.flair--3D-1{background-image:url(https://assets.codepen.io/16327/3D-keyframe.png)}.flair--3D-2{background-image:url(https://assets.codepen.io/16327/3D-poly.png)}.flair--3D-3{background-image:url(https://assets.codepen.io/16327/3D-semi.png)}.flair--3D-4{background-image:url(https://assets.codepen.io/16327/3D-spiral.png)}.flair--3D-5{background-image:url(https://assets.codepen.io/16327/3D-squish.png)}.flair--3D-6{background-image:url(https://assets.codepen.io/16327/3D-triangle.png)}.flair--3D-7{background-image:url(https://assets.codepen.io/16327/3D-tube.png)}.flair--3D-8{background-image:url(https://assets.codepen.io/16327/3D-tunnel.png)}.flair--3D-9{background-image:url(https://assets.codepen.io/16327/3D-combo.png)}.flair--3D-10{background-image:url(https://assets.codepen.io/16327/3D-cone.png)}.flair--3D-11{background-image:url(https://assets.codepen.io/16327/3D-hoop.png)}.flair-cont{display:flex;align-items:center;justify-content:space-around;gap:2rem;flex-wrap:wrap}.box.green,.gradient-green{color:var(--dark);background:var(--gradient-macha),url(https://assets.codepen.io/16327/noise-e82662fe.png);background-blend-mode:color-dodge}.box.green-lt,.gradient-green-2{color:var(--dark);background:var(--gradient-emerald-city),url(https://assets.codepen.io/16327/noise-e82662fe.png);background-blend-mode:color-dodge}.box.orange,.gradient-orange{color:var(--dark);background:var(--gradient-orange-crush),url(https://assets.codepen.io/16327/noise.png);background-blend-mode:color-dodge}.box.purple,.gradient-purple{color:var(--dark);background:var(--gradient-purple-haze),url(https://assets.codepen.io/16327/noise.png);background-blend-mode:color-dodge}.box.blue-lt .gradient-blue-2{color:var(--dark);background:var(--gradient-summer-fair),url(https://assets.codepen.io/16327/noise.png);background-blend-mode:color-dodge}.box.blue,.gradient-blue{color:var(--dark);background:var(--color-ui-gradient),url(https://assets.codepen.io/16327/noise-e82662fe.png);background-blend-mode:color-dodge}.box.red,.gradient-red{color:var(--dark);background:var(--gradient-lipstick),url(https://assets.codepen.io/16327/noise.png);background-blend-mode:color-dodge}.box.pink,.gradient-pink{color:var(--dark);background:var(--color-scroll-gradient),url(https://assets.codepen.io/16327/noise.png);background-blend-mode:color-dodge}.gradient-blue-dark{background:var(--gradient-skyfall),url(https://assets.codepen.io/16327/noise.png);background-blend-mode:color-dodge}.noise{position:relative}.noise:after{content:"";position:absolute;inset:0;background:url(https://assets.codepen.io/16327/noise.png);opacity:.4;pointer-events:none}.scroll-down{position:absolute;bottom:3rem;left:50%;transform:translate(-50%);color:var(--color-surface-white);font-weight:400;text-transform:lowercase;font-size:1rem;overflow:visible}.scroll-down .arrow{position:relative;top:5px;margin:0 auto;width:20px;height:20px;background-size:contain;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 11 7'%3E%3Cpath fill='%23FFFCE1' d='M1.044.359.5.949l4.728 5.128.272.282.272-.282L10.5.948l-.544-.59L5.5 5.193 1.044.359Z'/%3E%3C/svg%3E")}.arrow-right{transform:rotate(-90deg);position:relative;top:-4px;margin:1rem auto;width:20px;height:20px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);background-size:contain}code[class*=language-],pre[class*=language-]{color:#bfc7d5;background:#201f1f;text-shadow:none;font-family:Fraktion Mono,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:16px;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;tab-size:4;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}code[class*=language-],pre[class*=language-]{color:var(--color-surface-white);background:#201f1f;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;max-width:600px}.token.comment{color:#9c9c9c;font-style:italic}.token.string,.token.inserted{color:#63d55a}.token.number{color:#f78c6c}.token.builtin,.token.char,.token.constant,.token.function{color:#82aaff}.token.punctuation,.token.selector{color:#c792ea}.token.variable{color:#bfc7d5}.token.class-name,.token.attr-name{color:#ffcb6b}.token.tag,.token.deleted{color:#ff5572}.token.operator{color:#89ddff}.token.boolean{color:#ff5874}.token.keyword{font-style:italic}.token.doctype{color:#c792ea;font-style:italic}.token.namespace{color:#b2ccd6}.token.url{color:#ddd}.fixed-nav{position:fixed;top:10px;left:50%;transform:translate(-50%);border:solid 2px var(--mid);border-radius:99px;z-index:999;display:flex;gap:1rem;padding:1rem 1.5rem;background-color:var(--dark)}.fixed-nav a{text-transform:lowercase;color:var(--color-surface50);text-decoration:none;transition:color .3s ease;font-size:.9rem;line-height:1}.fixed-nav a:hover{text-decoration:none}.gsap-marker-end,.gsap-marker-scroller-end{font-family:Mori!important;color:#fa7777!important;border-color:#fa7777!important}.gsap-marker-start,.gsap-marker-scroller-start{font-family:Mori!important;color:#abff84!important;border-color:#abff84!important}.heading-scroll{-webkit-text-fill-color:transparent;background:var(--color-scroll-gradient);-webkit-background-clip:text;background-clip:text}.heading-svg{-webkit-text-fill-color:transparent;background:var(--color-svg-heading-gradient);-webkit-background-clip:text;background-clip:text}.heading-core{-webkit-text-fill-color:transparent;background:var(--color-core-heading-gradient);-webkit-background-clip:text;background-clip:text}.heading-ui{-webkit-text-fill-color:transparent;background:var(--color-ui-gradient);-webkit-background-clip:text;background-clip:text}.heading-text{-webkit-text-fill-color:transparent;background:var(--color-text-gradient);-webkit-background-clip:text;background-clip:text}.braces{position:relative;color:var(--light)}.braces:before{position:absolute;content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 27 78'%3E%3Cpath fill='%23FFFCE1' d='M26.52 77.21h-5.75c-6.83 0-12.38-5.56-12.38-12.38V48.38C8.39 43.76 4.63 40 .01 40v-4c4.62 0 8.38-3.76 8.38-8.38V12.4C8.38 5.56 13.94 0 20.77 0h5.75v4h-5.75c-4.62 0-8.38 3.76-8.38 8.38V27.6c0 4.34-2.25 8.17-5.64 10.38 3.39 2.21 5.64 6.04 5.64 10.38v16.45c0 4.62 3.76 8.38 8.38 8.38h5.75v4.02Z'%3E%3C/path%3E%3C/svg%3E");right:100%;height:150%;top:-25%;aspect-ratio:1/2;background-repeat:no-repeat}.braces:after{position:absolute;content:"";background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 27 78'%3E%3Cpath fill='%23FFFCE1' d='M26.52 77.21h-5.75c-6.83 0-12.38-5.56-12.38-12.38V48.38C8.39 43.76 4.63 40 .01 40v-4c4.62 0 8.38-3.76 8.38-8.38V12.4C8.38 5.56 13.94 0 20.77 0h5.75v4h-5.75c-4.62 0-8.38 3.76-8.38 8.38V27.6c0 4.34-2.25 8.17-5.64 10.38 3.39 2.21 5.64 6.04 5.64 10.38v16.45c0 4.62 3.76 8.38 8.38 8.38h5.75v4.02Z'%3E%3C/path%3E%3C/svg%3E");left:100%;height:150%;transform:rotate(180deg);top:-25%;aspect-ratio:1/2;background-repeat:no-repeat}body{background-image:linear-gradient(rgba(255,255,255,.05) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.05) 2px,transparent 2px),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-2px -2px,-2px -2px,-1px -1px,-1px -1px}*{margin:0;padding:0;box-sizing:border-box}.spacer{width:100%;height:20vh;display:flex;align-items:center;justify-content:center}.main{position:relative;height:100vh;min-height:800px}.container{position:absolute;width:140px;height:140px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--color-surface50);border-radius:10px}.initial{left:60%;top:10%}.box{width:100px;height:100px;position:relative;z-index:10;border-radius:10px;background-size:contain;background-repeat:no-repeat;background-color:transparent;background-image:url(https://assets.codepen.io/16327/circle.png)}.second{left:10%;top:50%}.marker{border-radius:10px}.second .marker{width:100px;height:100px}.third{right:10%;bottom:3rem}.third .marker{width:100px;height:100px}