.container{margin-left:auto;margin-right:auto;max-width:100%;padding-left:1.25rem;padding-right:1.25rem}@media (min-width: 48rem){.container{max-width:46.25rem}}@media (min-width: 62rem){.container{max-width:61.25rem}}@media (min-width: 75rem){.container{max-width:77.5rem}}@media (min-width: 100rem){.container{max-width:92.5rem}}@media (min-width: 48rem){.container--fluid{max-width:unset;padding-left:3rem;padding-right:3rem}}@media (min-width: 62rem){.container--fluid{max-width:unset}}@media (min-width: 75rem){.container--fluid{max-width:unset;padding-left:4rem;padding-right:4rem}}@media (min-width: 100rem){.container--fluid{max-width:unset;padding-left:5rem;padding-right:5rem}}.header{border-bottom:1px solid var(--gray-100);padding:.5rem 0;position:sticky;top:0;z-index:11;background-color:var(--white)}.header-container{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-content:space-between}@media (min-width: 48rem){.header-container{display:flex}}.header__logo{display:inline-block;font-size:2rem;font-weight:700;color:var(--cyan-500)}.header .hamburger{display:grid;gap:.3125rem;justify-self:end}@media (min-width: 48rem){.header .hamburger{display:none}}.header .hamburger .line{width:1.5rem;height:.1875rem;background-color:var(--gray-800);border-radius:.3125rem}.header .nav{grid-column:1/-1;position:absolute;top:4rem;left:0;width:100%;background-color:var(--white);z-index:1}.header .nav__list{list-style:none;display:flex;flex-direction:column;gap:2rem;padding:1rem 0;font-weight:600;color:var(--cyan-500);align-items:center;font-size:1.2rem}@media (min-width: 48rem){.header .nav__list{flex-direction:row}}@media (min-width: 48rem){.header .nav{position:relative;top:unset;left:unset;width:unset;transform:translate(0)!important}}.title{text-align:center;padding:1rem 0 1.5rem}.title span{position:relative}.title span:after{content:"";position:absolute;width:100%;height:1rem;background-color:var(--cyan-100);bottom:0rem;left:0;z-index:-1;clip-path:polygon(5% 0%,100% 0%,95% 100%,0% 100%)}.description{max-width:70ch;margin-inline:auto;margin-bottom:2rem}@media (min-width: 36rem){.description{font-size:1.125rem}}.description a{color:var(--cyan-500);font-weight:600}.screen{margin-inline:auto;width:300px;max-width:100%;display:flex;border:5px solid var(--cyan-400);aspect-ratio:8/16;border-radius:1rem;background-color:var(--cyan-50);overflow:hidden;position:relative;z-index:10}.screen:after,.screen:before{content:"";height:5px;position:absolute;z-index:4;left:50%;translate:-50% 0%;background-color:var(--white)}.screen:after{width:25%;bottom:0rem;border-top-left-radius:1rem;border-top-right-radius:1rem}.screen:before{width:15%;top:0rem;border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.screen>.screen__image{background-image:url(https://images.unsplash.com/photo-1559827291-72ee739d0d9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80);height:100%;width:100%;position:absolute;z-index:1;left:0px;top:0px;background-size:300%;background-position:0% 0%;opacity:1}.screen__overlay{background:linear-gradient(var(--cyan-50),var(--cyan-50) 3px,transparent 3px,transparent 9px);background-size:100% 9px;height:100%;width:100%;opacity:.15;position:absolute;z-index:2;left:0px;top:0px}.btn{border-radius:.25rem;cursor:pointer;font-weight:500;transition:transform .3 ease-in-out}.btn--primary{background-color:var(--cyan-500);border:.0625rem solid var(--cyan-500);color:var(--white)}.btn--outline{background-color:transparent;border:.0625rem solid var(--cyan-500);color:var(--cyan-500)}.btn--regular{padding:.5rem 1.5rem}.btn--small{padding:0}.btn--large{padding:1rem 3rem}.btn:disabled{cursor:not-allowed;opacity:.8;pointer-events:none}.btn:active{transform:scale(.95)}.triggeranim .trigger{margin-bottom:1rem;text-align:center}.triggeranim .boxes{display:grid;justify-content:center;gap:1rem}.scrolltrigger .boxes{display:grid;gap:1rem;grid-template-columns:1fr 1fr}.scrolltrigger .boxes__box:nth-child(2n){justify-self:end}.scrolltrigger .placeholder{height:calc(100vh - 9.375rem);display:grid;place-content:center}.gsapeffects .boxes{display:grid;gap:1rem;grid-template-columns:1fr 1fr}@media (min-width: 36rem){.gsapeffects .boxes{grid-template-columns:1fr 1fr 1fr}}.gsapeffects .boxes__box:nth-child(2n){justify-self:end}@media (min-width: 36rem){.gsapeffects .boxes__box:nth-child(2n){justify-self:unset}}@media (min-width: 36rem){.gsapeffects .boxes__box{justify-self:center}}.globaltimeline .boxes{display:grid;gap:1rem}.globaltimeline .buttons{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.fromtoset .boxes,.matchmedia .boxes,.tweenmethods .boxes{display:grid;gap:1rem}.tweenmethods .boxes .box--wrapper{display:grid;gap:.5rem}.eases .boxes{display:grid;gap:1rem;overflow:hidden}.eases .boxes__box{width:3.125rem;height:3.125rem;border-radius:.25rem}.eases .boxes .box--wrapper{display:grid;gap:.5rem}.flip .boxes{display:flex;align-items:center;justify-content:space-between}.flip .boxes--alt{flex-direction:column;gap:1rem;margin-top:2rem}.flip .boxes--alt .box{padding:1rem;background-color:var(--cyan-800);color:var(--white);border-radius:.5rem}.flip .boxes--alt.reorder{flex-direction:row}#circle{width:3rem;height:3rem;border-radius:2rem;background-color:var(--cyan-100);filter:blur(10px);position:fixed;top:0;left:0;z-index:-1}.examples .links{margin-top:1rem;display:grid;gap:1rem}@media (min-width: 48rem){.examples .links{grid-template-columns:repeat(2,1fr)}}@media (min-width: 75rem){.examples .links{grid-template-columns:repeat(3,1fr)}}.examples .links__item{padding:.5rem 2rem .5rem 1rem;background-color:var(--cyan-600);border-radius:.25rem;color:var(--white);position:relative;font-weight:500}.examples .links__item:after{content:"";position:absolute;height:100%;width:1.25rem;right:.5rem;top:0;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20'%3E%3Cpath fill='white' d='m12.5 15.5-1.062-1.062 3.687-3.688H2v-1.5h13.125l-3.687-3.688L12.5 4.5 18 10Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}.home p{max-width:60ch;margin-inline:auto}.home .boxes{display:grid;gap:1rem;margin-top:2rem}.home .boxes .box{width:6rem;height:6rem;border-radius:.5rem;background-color:var(--cyan-800);color:var(--white);display:grid;place-content:center;font-size:2rem;font-weight:700}*,*:after,*:before{padding:0;margin:0;box-sizing:border-box}:root{--font-family: "Space Grotesk", sans-serif;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--neutral-100: #f5f5f5;--neutral-200: #e5e5e5;--neutral-300: #d4d4d4;--neutral-400: #a3a3a3;--neutral-500: #737373;--neutral-600: #525252;--neutral-700: #404040;--neutral-800: #262626;--neutral-900: #171717;--red-100: #fee2e2;--red-200: #fecaca;--red-300: #fca5a5;--red-400: #f87171;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-800: #991b1b;--red-900: #7f1d1d;--orange-100: #ffedd5;--orange-200: #fed7aa;--orange-300: #fdba74;--orange-400: #fb923c;--orange-500: #f97316;--orange-600: #ea580c;--orange-700: #c2410c;--orange-800: #9a3412;--orange-900: #7c2d12;--yellow-100: #fef9c3;--yellow-200: #fef08a;--yellow-300: #fde047;--yellow-400: #facc15;--yellow-500: #eab308;--yellow-600: #ca8a04;--yellow-700: #a16207;--yellow-800: #854d0e;--yellow-900: #713f12;--green-100: #dcfce7;--green-200: #bbf7d0;--green-300: #86efac;--green-400: #4ade80;--green-500: #22c55e;--green-600: #16a34a;--green-700: #15803d;--green-800: #166534;--green-900: #14532d;--teal-100: #ccfbf1;--teal-200: #99f6e4;--teal-300: #5eead4;--teal-400: #2dd4bf;--teal-500: #14b8a6;--teal-600: #0d9488;--teal-700: #0f766e;--teal-800: #115e59;--teal-900: #134e4a;--cyan-50: #ecfeff;--cyan-100: #cffafe;--cyan-200: #a5f3fc;--cyan-300: #67e8f9;--cyan-400: #06b6d4;--cyan-500: #0891b2;--cyan-600: #0e7490;--cyan-700: #155e75;--cyan-800: #164e63;--cyan-900: #ccfbf1;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-500: #3b82f6;--blue-600: #2563eb;--blue-700: #1d4ed8;--blue-800: #1e40af;--blue-900: #1e3a8a;--purple-100: #f3e8ff;--purple-200: #e9d5ff;--purple-300: #d8b4fe;--purple-400: #c084fc;--purple-500: #a855f7;--purple-600: #9333ea;--purple-700: #7e22ce;--purple-800: #6b21a8;--purple-900: #581c87;--pink-100: #fce7f3;--pink-200: #fbcfe8;--pink-300: #f9a8d4;--pink-400: #f472b6;--pink-500: #ec4899;--pink-600: #db2777;--pink-700: #be185d;--pink-800: #9d174d;--pink-900: #831843;--rose-100: #ffe4e6;--rose-200: #fecdd3;--rose-300: #fda4af;--rose-400: #fb7185;--rose-500: #f43f5e;--rose-600: #e11d48;--rose-700: #be123c;--rose-800: #9f1239;--rose-900: #881337;--white: #ffffff;--black: #000000}html,body{height:100%}body{font-family:var(--font-family);line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3{line-height:1}h1{font-size:1.75rem}@media (min-width: 48rem){h1{font-size:2rem}}a{text-decoration:none;color:inherit}a :where(:visited){color:inherit}.text-gray-100{color:#f3f4f6}.bg-gray-100{background-color:#f3f4f6}.text-gray-200{color:#e5e7eb}.bg-gray-200{background-color:#e5e7eb}.text-gray-300{color:#d1d5db}.bg-gray-300{background-color:#d1d5db}.text-gray-400{color:#9ca3af}.bg-gray-400{background-color:#9ca3af}.text-gray-500{color:#6b7280}.bg-gray-500{background-color:#6b7280}.text-gray-600{color:#4b5563}.bg-gray-600{background-color:#4b5563}.text-gray-700{color:#374151}.bg-gray-700{background-color:#374151}.text-gray-800{color:#1f2937}.bg-gray-800{background-color:#1f2937}.text-gray-900{color:#111827}.bg-gray-900{background-color:#111827}.text-neutral-100{color:#f5f5f5}.bg-neutral-100{background-color:#f5f5f5}.text-neutral-200{color:#e5e5e5}.bg-neutral-200{background-color:#e5e5e5}.text-neutral-300{color:#d4d4d4}.bg-neutral-300{background-color:#d4d4d4}.text-neutral-400{color:#a3a3a3}.bg-neutral-400{background-color:#a3a3a3}.text-neutral-500{color:#737373}.bg-neutral-500{background-color:#737373}.text-neutral-600{color:#525252}.bg-neutral-600{background-color:#525252}.text-neutral-700{color:#404040}.bg-neutral-700{background-color:#404040}.text-neutral-800{color:#262626}.bg-neutral-800{background-color:#262626}.text-neutral-900{color:#171717}.bg-neutral-900{background-color:#171717}.text-red-100{color:#fee2e2}.bg-red-100{background-color:#fee2e2}.text-red-200{color:#fecaca}.bg-red-200{background-color:#fecaca}.text-red-300{color:#fca5a5}.bg-red-300{background-color:#fca5a5}.text-red-400{color:#f87171}.bg-red-400{background-color:#f87171}.text-red-500{color:#ef4444}.bg-red-500{background-color:#ef4444}.text-red-600{color:#dc2626}.bg-red-600{background-color:#dc2626}.text-red-700{color:#b91c1c}.bg-red-700{background-color:#b91c1c}.text-red-800{color:#991b1b}.bg-red-800{background-color:#991b1b}.text-red-900{color:#7f1d1d}.bg-red-900{background-color:#7f1d1d}.text-orange-100{color:#ffedd5}.bg-orange-100{background-color:#ffedd5}.text-orange-200{color:#fed7aa}.bg-orange-200{background-color:#fed7aa}.text-orange-300{color:#fdba74}.bg-orange-300{background-color:#fdba74}.text-orange-400{color:#fb923c}.bg-orange-400{background-color:#fb923c}.text-orange-500{color:#f97316}.bg-orange-500{background-color:#f97316}.text-orange-600{color:#ea580c}.bg-orange-600{background-color:#ea580c}.text-orange-700{color:#c2410c}.bg-orange-700{background-color:#c2410c}.text-orange-800{color:#9a3412}.bg-orange-800{background-color:#9a3412}.text-orange-900{color:#7c2d12}.bg-orange-900{background-color:#7c2d12}.text-yellow-100{color:#fef9c3}.bg-yellow-100{background-color:#fef9c3}.text-yellow-200{color:#fef08a}.bg-yellow-200{background-color:#fef08a}.text-yellow-300{color:#fde047}.bg-yellow-300{background-color:#fde047}.text-yellow-400{color:#facc15}.bg-yellow-400{background-color:#facc15}.text-yellow-500{color:#eab308}.bg-yellow-500{background-color:#eab308}.text-yellow-600{color:#ca8a04}.bg-yellow-600{background-color:#ca8a04}.text-yellow-700{color:#a16207}.bg-yellow-700{background-color:#a16207}.text-yellow-800{color:#854d0e}.bg-yellow-800{background-color:#854d0e}.text-yellow-900{color:#713f12}.bg-yellow-900{background-color:#713f12}.text-green-100{color:#dcfce7}.bg-green-100{background-color:#dcfce7}.text-green-200{color:#bbf7d0}.bg-green-200{background-color:#bbf7d0}.text-green-300{color:#86efac}.bg-green-300{background-color:#86efac}.text-green-400{color:#4ade80}.bg-green-400{background-color:#4ade80}.text-green-500{color:#22c55e}.bg-green-500{background-color:#22c55e}.text-green-600{color:#16a34a}.bg-green-600{background-color:#16a34a}.text-green-700{color:#15803d}.bg-green-700{background-color:#15803d}.text-green-800{color:#166534}.bg-green-800{background-color:#166534}.text-green-900{color:#14532d}.bg-green-900{background-color:#14532d}.text-teal-100{color:#ccfbf1}.bg-teal-100{background-color:#ccfbf1}.text-teal-200{color:#99f6e4}.bg-teal-200{background-color:#99f6e4}.text-teal-300{color:#5eead4}.bg-teal-300{background-color:#5eead4}.text-teal-400{color:#2dd4bf}.bg-teal-400{background-color:#2dd4bf}.text-teal-500{color:#14b8a6}.bg-teal-500{background-color:#14b8a6}.text-teal-600{color:#0d9488}.bg-teal-600{background-color:#0d9488}.text-teal-700{color:#0f766e}.bg-teal-700{background-color:#0f766e}.text-teal-800{color:#115e59}.bg-teal-800{background-color:#115e59}.text-teal-900{color:#134e4a}.bg-teal-900{background-color:#134e4a}.text-cyan-50{color:#ecfeff}.bg-cyan-50{background-color:#ecfeff}.text-cyan-100{color:#cffafe}.bg-cyan-100{background-color:#cffafe}.text-cyan-200{color:#a5f3fc}.bg-cyan-200{background-color:#a5f3fc}.text-cyan-300{color:#67e8f9}.bg-cyan-300{background-color:#67e8f9}.text-cyan-400{color:#06b6d4}.bg-cyan-400{background-color:#06b6d4}.text-cyan-500{color:#0891b2}.bg-cyan-500{background-color:#0891b2}.text-cyan-600{color:#0e7490}.bg-cyan-600{background-color:#0e7490}.text-cyan-700{color:#155e75}.bg-cyan-700{background-color:#155e75}.text-cyan-800{color:#164e63}.bg-cyan-800{background-color:#164e63}.text-cyan-900{color:#ccfbf1}.bg-cyan-900{background-color:#ccfbf1}.text-blue-100{color:#dbeafe}.bg-blue-100{background-color:#dbeafe}.text-blue-200{color:#bfdbfe}.bg-blue-200{background-color:#bfdbfe}.text-blue-300{color:#93c5fd}.bg-blue-300{background-color:#93c5fd}.text-blue-400{color:#60a5fa}.bg-blue-400{background-color:#60a5fa}.text-blue-500{color:#3b82f6}.bg-blue-500{background-color:#3b82f6}.text-blue-600{color:#2563eb}.bg-blue-600{background-color:#2563eb}.text-blue-700{color:#1d4ed8}.bg-blue-700{background-color:#1d4ed8}.text-blue-800{color:#1e40af}.bg-blue-800{background-color:#1e40af}.text-blue-900{color:#1e3a8a}.bg-blue-900{background-color:#1e3a8a}.text-purple-100{color:#f3e8ff}.bg-purple-100{background-color:#f3e8ff}.text-purple-200{color:#e9d5ff}.bg-purple-200{background-color:#e9d5ff}.text-purple-300{color:#d8b4fe}.bg-purple-300{background-color:#d8b4fe}.text-purple-400{color:#c084fc}.bg-purple-400{background-color:#c084fc}.text-purple-500{color:#a855f7}.bg-purple-500{background-color:#a855f7}.text-purple-600{color:#9333ea}.bg-purple-600{background-color:#9333ea}.text-purple-700{color:#7e22ce}.bg-purple-700{background-color:#7e22ce}.text-purple-800{color:#6b21a8}.bg-purple-800{background-color:#6b21a8}.text-purple-900{color:#581c87}.bg-purple-900{background-color:#581c87}.text-pink-100{color:#fce7f3}.bg-pink-100{background-color:#fce7f3}.text-pink-200{color:#fbcfe8}.bg-pink-200{background-color:#fbcfe8}.text-pink-300{color:#f9a8d4}.bg-pink-300{background-color:#f9a8d4}.text-pink-400{color:#f472b6}.bg-pink-400{background-color:#f472b6}.text-pink-500{color:#ec4899}.bg-pink-500{background-color:#ec4899}.text-pink-600{color:#db2777}.bg-pink-600{background-color:#db2777}.text-pink-700{color:#be185d}.bg-pink-700{background-color:#be185d}.text-pink-800{color:#9d174d}.bg-pink-800{background-color:#9d174d}.text-pink-900{color:#831843}.bg-pink-900{background-color:#831843}.text-rose-100{color:#ffe4e6}.bg-rose-100{background-color:#ffe4e6}.text-rose-200{color:#fecdd3}.bg-rose-200{background-color:#fecdd3}.text-rose-300{color:#fda4af}.bg-rose-300{background-color:#fda4af}.text-rose-400{color:#fb7185}.bg-rose-400{background-color:#fb7185}.text-rose-500{color:#f43f5e}.bg-rose-500{background-color:#f43f5e}.text-rose-600{color:#e11d48}.bg-rose-600{background-color:#e11d48}.text-rose-700{color:#be123c}.bg-rose-700{background-color:#be123c}.text-rose-800{color:#9f1239}.bg-rose-800{background-color:#9f1239}.text-rose-900{color:#881337}.bg-rose-900{background-color:#881337}.mt-8{margin-top:.5rem}.mb-8{margin-bottom:.5rem}.ml-8{margin-left:.5rem}.mr-8{margin-right:.5rem}.mx-8{margin-left:.5rem;margin-right:.5rem}.my-8{margin-top:.5rem;margin-bottom:.5rem}.pt-8{padding-top:.5rem}.pb-8{padding-bottom:.5rem}.pl-8{padding-left:.5rem}.pr-8{padding-right:.5rem}.px-8{padding-left:.5rem;padding-right:.5rem}.py-8{padding-top:.5rem;padding-bottom:.5rem}.mt-16{margin-top:1rem}.mb-16{margin-bottom:1rem}.ml-16{margin-left:1rem}.mr-16{margin-right:1rem}.mx-16{margin-left:1rem;margin-right:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.pt-16{padding-top:1rem}.pb-16{padding-bottom:1rem}.pl-16{padding-left:1rem}.pr-16{padding-right:1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-16{padding-top:1rem;padding-bottom:1rem}.mt-20{margin-top:1.25rem}.mb-20{margin-bottom:1.25rem}.ml-20{margin-left:1.25rem}.mr-20{margin-right:1.25rem}.mx-20{margin-left:1.25rem;margin-right:1.25rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.pt-20{padding-top:1.25rem}.pb-20{padding-bottom:1.25rem}.pl-20{padding-left:1.25rem}.pr-20{padding-right:1.25rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.mt-24{margin-top:1.5rem}.mb-24{margin-bottom:1.5rem}.ml-24{margin-left:1.5rem}.mr-24{margin-right:1.5rem}.mx-24{margin-left:1.5rem;margin-right:1.5rem}.my-24{margin-top:1.5rem;margin-bottom:1.5rem}.pt-24{padding-top:1.5rem}.pb-24{padding-bottom:1.5rem}.pl-24{padding-left:1.5rem}.pr-24{padding-right:1.5rem}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-24{padding-top:1.5rem;padding-bottom:1.5rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.ml-32{margin-left:2rem}.mr-32{margin-right:2rem}.mx-32{margin-left:2rem;margin-right:2rem}.my-32{margin-top:2rem;margin-bottom:2rem}.pt-32{padding-top:2rem}.pb-32{padding-bottom:2rem}.pl-32{padding-left:2rem}.pr-32{padding-right:2rem}.px-32{padding-left:2rem;padding-right:2rem}.py-32{padding-top:2rem;padding-bottom:2rem}.mt-40{margin-top:2.5rem}.mb-40{margin-bottom:2.5rem}.ml-40{margin-left:2.5rem}.mr-40{margin-right:2.5rem}.mx-40{margin-left:2.5rem;margin-right:2.5rem}.my-40{margin-top:2.5rem;margin-bottom:2.5rem}.pt-40{padding-top:2.5rem}.pb-40{padding-bottom:2.5rem}.pl-40{padding-left:2.5rem}.pr-40{padding-right:2.5rem}.px-40{padding-left:2.5rem;padding-right:2.5rem}.py-40{padding-top:2.5rem;padding-bottom:2.5rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.animation{padding-bottom:3.125rem}.boxes__box{width:6.25rem;height:6.25rem;border-radius:.5rem;background-color:var(--cyan-500);color:var(--white);font-size:1.2rem;font-weight:600;display:grid;place-content:center;text-align:center}