@font-face{font-family:Inter Variable;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2)format("woff2")}:root{--vw:100vw;--vh:100vh;--ivh:100dvh;--rem:1px;--main-font-name:"Inter Variable";--display-font-name:"Inter Variable";--cjk-font:"PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC";--main-font:var(--main-font-name), var(--cjk-font), "Helvetica Neue", Arial, sans-serif;--display-font:var(--display-font-name), var(--cjk-font), "Helvetica Neue", Arial, sans-serif;--color-black:#0a0a0a;--color-white:#fafafa;--color-white20:#fafafa20;--color-bg-dark:#0a0a0a;--color-bg-dark20:#0a0a0a20;--color-bg-dark40:#0a0a0a40;--color-bg-dark60:#0a0a0a60;--color-bg-dark-transparent:#0a0a0a00;--color-bg-grey:#171717;--color-pop-green:#21ffc0;--color-grey:#e6e6e6;--color-accent:var(--color-pop-green);--color-text-light:var(--color-white);--grid-margin:30rem;--grid-gutter:16rem;--grid-column:calc(var(--vw) / 12 - var(--grid-gutter) * 11 / 12 - var(--grid-margin) * 2 / 12);--gap-xs:10rem;--gap-s:15rem;--gap-m:30rem;--gap-l:60rem;--gap-xl:90rem;--gap-xxl:120rem;--gap-xxxl:180rem;--gap-20:20rem;--gap-45:45rem;--radius-xs:4rem;--radius-s:8rem;--radius-m:12rem;--radius-l:16rem;--radius-xl:20rem;--radius-full:9999px;--padding:10rem;--ease-spring:linear(0, .0014, .0055 1.03%, .0239, .053 3.44%, .0961 4.81%, .1957 7.39%, .4354 12.88%, .5484, .6494, .7362, .8083 23.88%, .8696, .9168 29.72%, .9368, .9536 32.81%, .9793 35.9%, .997 39.17%, 1.0084 42.77%, 1.0142 47.07%, 1.0144 53.43%, 1.0054 68.37%, 1.0019 77.3%, .9998 99.98%);--ease-quad-in-out:cubic-bezier(.455, .03, .515, .955);--ease-expo-out:cubic-bezier(.19, 1, .22, 1);overscroll-behavior:none}@media screen and (width<=900px){:root{--padding:10rem;--button-height:38rem;--grid-margin:20rem;--grid-gutter:15rem;--grid-column:calc(var(--vw) / 6 - var(--grid-gutter) * 5 / 6 - var(--grid-margin) * 2 / 6)}}@media screen and (width<=420px){:root{--padding:8rem;--grid-margin:15rem;--grid-gutter:10rem;--grid-column:calc(var(--vw) / 6 - var(--grid-gutter) * 5 / 6 - var(--grid-margin) * 2 / 6)}}*,:before,:after{box-sizing:border-box}html{font-family:var(--main-font);font-size:var(--rem);overscroll-behavior:none;height:100%;min-height:100%}html,body{background-color:var(--color-bg-dark);color:var(--color-white);font-family:var(--main-font);letter-spacing:-.04em;-ms-overflow-style:none;scrollbar-width:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;margin:0;font-weight:400;line-height:1;overflow-x:hidden}body{font-size:18rem}html::-webkit-scrollbar{display:none}body::-webkit-scrollbar{display:none}@media screen and (width<=900px){body{font-size:19rem}}body{height:100dvh;overflow:hidden}button{color:inherit;font:inherit;letter-spacing:inherit;background:0 0;border:none;margin:0;padding:0}a{color:inherit;text-decoration:none}p{margin:0}img,svg{display:block}::selection{background:var(--color-pop-green);color:var(--color-black)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.bg-grid{object-fit:cover;opacity:.4;pointer-events:none;z-index:0;width:auto;min-width:100%;height:100%;transition:opacity .5s ease-out;position:fixed;top:0;left:0}.webgl{z-index:0;width:100%;height:100%;transition:opacity .5s ease-out;display:block;position:fixed;top:0;left:0}.webgl.hide,.bg-grid.hide{opacity:0;pointer-events:none}.home-overlay-wrapper{transition:opacity .5s ease-out}.home-overlay-wrapper.hide{opacity:0;pointer-events:none}.logo-wrapper{cursor:pointer;height:64rem;left:var(--grid-margin);top:var(--grid-margin);z-index:20;width:64rem;position:fixed}.logo-wrapper .logo{width:100%;height:100%;transition:transform .2s ease-out;display:block}.logo-wrapper:active .logo{transform:scale(.9)}.logo-mark{will-change:transform;width:100%;height:100%;animation:24s linear infinite logo-spin}@keyframes logo-spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)scale(1.02)}to{transform:rotate(360deg)}}.logo-tag-wrapper{opacity:0;pointer-events:none;transform-origin:0;height:fit-content;transition:opacity .2s ease-out, transform .5s var(--ease-spring);width:fit-content;position:absolute;top:16rem;left:calc(100% + 8rem);transform:scale(.5)translate(-10%)}@media screen and (hover:hover) and (pointer:fine){.logo-wrapper:hover .logo-tag-wrapper{opacity:1;transform:scale(1)rotate(-5deg)translate(0)translateY(-12rem)}}.logo-wrapper:active .logo-tag-wrapper{transform:scale(.95)rotate(-5deg)translate(0)translateY(-12rem)}.logo-tag-wrapper .tag{width:80rem;height:auto}.logo-tag-wrapper .tag-text{fill:var(--color-black);font-family:var(--main-font);letter-spacing:-.04em;font-size:26rem;font-weight:600}.logo-tag-wrapper .star{z-index:-1;width:32rem;height:auto;position:absolute;top:-12rem;right:-12rem}.switch{left:50%;top:calc(var(--grid-margin) + 15rem);z-index:20;align-items:center;gap:20rem;transition:opacity .3s ease-out;display:flex;position:fixed;transform:translate(-50%)}.switch .button{color:var(--color-white);opacity:.4;border:none;min-width:60rem;font-size:18rem;font-weight:500;transition:opacity .3s ease-out;display:flex}.switch .button:first-child{justify-content:flex-end}.switch .button button{cursor:pointer;position:relative;overflow:hidden}.switch .button button span{transition:transform .3s var(--ease-spring), opacity .3s ease;-webkit-user-select:none;user-select:none;display:block}.switch .button button span:nth-child(2){opacity:0;position:absolute;top:0;left:0;transform:translateY(-100%)}.switch .button button:hover span:first-child{opacity:0;transform:translateY(100%)}.switch .button button:hover span:nth-child(2){opacity:1;transform:translateY(0)}.switch .button.active{opacity:1}.switch .button.active button span:first-child{opacity:0;transform:translateY(100%)}.switch .button.active button span:nth-child(2){opacity:1;transform:translateY(0)}.switch .dot{background-color:var(--color-white);border-radius:50%;width:8rem;height:8rem}.menu-nav{right:var(--grid-margin);top:var(--grid-margin);z-index:20;position:fixed}.menu-button-wrapper{z-index:30;width:fit-content;height:fit-content;position:relative}.menu-button-wrapper .button{color:var(--color-bg-dark);cursor:pointer;pointer-events:all;-webkit-user-select:none;user-select:none;z-index:30;transition:transform .3s var(--ease-spring);will-change:transform;border:none;border-radius:100rem;align-items:center;padding:15rem 28rem 15rem 15rem;font-size:18rem;font-weight:500;display:flex;position:relative}@media screen and (hover:hover) and (pointer:fine){.menu-button-wrapper .button:not(.opened):hover{transform:scale(1.03)}}.menu-button-wrapper .button .text{transform-origin:0;transition:opacity .2s .35s,transform .2s .35s}.menu-button-wrapper .button.opened{cursor:default}.menu-button-wrapper .button.opened .text{opacity:0;transition-delay:0s;transform:translate(5px)}.menu-button-wrapper .button .letter{transition:none;display:inline-block}.close-button{background:var(--color-bg-dark);cursor:pointer;transform-origin:100% 0;height:48rem;transition:transform .8s var(--ease-spring), right .8s var(--ease-spring), top .8s var(--ease-spring);z-index:30;border-radius:24rem;justify-content:center;align-items:center;width:48rem;margin-left:7rem;display:flex;position:absolute;top:20rem;right:20rem}.close-button svg{color:var(--color-white);transition:transform .5s,opacity .3s}.close-button .text{color:var(--color-bg-dark);font-size:18rem;font-weight:500;transition:opacity .3s .2s,transform .3s .2s;position:absolute;left:-50rem}.close-button.closed{pointer-events:none;top:20rem;right:15rem;transform:scale(.125)}.close-button.closed svg{opacity:0;transform:rotate(-45deg)}.close-button.closed .text{opacity:0;transition:opacity .1s,transform .1s;transform:translate(20px)}.close-button.opened{pointer-events:auto}.subwrapper{background-color:var(--color-white);height:48rem;right:var(--grid-margin);top:var(--grid-margin);transition:width .9s var(--ease-spring), height 1s var(--ease-spring), border-radius .9s ease;z-index:15;border-radius:24rem;width:86.8rem;position:fixed;overflow:hidden}.subwrapper.opened{height:calc(100dvh - var(--grid-margin) * 2);width:calc(var(--grid-column) * 4 + var(--grid-gutter) * 4);border-radius:16rem}.menu-wrapper{pointer-events:none;height:48rem;right:var(--grid-margin);top:var(--grid-margin);transition:width .9s var(--ease-spring), height 1s var(--ease-spring);z-index:40;width:86.8rem;position:fixed;overflow:hidden}.menu-wrapper.opened{height:calc(100dvh - var(--grid-margin) * 2);width:calc(var(--grid-column) * 4 + var(--grid-gutter) * 4)}.menu-wrapper .container{color:var(--color-bg-dark);height:calc(100dvh - var(--grid-margin) * 2);padding:var(--gap-20);width:calc(var(--grid-column) * 4 + var(--grid-gutter) * 4);flex-direction:column;justify-content:center;padding-left:45rem;display:flex;position:absolute;top:0;right:0}@media (width<=1400px){.subwrapper.opened,.menu-wrapper.opened,.menu-wrapper .container{width:calc(var(--grid-column) * 5 + var(--grid-gutter) * 4)}}@media (width<=1024px){.subwrapper.opened,.menu-wrapper.opened,.menu-wrapper .container{width:calc(var(--grid-column) * 6 + var(--grid-gutter) * 5)}}@media screen and (width<=900px){.menu-wrapper .container{padding-left:var(--gap-20)}}.menu-wrapper .links{gap:var(--gap-s);pointer-events:none;flex-direction:column;display:flex}.menu-wrapper .links.opened{pointer-events:auto}.menu-wrapper .links .link{width:fit-content;position:relative}.menu-wrapper .links .link a{cursor:pointer;letter-spacing:-.05em;text-align:left;transition:padding-left .5s var(--ease-spring);width:fit-content;margin:0;font-size:80rem;font-weight:500;line-height:100%;display:block;position:relative}.menu-wrapper .links .link a:before{background-color:var(--color-bg-dark);content:"";opacity:0;height:24rem;transition:transform .5s var(--ease-spring), opacity .5s var(--ease-spring);border-radius:24rem;width:24rem;position:absolute;top:50%;left:0;transform:translateY(-50%)scale(0)}@media screen and (hover:hover) and (pointer:fine){.menu-wrapper .links .link a:hover{padding-left:40rem}.menu-wrapper .links .link a:hover:before{opacity:1;transform:translateY(-50%)scale(1)}}@media screen and (width<=900px){.menu-wrapper .links .link a{font-size:56rem}}.menu-footer{padding:var(--gap-20);pointer-events:all;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20rem;width:100%;padding-left:45rem;display:flex;position:absolute;bottom:0;left:0}.menu-footer>a{color:var(--color-bg-dark);will-change:opacity, transform;font-size:16rem;font-weight:500;text-decoration:none}.menu-footer>a.closed{opacity:0;transition:opacity .3s,transform .3s;transform:translateY(-10px)translate(10px)}.menu-footer>a.opened{opacity:1;transition:opacity .5s .3s,transform .5s .3s;transform:translateY(0)translate(0)}@media screen and (width<=900px){.menu-footer{padding-left:var(--gap-20)}}.menu-social-links{will-change:opacity, transform;display:flex}.menu-social-links.closed{opacity:0;transition:opacity .3s,transform .3s;transform:translateY(-10px)translate(10px)}.menu-social-links.opened{opacity:1;transition:opacity .5s .4s,transform .5s .4s;transform:translateY(0)translate(0)}.menu-social-links .social-link{padding:0 4rem;display:block}.menu-social-links .social-link:first-child{padding-left:0}.menu-social-links .social-link:last-child{padding-right:0}.menu-social-links .social-link-inner{background-color:var(--color-bg-dark);color:var(--color-white);height:48rem;transition:transform .4s var(--ease-spring), background-color .3s ease, color .3s ease;will-change:transform;border-radius:50%;justify-content:center;align-items:center;width:48rem;display:flex}@media screen and (hover:hover) and (pointer:fine){.menu-social-links .social-link:hover .social-link-inner{background-color:var(--color-pop-green);color:var(--color-black);transform:scale(1.12)rotate(8deg)}}.menu-social-links:has(.social-link:hover) .social-link:not(:hover) .social-link-inner{background-color:var(--color-grey);color:var(--color-black);transform:scale(.9)}@keyframes moveAlong{0%{offset-distance:-100%}to{offset-distance:0%}}.showreel-thumbnail{bottom:var(--grid-margin);left:var(--grid-margin);z-index:10;transition:opacity .3s ease-out;position:fixed}.showreel-thumbnail .thumbnail-wrapper{aspect-ratio:16/9;height:auto;transition:transform .4s var(--ease-spring), box-shadow .4s ease;will-change:transform;width:280rem;position:absolute;top:-40rem;left:-140rem;transform:rotate(-15deg);box-shadow:0 4px 8px #0003}.showreel-thumbnail .thumbnail-wrapper:hover{transform:rotate(-13deg)scale(1.05);box-shadow:0 8px 24px #0005,0 0 40px #21ffc026}.showreel-thumbnail .thumbnail-wrapper .thumbnail{cursor:pointer;object-fit:cover;object-position:center;border-radius:20rem;width:100%;height:100%;display:block}.showreel-thumbnail .thumbnail-wrapper .marquee-container{pointer-events:none;width:calc(100% + 200rem);height:100%;position:absolute;top:-12rem;left:-12rem}.showreel-thumbnail .thumbnail-wrapper .marquee-text{offset-anchor:bottom;offset-path:path("M29.57 182H274.43C290.14 182 304 169 304 152.29V29.71C304 13 291.06 0 274.43 0H29.57C12.94 0 0 13 0 29.71V152.29C0 169 13.86 182 29.57 182Z");offset-rotate:auto 180deg;white-space:pre;font-size:18rem;font-weight:500;animation:12s linear infinite moveAlong;position:absolute;top:0;left:0}@media screen and (width<=900px){.showreel-thumbnail{display:none}}.spiral-hud{bottom:var(--grid-margin);opacity:0;pointer-events:none;text-align:center;z-index:10;flex-direction:column;align-items:center;gap:12rem;max-width:480rem;transition:opacity .4s ease-out;display:flex;position:fixed;left:50%;transform:translate(-50%)}.spiral-hud.is-visible{opacity:1}.spiral-hud.is-pop .caption-inner{animation:caption-pop .5s var(--ease-spring)}@keyframes caption-pop{0%{opacity:0;filter:blur(4px);transform:translateY(12rem)scale(.96)}60%{filter:blur()}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}.spiral-hud .caption-inner{-webkit-backdrop-filter:blur(8px);background:linear-gradient(#0000 0%,#00000073 45%,#0000008c 100%);border-radius:18rem;flex-direction:column;align-items:center;gap:6rem;padding:16rem 30rem 14rem;display:flex}.spiral-hud .caption-index{color:var(--color-white);font-variant-numeric:tabular-nums;letter-spacing:.04em;opacity:.5;text-transform:uppercase;font-size:13rem;font-weight:500}.spiral-hud .caption-title{color:var(--color-white);letter-spacing:-.04em;font-size:28rem;font-weight:500;line-height:1.1}.spiral-hud .caption-meta{color:var(--color-white);opacity:.45;letter-spacing:-.02em;font-size:14rem;font-weight:400}.spiral-hud .caption-desc{color:var(--color-white);opacity:.35;max-width:400rem;font-size:15rem;font-weight:400;line-height:1.4}.spiral-hud .caption-progress{background-color:var(--color-white20);width:120rem;height:2rem;margin-top:4rem;overflow:hidden}.spiral-hud .caption-progress-bar{background-color:var(--color-white);height:100%;transition:width .4s var(--ease-expo-out);width:0%;box-shadow:0 0 8px #fff6}@media screen and (width<=900px){.spiral-hud{bottom:calc(var(--grid-margin) + 60rem);max-width:calc(100% - var(--grid-margin) * 2)}.spiral-hud .caption-title{font-size:22rem}.spiral-hud .caption-desc{display:none}}body.mode-list .spiral-hud,body.mode-about .spiral-hud,body.mode-spiral .spiral-hud{opacity:0;pointer-events:none}body.is-loading .spiral-hud{opacity:0}.sound-button{bottom:var(--grid-margin);color:var(--color-bg-dark);cursor:pointer;pointer-events:all;height:48rem;right:var(--grid-margin);z-index:10;border-radius:50%;justify-content:center;align-items:center;width:48rem;display:flex;position:fixed}.sound-button .background{background-color:var(--color-white);height:100%;transition:transform .25s var(--ease-spring), background-color .3s ease;z-index:-1;will-change:transform;border-radius:50%;width:100%;position:absolute}.sound-button svg{width:16rem;height:16rem;transition:transform .3s var(--ease-spring);will-change:transform}.sound-button[aria-pressed=true] svg{opacity:1;transform:scale(1.05)}.sound-button[aria-pressed=false] svg{opacity:.35;transform:scale(.92)}@media screen and (hover:hover) and (pointer:fine){.sound-button:hover .background{transform:scale(.88)}.sound-button:hover svg{transform:scale(1.1)}.sound-button[aria-pressed=false]:hover svg{opacity:.6}}.loader{background:var(--color-bg-dark);color:var(--color-white);transform-origin:top;transition:transform .5s var(--ease-quad-in-out);z-index:1000;flex-direction:column;justify-content:center;align-items:center;font-size:24rem;font-weight:500;display:flex;position:fixed;inset:0;transform:translateY(0)}.loader .lottie{height:auto;max-width:calc(100% - var(--grid-margin) * 2);width:180px;margin-top:-100rem;margin-bottom:24rem}.loader .lottie canvas{width:100%;height:auto;display:block}.loader .text{max-width:calc(100% - var(--grid-margin) * 2);text-align:center;width:300px;margin-top:0;margin-bottom:32rem;font-size:24rem;overflow:hidden}.loader .text .line{display:block;overflow:hidden}.loader .text .line>span{transition:transform .8s var(--ease-expo-out);transition-delay:calc(var(--i) * 90ms);display:block;transform:translateY(105%)}.loader.ready .text .line>span{transform:translateY(0)}.loader .enter{opacity:0;pointer-events:none;transition:opacity .3s ease-out .2s}.loader .enter.show{opacity:1;pointer-events:auto}.loader .no-sound{bottom:var(--grid-margin);color:var(--color-white);cursor:pointer;opacity:0;pointer-events:none;background:0 0;font-size:14rem;font-weight:400;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s;position:absolute;transform:translateY(20px)}.loader .no-sound.show{opacity:.7;pointer-events:all;transform:translateY(0)}.loader .no-sound:before{background-color:var(--color-white);content:"";transform-origin:100%;width:100%;height:.5rem;transition:transform .15s ease-in-out;position:absolute;bottom:-2rem;left:0;transform:scaleX(0)}.loader .no-sound:hover:before{transform-origin:0;transform:scaleX(1)}.loader .percentage{bottom:var(--grid-margin);font-variant-numeric:tabular-nums;left:var(--grid-margin);right:var(--grid-margin);margin:0;font-weight:500;transition:opacity .3s ease-out;position:absolute}.loader .percentage span{width:calc(100% - 35rem);display:inline-block}.loader.ready .percentage{opacity:0}.loader.leaving{transform:translateY(100%)}.loader.leaving p{opacity:0;transition:opacity .3s ease-out}.loader.gone{display:none}.button.enter{background-color:var(--color-white);color:var(--color-bg-dark);cursor:pointer;white-space:nowrap;will-change:transform;border-radius:50rem;align-items:center;width:fit-content;padding:14rem;font-size:18rem;font-weight:500;transition:transform .2s ease-out;display:inline-flex;position:relative}.button.enter.dark{background-color:var(--color-bg-dark);color:var(--color-white)}.button.enter.dark:after{background-color:var(--color-white)}.button.enter .hidden-label{color:var(--color-white);opacity:0;visibility:hidden}.button.enter .animated-label{position:absolute;top:50%;left:calc(50% - 8rem);transform:translate(-50%,-50%)}.button.enter .letter{transition:transform .45s var(--ease-spring), color .3s ease;transition-delay:calc(var(--i) * 20ms);will-change:transform;display:inline-block}.button.enter:hover .letter{transform:translateY(-6rem)}.button.enter:hover .letter:nth-child(odd){transition-delay:calc(var(--i) * 30ms);transform:translateY(-4rem)}.button.enter:active{transform:scale(.96)}.button.enter:after{background-color:var(--color-bg-dark);content:"";border-radius:50%;width:6rem;height:6rem;margin-left:8rem;display:inline-block}.list-main{z-index:5;width:100%;height:100dvh;display:none;position:fixed;top:0;left:0;overflow:hidden auto}body.mode-list .list-main{justify-content:center;display:flex}.list-wrapper{margin:var(--grid-margin);text-align:center;min-height:100vh;width:calc(var(--grid-column) * 12 + var(--grid-gutter) * 11);flex-direction:column;align-items:center;padding-block:calc(20vh - 60rem);display:flex;position:relative;overflow-x:hidden}.list-wrapper .project{opacity:0;transform-origin:top;filter:blur(6px);overflow:hidden;transform:translateY(-40rem)scaleY(0)}body.mode-list .list-wrapper .project{animation:list-row-in .8s var(--ease-spring) forwards;animation-delay:calc(var(--i) * 90ms)}@keyframes list-row-in{0%{opacity:0;filter:blur(6px);transform:translateY(-40rem)scaleY(0)}50%{filter:blur(2px)}to{opacity:1;filter:blur();transform:translateY(0)scaleY(1)}}.list-wrapper .project p{cursor:pointer;padding:calc(var(--grid-gutter) / 2) 0;pointer-events:auto;transform-origin:top;transition:opacity .3s ease, transform .4s var(--ease-spring), filter .3s ease;z-index:10;will-change:opacity, transform;margin:0;font-size:60rem;font-weight:500;position:relative}.list-wrapper .project p:after{background-color:var(--color-pop-green);bottom:calc(var(--grid-gutter) / 2 - 2rem);content:"";transform-origin:50%;height:3rem;transition:transform .5s var(--ease-spring);width:60%;position:absolute;left:50%;transform:translate(-50%)scaleX(0)}.list-wrapper .project p .year{opacity:.5;vertical-align:super;font-size:24rem}@media screen and (hover:hover) and (pointer:fine){.list-wrapper .project p:hover{opacity:1;transition:opacity .15s ease, transform .4s var(--ease-spring);transform:translate(12rem)}.list-wrapper .project p:hover:after{transform:translate(-50%)scaleX(1)}.list-wrapper:has(.project p:hover) .project p:not(:hover){opacity:.3;filter:blur(1px)}}@media screen and (width<=900px){.list-wrapper .project p{font-size:40rem}.list-wrapper{height:100%;min-height:unset;width:calc(var(--grid-column) * 6 + var(--grid-gutter) * 5);padding-top:20vh}}.about-main{z-index:5;opacity:0;pointer-events:none;visibility:hidden;background:var(--color-bg-dark);width:100%;height:100dvh;position:fixed;top:0;left:0;overflow:hidden}body.mode-about .about-main{pointer-events:auto;visibility:visible}.about-page-content{will-change:transform;width:100%;min-height:100%}.about-intro{width:100%;height:500vh}.about-intro .inner{height:100vh;padding:var(--grid-margin);justify-content:center;align-items:center;width:100%;display:flex;position:sticky;top:0}.about-intro .inner .text{text-align:center;text-wrap:balance;max-width:800px;margin:0;font-size:32rem;font-weight:500;line-height:.7}.about-intro .inner .word{vertical-align:middle;will-change:opacity;display:inline-block}.about-intro .inner .about-text-image{aspect-ratio:1;vertical-align:middle;will-change:transform, opacity;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:6rem;width:32rem;height:auto;margin:0 4rem;display:inline-block}@media screen and (width<=900px){.about-intro .inner .text{font-size:28rem;line-height:1}.about-intro .inner .about-text-image{display:none!important}}@keyframes about-scroll{0%{translate:0}to{translate:-100%}}.about-marquee{padding-block:var(--grid-margin);-ms-overflow-style:none;scrollbar-width:none;width:100vw;display:flex;position:relative;overflow-x:hidden}.about-marquee::-webkit-scrollbar{display:none}.about-marquee .container{align-items:flex-end;gap:var(--grid-gutter);padding-right:var(--grid-gutter);justify-content:center;animation:40s linear infinite about-scroll;display:flex}.about-marquee .container .thumbnail{aspect-ratio:16/9;cursor:pointer;height:300rem;transition:transform .4s var(--ease-spring), box-shadow .4s ease;will-change:transform;border-radius:12rem;flex:none;width:auto;position:relative;overflow:hidden}.about-marquee .container .thumbnail img,.about-marquee .container .thumbnail canvas{object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block}.about-marquee .container .thumbnail .overlay{opacity:0;background-color:#00000080;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .3s;display:flex;position:absolute;top:0;left:0}.about-marquee .container .thumbnail .overlay span{background-color:var(--color-pop-green);color:var(--color-black);opacity:0;transition:transform .5s var(--ease-spring), opacity .4s ease;border-radius:50rem;padding:8rem 16rem;font-size:18rem;font-weight:500;transform:scale(.5)translateY(10rem)}.about-marquee .container .thumbnail.thumbnail-0{height:240rem;margin-bottom:20rem}.about-marquee .container .thumbnail.thumbnail-1{height:160rem;margin-bottom:40rem}.about-marquee .container .thumbnail.thumbnail-2{height:300rem;margin-bottom:0}.about-marquee .container .thumbnail.thumbnail-3{height:180rem;margin-bottom:60rem}.about-marquee .container .thumbnail:active{transform:scale(.97)}@media screen and (hover:hover) and (pointer:fine){.about-marquee .container .thumbnail:hover img,.about-marquee .container .thumbnail:hover canvas{transform:scale(1.08)}.about-marquee .container .thumbnail:hover{transform:translateY(-8rem);box-shadow:0 12px 40px #0006,0 0 30px #21ffc01a}.about-marquee .container .thumbnail:hover .overlay{opacity:1}.about-marquee .container .thumbnail:hover .overlay span{opacity:1;transform:scale(1)translateY(0)}}@media screen and (width<=900px){.about-marquee .container .thumbnail.thumbnail-0{height:160rem;margin-bottom:20rem}.about-marquee .container .thumbnail.thumbnail-1{height:120rem;margin-bottom:40rem}.about-marquee .container .thumbnail.thumbnail-2{height:240rem;margin-bottom:0}.about-marquee .container .thumbnail.thumbnail-3{height:140rem;margin-bottom:60rem}}.about-socials{min-height:100vh;padding:var(--grid-margin);pointer-events:none;justify-content:center;align-items:center;display:flex;position:relative}.about-socials .socials{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.about-socials .socials .social-link{color:var(--color-text-light);pointer-events:all;text-transform:lowercase;transition:opacity .3s ease, color .4s ease, transform .4s var(--ease-spring);will-change:opacity, transform;padding-block:6rem;font-size:64rem;font-weight:500;text-decoration:none;position:relative}.about-socials .socials .social-link:after{background-color:var(--color-accent);content:"";transform-origin:0;height:2rem;transition:transform .5s var(--ease-spring);width:100%;position:absolute;bottom:2rem;left:0;transform:scaleX(0)}.about-socials .socials .social-link:first-child{padding-top:0}.about-socials .socials .social-link:last-child{padding-bottom:0}@media screen and (hover:hover) and (pointer:fine){.about-socials .socials .social-link:hover{color:var(--color-accent);opacity:1;transition:opacity .15s ease, color .4s ease, transform .4s var(--ease-spring);transform:translate(16rem)}.about-socials .socials .social-link:hover:after{transform:scaleX(1)}.about-socials .socials:has(.social-link:hover) .social-link:not(:hover){opacity:.3;filter:blur(1px)}}@media screen and (width<=900px){.about-socials .socials .social-link{font-size:40rem}}.about-socials .credits{opacity:.6;text-align:center;width:100%;font-size:14rem;position:absolute;bottom:16rem}.about-socials .credits a{color:var(--color-accent);pointer-events:all;text-underline-offset:4rem;text-decoration:none;position:relative}.about-socials .credits a:before{background-color:var(--color-white);content:"";transform-origin:100%;width:100%;height:.5rem;transition:transform .15s ease-in-out;position:absolute;bottom:-2rem;left:0;transform:scaleX(0)}.about-socials .credits a:hover:before{transform-origin:0;transform:scaleX(1)}@media screen and (width<=900px){.about-socials .credits{display:none}}.project-page{z-index:70;overscroll-behavior:contain;background:var(--color-bg-dark);opacity:0;pointer-events:none;-ms-overflow-style:none;scrollbar-width:none;position:fixed;inset:0;overflow:hidden}.project-page::-webkit-scrollbar{display:none}.project-page.open{opacity:1;pointer-events:auto}.project-page-content{will-change:transform;width:100%;min-height:100%}.project-card.wrapper{background-color:var(--color-white);color:var(--color-bg-dark);margin:var(--grid-margin);width:calc(var(--grid-column) * 12 + var(--grid-gutter) * 11);z-index:10;will-change:transform, opacity;border-radius:16rem;flex-direction:column;align-items:start;display:flex;position:relative;overflow:hidden}@media screen and (width<=900px){.project-card.wrapper{width:calc(var(--grid-column) * 6 + var(--grid-gutter) * 5)}}.project-card .close{background-color:var(--color-bg-dark);color:var(--color-white);cursor:pointer;pointer-events:auto;z-index:50;border-radius:50%;justify-content:center;align-items:center;width:48rem;height:48rem;display:flex;position:absolute;top:10rem;right:10rem}.project-card .close svg{transition:transform .2s}.project-card .close:hover svg{transform:rotate(90deg)}.preview-wrapper{height:calc(100vh - var(--grid-margin));cursor:none;width:100%;position:relative;overflow:hidden}@media screen and (width<=900px){.preview-wrapper{cursor:pointer;height:60vh}}.preview-video,.preview-video .still-canvas{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.preview-video .still-canvas{width:100%;height:100%}.cursor-tag{background-color:var(--color-pop-green);color:var(--color-bg-dark);opacity:0;pointer-events:none;white-space:nowrap;z-index:20;border-radius:50rem;padding:8rem 16rem;font-size:24rem;font-weight:500;transition:opacity .15s;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.cursor-tag.show{opacity:1}.cursor-tag.close-tag{pointer-events:auto;cursor:pointer}.infos{align-items:flex-start;gap:var(--grid-gutter);padding:60rem calc(var(--grid-column) * 1 + var(--grid-gutter) * 1);width:100%;display:flex}@media screen and (width<=900px){.infos{padding:40rem var(--grid-margin);flex-direction:column;gap:30rem}}.infos h2{letter-spacing:-.04em;width:calc(var(--grid-column) * 5 + var(--grid-gutter) * 4);margin:0;font-size:56rem;font-weight:500;line-height:1.05}.infos .line{display:block;overflow:hidden}@media screen and (width<=900px){.infos h2{width:100%;font-size:40rem}}.infos .right{flex-direction:column;flex:1;gap:40rem;padding-top:8rem;display:flex}.infos p{max-width:calc(var(--grid-column) * 3 + var(--grid-gutter) * 2);margin:0;font-size:18rem;font-weight:500;line-height:1.3}@media screen and (width<=900px){.infos p{max-width:100%;font-size:16rem}}.case-button{background-color:var(--color-bg-dark);color:var(--color-white);border-radius:50rem;align-items:center;width:fit-content;padding:14rem 18rem;font-size:18rem;font-weight:500;text-decoration:none;transition:transform .2s;display:inline-flex;position:relative}.case-button:after{background-color:var(--color-white);content:"";border-radius:50%;width:6rem;height:6rem;margin-left:10rem;display:inline-block}.case-button:hover{transform:scale(.97)}.styleframes{padding:60rem calc(var(--grid-column) * 1 + var(--grid-gutter) * 1) calc(var(--grid-column) * 1 + var(--grid-gutter) * 1);flex-direction:column;justify-content:flex-start;gap:32rem;width:100%;display:flex}@media screen and (width<=900px){.styleframes{padding:24rem var(--grid-margin);gap:24rem}}.styleframes .styleframe{transform-origin:50%;width:calc(var(--grid-column) * 5 + var(--grid-gutter) * 4);will-change:transform, opacity;border-radius:14rem;display:flex;position:relative;overflow:hidden}.styleframes .styleframe .still-canvas,.styleframes .styleframe img{object-fit:cover;object-position:center;will-change:transform;transform-origin:50%;width:100%;height:auto;display:block}@media screen and (width<=900px){.styleframes .styleframe{width:100%}}.styleframes .styleframe:nth-child(2n){align-self:flex-end}.next-project{align-items:center;gap:var(--gap-l);height:100vh;padding:var(--grid-margin);flex-direction:column;justify-content:center;width:100%;display:flex;position:sticky;bottom:0}.next-project .back-link{color:var(--color-white);cursor:pointer;font:inherit;opacity:.7;top:var(--grid-margin);left:var(--grid-margin);background:0 0;border:none;font-size:14rem;font-weight:400;position:absolute}.next-project .back-link:before{background-color:var(--color-white);content:"";transform-origin:100%;z-index:-1;width:100%;height:.5rem;transition:transform .15s ease-in-out;position:absolute;bottom:-2rem;transform:scaleX(0)}.next-project .back-link:hover:before{transform-origin:0;transform:scaleX(1)}.next-project .image-container{position:relative}.next-project .next-thumb,.next-project .next-thumb .still-canvas{aspect-ratio:16/9;cursor:pointer;object-fit:cover;width:calc(var(--grid-column) * 6 + var(--grid-gutter) * 5);border-radius:12rem;display:block;overflow:hidden}.next-project .next-thumb{transition:transform .3s var(--ease-spring)}.next-project .next-thumb:hover{transform:scale(1.02)}.next-project h4{color:var(--color-white);text-align:center;white-space:nowrap;margin:0;font-size:24rem;font-weight:500;position:absolute;bottom:-60rem;left:50%;transform:translate(-50%)}@media screen and (width<=900px){.next-project h4{white-space:normal;width:100%;font-size:18rem;bottom:-45rem}.next-project .next-thumb,.next-project .next-thumb .still-canvas{width:min(100%, calc(var(--grid-column) * 6 + var(--grid-gutter) * 5))}}.image-container .tag{background-color:var(--color-white);color:var(--color-bg-dark);white-space:nowrap;border-radius:50rem;padding:8rem 16rem;font-size:24rem;font-weight:500;position:absolute}.image-container .tag.green{background-color:var(--color-pop-green)}.image-container .tag.top-right{top:-20rem;right:-60rem;rotate:-8deg}@media screen and (width<=900px){.image-container .tag.top-right{display:none}}.image-container .tag.bottom-left{bottom:-20rem;left:-60rem;rotate:9deg}@media screen and (width<=900px){.image-container .tag.bottom-left{background-color:var(--color-pop-green);bottom:unset;font-size:18rem;top:-10rem;left:-5rem;rotate:-8deg}}.progress-bar-wrapper{height:100%;bottom:0;right:var(--grid-margin);pointer-events:none;align-items:center;width:6rem;display:flex;position:absolute;top:0}.progress-bar-wrapper .progress-bar{background-color:var(--color-white20);border-radius:100rem;width:100%;position:relative;overflow:hidden}.progress-bar-wrapper .progress-bar .progress-fill{background-color:var(--color-white);transform-origin:50%;will-change:transform;border-radius:100rem;width:6rem;height:100%;transform:scaleY(0)}@media screen and (width<=900px){.progress-bar-wrapper{display:none}}.video-player-overlay{z-index:90;opacity:0;pointer-events:none;transition:opacity .35s;position:fixed;inset:0}.video-player-overlay.open{opacity:1;pointer-events:auto}.video-player-overlay .player-wrapper{background-color:var(--color-bg-dark);z-index:50;background-position:50%;background-size:cover;position:fixed;inset:0;overflow:hidden}.video-player-overlay .player-wrapper:after{-webkit-backdrop-filter:blur(20px);content:"";pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.video-player-overlay .video-container{z-index:50;cursor:none;width:100%;height:100%;position:relative}.video-player-overlay .video-element,.video-player-overlay .video-element .still-canvas{object-fit:contain;object-position:center;width:100%;height:100%;display:block}.video-player-overlay .mobileclose{background-color:var(--color-pop-green);color:var(--color-bg-dark);height:48rem;right:var(--grid-margin);top:var(--grid-margin);z-index:60;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:48rem;display:none;position:absolute}@media screen and (width<=420px){.video-player-overlay .mobileclose{display:flex}.preview-wrapper,.video-player-overlay .video-container{cursor:pointer}}body.project-open .webgl{pointer-events:none;opacity:0;transition:opacity .4s}body.project-open .home-overlay-wrapper{opacity:0;pointer-events:none;transition:opacity .35s}body.project-open .list-main,body.project-open .about-main{opacity:0;pointer-events:none}body.spiral-retracting .webgl{pointer-events:none;opacity:1!important;transition:none!important}body.mode-about .webgl,body.mode-list .webgl{opacity:0;pointer-events:none;transition:opacity .45s ease-out}.webgl{transition:opacity .45s ease-out}body.mode-about .switch,body.mode-about .showreel-thumbnail{opacity:0;pointer-events:none;transition:opacity .35s}body.spiral-retracting .switch{opacity:.35;pointer-events:none}.switch,.showreel-thumbnail{transition:opacity .35s}body.mode-about .list-main{opacity:0;pointer-events:none;transition:opacity .35s}body.is-loading .home-overlay-wrapper{opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.logo-mark,.about-marquee .container,.showreel-thumbnail .thumbnail-wrapper .marquee-text{animation:none}.list-wrapper .project{filter:none;opacity:1;transform:none}}