*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.h-screen{height:100vh}*{box-sizing:border-box}@font-face{font-family:Lanseyu;src:url(/fonts/lanseyu.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Lanseyu;src:url(/fonts/lanseyu.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}: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:gray;--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,rgba(214,255,195,0)),#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,rgba(254,197,251,0)),#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(0.755,0.05,0.855,0.06);--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.86,0,0.07,1);--ease-out-quart:cubic-bezier(0.175,0.79,0.38,0.905);--ease-in-out-quart:cubic-bezier(0.645,0.045,0.355,1);--dark:var(--color-just-black);--grey-dark:#42433d;--light:var(--color-surface-white);--mid:#7c7c6f;--grey:#gray;--gray:#gray;--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);--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));--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{border-radius:12px}.box,.circle{width:75px;height:75px;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}.circle{border-radius:99px}.flex-row{width:100%;justify-content:space-around}.center,.flex-row{display:flex;align-items:center}.center{justify-content:center}.green{background-color:var(--green)}.blue{background-color:var(--blue)}.purple{background-color:var(--purple)}.red{background-color:var(--red)}.orange{background-color:var(--orange)}.dark{background-color:var(--dark);color:var(--light)}.light{background-color:var(--light);color:var(--dark)}.text-light{color:var(--light)}.text-dark{color:var(--dark)}.gray,.grey{background-color:var(--grey)}body{color:var(--color-surface-white);background-color:var(--dark);font-family:Lanseyu,sans-serif;font-weight:400;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,.lead,h4{font-size:var(--step-1)}a{color:var(--green);font-weight:700;text-decoration:none}a:hover{text-decoration:underline}.light a{color:var(--green-dark)}button{display:inline-block;outline:none;background:var(--dark);border:2px solid var(--light);color:var(--light);text-decoration:none;border-radius:99px;padding:12px 25px;text-transform:uppercase;font-weight:600;cursor:pointer;line-height:18px}.gsap-logo{width:20vw;max-width:150px;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{min-height:100vh;padding-left:.6rem;padding-right:.6rem}.panel.gray{background-color:#777;background-image:var(--gradient-macha)}.panel.blue{background-color:#2c7ad2;background-image:var(--gradient-summer-fair)}.panel.orange{background-color:#e77614;background-image:var(--gradient-orange-crush)}.panel.red{background-color:#c82736;background-image:var(--gradient-lipstick)}.panel.purple{background-color:#8d3dae;background-image:var(--gradient-purple-haze)}.panel.green{background-color:#28a92b;background-image:var(--gradient-macha)}.scroll-down{position:absolute;bottom:30px;left:50%;transform:translate(-50%);color:black;font-weight:400;text-transform:uppercase;font-size:16px;overflow:visible}.scroll-down .arrow{position:relative;top:-4px;margin:0 auto;width:20px;height:20px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iYmxhY2siIGQ9Ik00ODMuMiwxOTIuMmMtMjAuNS0yMC41LTUzLjUtMjAuOC03My43LTAuNkwyNTcsMzQ0LjFMMTA0LjUsMTkxLjZjLTIwLjItMjAuMi01My4yLTE5LjktNzMuNywwLjYKCWMtMjAuNSwyMC41LTIwLjgsNTMuNS0wLjYsNzMuN2wxOTAsMTkwYzEwLjEsMTAuMSwyMy40LDE1LjEsMzYuOCwxNWMxMy4zLDAuMSwyNi43LTQuOSwzNi44LTE1bDE5MC0xOTAKCUM1MDMuOSwyNDUuNyw1MDMuNywyMTIuNyw0ODMuMiwxOTIuMnoiLz4KPC9zdmc+);background-size:contain}.panel li strong,.panel p strong{color:white;font-weight:400}.panel li code,.panel p code{background-color:rgba(255,255,255,.15);padding:2px 4px;border-radius:5px}.panel li{margin:0}pre.prettyprint{max-width:100%;overflow:auto}ul pre.prettyprint{margin-left:-.5rem}pre{--ifm-pre-background:var(--ifm-color-gray-800)!important;--ifm-font-family-monospace:"Fraktion Mono"}code{border:none;border-radius:4px;padding:1rem;font-weight:700;font-size:1.2rem;vertical-align:baseline;background:#28292b;color:#f5f4e6de}code .token.comment{color:#9c9c9c;font-style:italic}code .token.inserted,code .token.string{color:#63d55a}code .token.number{color:rgb(247,140,108)}code .token.builtin,code .token.char,code .token.constant,code .token.function{color:rgb(130,170,255)}code .token.punctuation,code .token.selector{color:rgb(199,146,234)}code .token.variable{color:rgb(191,199,213)}code .token.attr-name,code .token.class-name{color:rgb(255,203,107)}code .token.deleted,code .token.tag{color:rgb(255,85,114)}code .token.operator{color:rgb(137,221,255)}code .token.boolean{color:rgb(255,88,116)}code .token.keyword{font-style:italic}code .token.doctype{color:rgb(199,146,234);font-style:italic}code .token.namespace{color:rgb(178,204,214)}code .token.url{color:rgb(221,221,221)}.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://gsap.com/_img/codepen/flair/Flair-0.png);background-size:contain;background-repeat:no-repeat;will-change:transform}.flair--2{background-image:url(https://gsap.com/_img/codepen/flair/Flair-2.png)}.flair--3{background-image:url(https://gsap.com/_img/codepen/flair/Flair-3.png)}.flair--4{background-image:url(https://gsap.com/_img/codepen/flair/Flair-4.png)}.flair--5{background-image:url(https://gsap.com/_img/codepen/flair/Flair-5.png)}.flair--6{background-image:url(https://gsap.com/_img/codepen/flair/Flair-6.png)}.flair--7{background-image:url(https://gsap.com/_img/codepen/flair/Flair-7.png)}.flair--8{background-image:url(https://gsap.com/_img/codepen/flair/Flair-8.png)}.flair--9{background-image:url(https://gsap.com/_img/codepen/flair/Flair-9.png)}.flair--10{background-image:url(https://gsap.com/_img/codepen/flair/Flair-10.png)}.flair--11{background-image:url(https://gsap.com/_img/codepen/flair/Flair-11.png)}.flair--12{background-image:url(https://gsap.com/_img/codepen/flair/Flair-12.png)}.flair--13{background-image:url(https://gsap.com/_img/codepen/flair/Flair-13.png)}.flair--14{background-image:url(https://gsap.com/_img/codepen/flair/Flair-14.png)}.flair--15{background-image:url(https://gsap.com/_img/codepen/flair/Flair-15.png)}.flair--16{background-image:url(https://gsap.com/_img/codepen/flair/Flair-16.png)}.flair--17{background-image:url(https://gsap.com/_img/codepen/flair/Flair-17.png)}.flair--18{background-image:url(https://gsap.com/_img/codepen/flair/Flair-18.png)}.flair--19{background-image:url(https://gsap.com/_img/codepen/flair/Flair-19.png)}.flair--20{background-image:url(https://gsap.com/_img/codepen/flair/Flair-20.png)}.flair--21{background-image:url(https://gsap.com/_img/codepen/flair/Flair-21.png)}.flair--22{background-image:url(https://gsap.com/_img/codepen/flair/Flair-22.png)}.flair--23{background-image:url(https://gsap.com/_img/codepen/flair/Flair-23.png)}.flair-cont{display:flex;align-items:center;justify-content:space-around;gap:2rem;flex-wrap:wrap}.gradient-green{background:var(--gradient-macha),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.gradient-green-2{background:var(--gradient-emerald-city),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.gradient-orange{background:var(--gradient-orange-crush),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.gradient-purple{background:var(--gradient-purple-haze),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.gradient-blue-2{background:var(--gradient-summer-fair),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.gradient-blue{background:var(--color-ui-gradient),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.gradient-red{background:var(--gradient-lipstick),url(https://gsap.com/_img/codepen/flair/noise.png);background-blend-mode:color-dodge}.noise{position:relative}.noise:after{content:"";position:absolute;top:0;bottom:0;right:0;left:0;background:url(https://gsap.com/_img/codepen/flair/noise.png);opacity:.4;pointer-events:none}body{overscroll-behavior:none;margin:0;padding:0}.header{display:flex;justify-content:center;align-items:center;flex-direction:column}#smooth-content .home{overflow:visible;width:100%;height:4000px;background-image:linear-gradient(rgba(255,255,255,.07) 2px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.07) 2px,transparent 0),linear-gradient(rgba(255,255,255,.06) 1px,transparent 0),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 0);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-2px -2px,-2px -2px,-1px -1px,-1px -1px}button{position:relative}.box{position:absolute;left:50%;transform:translateX(-50%);z-index:100}.box.active{border:2px solid red}.box-a{top:200px}.box-b{top:600px}.box-c{top:1000px}.line{visibility:hidden;width:2px;height:4000px;position:absolute;left:400px;top:0;background-color:#777}.title{margin-top:4vh;margin-bottom:4vh;text-align:center}.title[id=title-1]{opacity:0}footer{position:fixed;right:0;bottom:0;padding:6px 10px 10px 12px;border-top-left-radius:26px;z-index:100;background-color:rgba(0,0,0,.5)}.end{position:absolute;top:2400px;transform:translateY(-100%);font-size:30px;color:white}.nav-header{width:100%;height:80px;display:flex;justify-content:space-between;align-items:flex-end;position:fixed;z-index:10;top:0;left:0;right:0;padding:0;border-radius:0;background-color:transparent;background-color:rgba(0,0,0,.5)}.brand,nav{padding:0 1rem}nav{align-items:flex-end;height:100%}nav,nav ul{display:flex}nav ul{margin:0;padding:0;gap:.75rem;list-style:none}nav li a{padding:.5rem 1rem .25rem;color:var(--mid);text-decoration:none;font-size:18px;display:block}nav li a:hover{background-color:rgba(255,255,255,.1)}header{width:100%;height:80px;background:rgba(0,0,0,.25);display:flex;justify-content:space-between;align-items:flex-end;position:fixed;top:0;left:0;right:0;z-index:100}header ul{list-style:none;margin:0;padding:0 1rem;display:flex;gap:1rem}header ul li{display:inline-block}header ul a{color:white;text-decoration:none;display:block;padding:.5rem 1rem}header .icon{padding-left:1rem}.container{max-width:2500px;margin:0 auto}.spacer{height:100vh}.image-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:1rem;grid-row-gap:33.3vh;width:100vw;margin:0 auto}.image-grid .image_cont{position:relative;overflow:hidden;height:80vh;max-height:500px}.image-grid img{position:absolute;width:100%;height:160%;-o-object-fit:cover;object-fit:cover;bottom:0}.image-grid .image_cont:first-child{grid-column:1/-1;grid-row:1;height:95vh}.image-grid .image_cont:nth-child(2){grid-column:2/span 8;grid-row:2;height:60vh}.image-grid .image_cont:nth-child(3){grid-column:4/span 8;grid-row:3;height:60vh}.image-grid .image_cont:nth-child(3) img{-o-object-position:right;object-position:right}.image-grid .image_cont:nth-child(4){grid-column:1/-1;grid-row:4;height:60vh}.image-grid .image_cont:nth-child(5){grid-column:4/span 8;grid-row:5;height:80vh}.image-grid .image_cont:nth-child(6){grid-column:2/span 8;grid-row:6;height:80vh}@media screen and (min-width:1000px){.image-grid .image_cont{max-height:unset}.image-grid .image_cont:nth-child(2){grid-column:2/span 4}.image-grid .image_cont:nth-child(3),.image-grid .image_cont:nth-child(5){grid-column:8/span 4}.image-grid .image_cont:nth-child(6){grid-column:2/span 4}}.overlay{position:fixed;height:100vh;display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:1rem;grid-row-gap:10rem;width:100vw;margin:0 auto;z-index:-1}.overlay div{opacity:.2;border-left:.5px solid white;border-right:.5px solid white}.vinyl-player{position:relative;width:100%;max-width:600px;margin:0 auto;height:600px;display:flex;justify-content:center;align-items:center;perspective:1000px}.vinyl-disc{transform-style:preserve-3d;transition:transform .5s ease;box-shadow:0 10px 30px rgba(0,0,0,.5),0 5px 15px rgba(0,0,0,.3)}.vinyl-disc:before{top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(40,40,40,.8) 0,rgba(20,20,20,.9) 40%,rgba(10,10,10,1) 70%);opacity:0;transition:opacity .5s ease}.vinyl-disc.active{transform:scale(1.1) translateZ(50px) rotateX(5deg)}.vinyl-disc.active:before{opacity:1}.disc-image{filter:contrast(1.2) brightness(.9);transition:all .5s ease}.vinyl-disc.active .disc-image{filter:contrast(1.4) brightness(1.1) saturate(1.2)}.vinyl-grooves{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.1) 0,rgba(255,255,255,.05) 1px,transparent 2px,transparent 3px);opacity:0;transition:opacity .5s ease;pointer-events:none}.vinyl-disc.active .vinyl-grooves{opacity:1}.vinyl-reflection{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 40%,rgba(255,255,255,.05) 50%,transparent 70%);opacity:0;transition:opacity .5s ease;pointer-events:none}.vinyl-disc.active .vinyl-reflection{opacity:1}.needle{position:absolute;top:0;right:50%;width:100px;height:200px;z-index:2;transform-origin:20% 20%;transform:rotate(-30deg)}.needle img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.vinyl-disc{position:relative;width:300px;height:300px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at center,#000000 30%,#1a1a1a 70%);box-shadow:0 0 20px rgba(0,0,0,.3);transform-origin:center center;cursor:pointer;transition:transform .3s ease}.vinyl-disc:hover{transform:scale(1.02)}.vinyl-disc:before{content:"";position:absolute;top:50%;left:50%;width:50px;height:50px;background:radial-gradient(circle at center,#ffffff 0,#dddddd 100%);border-radius:50%;transform:translate(-50%,-50%);z-index:1;box-shadow:0 0 10px rgba(0,0,0,.2)}.disc-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transform-origin:center center;filter:contrast(1.2)}.play-button{position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);padding:10px 30px;border:none;border-radius:25px;background:var(--gradient-purple-haze);color:white;font-family:Lanseyu,sans-serif;font-size:16px;cursor:pointer;transition:all .3s ease}.play-button:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 0 15px rgba(247,189,248,.5)}.box{margin-top:50px}.lyrics-container{margin-top:2rem;padding:2rem;text-align:center;font-family:Lanseyu,sans-serif;font-size:1.5rem;color:var(--color-surface-white)}.lyrics-line{margin:1rem 0;line-height:1;opacity:0;will-change:opacity}.self-introduction{min-height:100vh;padding:4rem 2rem;color:#ffffff;display:flex;align-items:center}.intro-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;opacity:0;transform:translateY(50px)}.intro-left{padding:2rem}.intro-title{font-size:3rem;margin-bottom:1rem;font-weight:700}.highlight{background:linear-gradient(120deg,#84fab0,#8fd3f4);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.intro-text{font-size:1.5rem;margin-bottom:2rem;color:#a8a8a8}.skills-container{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.skill-tag{background:rgba(255,255,255,.1);padding:.5rem 1rem;border-radius:20px;font-size:.9rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.skill-tag:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}.intro-description{line-height:1.8;color:#cccccc;margin-bottom:2rem}.social-links{display:flex;gap:1rem}.social-link{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:all .3s ease}.social-link:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}.social-link svg{fill:#ffffff;width:20px;height:20px}.avatar-section{margin-bottom:2rem;display:flex;justify-content:center}.avatar-container{position:relative;width:400px;height:400px;margin-bottom:2rem}.avatar-frame{position:relative;width:100%;height:100%;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;overflow:hidden;background:linear-gradient(45deg,#84fab0,#8fd3f4);animation:borderAnimation 8s ease-in-out infinite}.avatar-image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.avatar-decoration{position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;border-radius:30% 70% 70% 30%/30% 30% 70% 70%;background:linear-gradient(45deg,#84fab050,#8fd3f450);z-index:-1;animation:decorationAnimation 8s ease-in-out infinite;filter:blur(10px)}@keyframes borderAnimation{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}50%{border-radius:70% 30% 30% 70%/70% 70% 30% 30%}to{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}}@keyframes decorationAnimation{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}.avatar-frame:hover .avatar-image{transform:scale(1.1)}.intro-right{padding:2rem}.experience-card{border-radius:24px;padding:3rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.1);transition:transform .3s ease}.experience-card:hover{transform:translateY(-5px)}.experience-card h3{font-size:2rem;margin-bottom:3rem;color:#ffffff;background:linear-gradient(90deg,#84fab0,#8fd3f4);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.timeline{display:flex;flex-direction:column;gap:3rem;position:relative;max-width:1200px;margin:0 auto}.timeline:before{content:"";position:absolute;left:50%;top:0;height:100%;width:2px;background:linear-gradient(180deg,#84fab0,#8fd3f4);opacity:.3;transform:translateX(-50%)}.timeline-item{display:flex;justify-content:center;opacity:0;position:relative;gap:2rem;width:100%}.timeline-item:nth-child(odd) .content{margin-left:auto;transform:translateX(30px)}.timeline-item:nth-child(2n) .content{margin-right:auto;transform:translateX(-30px)}.timeline-item:nth-child(odd){flex-direction:row-reverse}.timeline-item:before{content:"";top:8px;width:12px;height:12px;border-radius:50%;background:#84fab0;box-shadow:0 0 20px rgba(132,250,176,.5)}.timeline-item:before,.year{position:absolute;left:50%;transform:translateX(-50%)}.year{top:-2rem;font-size:1.4rem;font-weight:700;color:#84fab0;white-space:nowrap;background:rgba(0,0,0,.3);padding:.5rem 1rem;border-radius:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.timeline-item .content{background:rgba(255,255,255,.03);padding:1.5rem;border-radius:16px;border:1px solid rgba(255,255,255,.05);transition:transform .3s ease;width:45%}.timeline-item .content:hover{transform:translateX(10px);background:rgba(255,255,255,.05)}.timeline-item .content h4{font-size:1.3rem;margin-bottom:1rem;color:#ffffff}.timeline-item .content p{color:#a8a8a8;line-height:1.6}.timeline-item .content .skills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.timeline-item .content .skill-badge{background:rgba(132,250,176,.1);color:#84fab0;padding:.3rem .8rem;border-radius:20px;font-size:.9rem;transition:all .3s ease}.timeline-item .content .skill-badge:hover{background:rgba(132,250,176,.2);transform:translateY(-2px)}