*{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100vw;overflow-x:hidden}a{text-decoration:unset;color:inherit}:root{font-size:12px;--page-padding: 1.5rem;--base-ratio: 0.75;--base-size: 1536;--base-percent: 100vw}@media(max-width: 1024px){:root{--base-ratio: 1;--base-size: 1;--base-percent: 1px}}header{display:grid;grid-template:"title title" "github github" "credit credit" 1fr/auto 1fr;gap:1rem 2rem;justify-items:start;align-content:start;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100vh;padding:var(--page-padding);pointer-events:none}header *{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:inherit}header h1{grid-area:title;font-weight:700;letter-spacing:-0.02rem}header a{grid-area:github;pointer-events:auto}header a:hover{text-decoration:underline}header p{grid-area:credit;place-self:end start}section .screen{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none}section .content-size-fix{height:100%}section.intro{display:flex;flex-direction:column;align-items:flex-end;height:100vh;padding:var(--page-padding)}section.text-3d #content{display:none}section.text-3d .content{overflow:hidden;width:100vw;height:90vh;will-change:transform}section.text-3d .content-wrapper{position:relative;perspective:max(calc(250px * var(--base-ratio)), calc(calc(250 / var(--base-size)) * var(--base-percent)));transform-style:preserve-3d}section.text-3d .content-top{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:bottom center;transform:translateZ(0) translate3d(0, -90vh, 0) rotateX(-12deg) scale3d(1, 1.002004008, 1)}section.text-3d .content-top .content-size-fix{transform-origin:bottom center}section.text-3d .content-top .content-scroller{transform:translateY(100%)}section.text-3d .content-center{transform-origin:center center;transform:translateZ(0) translate3d(0, 0, 0) rotateX(0) scale3d(1, 1.002004008, 1)}section.text-3d .content-bottom{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:top center;transform:translateZ(0) translate3d(0, 90vh, 0) rotateX(120deg) scale3d(1, 1.002004008, 1)}section.text-3d .content-bottom .content-size-fix{transform-origin:top center}section.text-3d .content-bottom .content-scroller{transform:translateY(-100%)}section.text-3d .content .content-scroller{width:100%;height:100%}section.text-3d .content .content-scroller div{backface-visibility:hidden}section.text-3d .content .content-scroller *{font-size:max(calc(72px * var(--base-ratio)), calc(calc(72 / var(--base-size)) * var(--base-percent)));line-height:1.2;font-weight:900;word-break:break-all}section.image-3d{overflow:hidden;position:relative;height:100vh;margin-top:-50vh;background:#fff}section.image-3d #characters{display:none}section.image-3d .characters{display:flex;align-items:flex-end;width:min-content;height:100%;pointer-events:all}section.image-3d .characters ul{display:flex;align-items:center;gap:max(calc(96px * var(--base-ratio)), calc(calc(96 / var(--base-size)) * var(--base-percent)));height:100%}section.image-3d .characters li{overflow:hidden;position:relative;width:max(calc(248px * var(--base-ratio)), calc(calc(248 / var(--base-size)) * var(--base-percent)));height:max(calc(248px * var(--base-ratio)), calc(calc(248 / var(--base-size)) * var(--base-percent)));border-radius:50%}section.image-3d .characters li img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}section.image-3d .characters li span{position:absolute;top:70%;left:50%;transform:translateX(-50%);z-index:1;font-size:max(calc(16px * var(--base-ratio)), calc(calc(16 / var(--base-size)) * var(--base-percent)));font-weight:700;color:#fafafa}section.image-3d .drag{position:absolute;top:50%;transform:translateY(-50%);left:0;z-index:10000;width:100%;height:70vh;cursor:grab}section.image-3d .screen{position:absolute;z-index:1000}section.image-3d .screen .content-wrapper{position:absolute;right:0;perspective:50vw;transform-style:preserve-3d}section.image-3d .screen .content{overflow:hidden;width:calc(40vw + 1px);height:70vh;will-change:transform;background:#000}section.image-3d .screen .content2,section.image-3d .screen .content3,section.image-3d .screen .content4{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:right center;transform:translate3d(-100%, 0, 0) rotateY(-10deg)}section.image-3d .screen .content2 .content-size-fix,section.image-3d .screen .content3 .content-size-fix,section.image-3d .screen .content4 .content-size-fix{transform-origin:bottom center}section.image-3d .screen .content1 .content-scroller{transform:translateX(-200%)}section.image-3d .screen .content2{transform:translate3d(-100%, 0, 0) rotateY(-35deg)}section.image-3d .screen .content2::after{content:"";position:absolute;top:0;left:0;z-index:100;width:100%;height:100%;background:rgba(0,0,0,.5)}section.image-3d .screen .content2 .content-scroller{transform:translateX(-100%)}section.image-3d .screen .content3{transform:translate3d(-100%, 0, 0) rotateY(-35deg) translate3d(-100%, 0, 0) rotateY(35deg)}section.image-3d .screen .content3 .content-scroller{transform:translateX(0%)}section.image-3d .screen .content4{transform:translate3d(-100%, 0, 0) rotateY(-35deg) translate3d(-100%, 0, 0) rotateY(35deg) translate3d(-100%, 0, 0) rotateY(110deg)}section.image-3d .screen .content4::after{content:"";position:absolute;top:0;left:0;z-index:100;width:100%;height:100%;background:rgba(0,0,0,.4)}section.image-3d .screen .content4 .content-scroller{transform:translateX(100%)}section.image-3d .screen .content .content-scroller{height:100%}