:root{--color-bg: #000000;--color-text: #ffffff;--nav-left-width: 400px;--nav-gap: clamp(20px, calc(-10px + 6vw) , 70px);--transition-duration: .3s;--about-top-offset: 140px;--project-media-offset-y: -30px;--project-bg-blur: 20px;--project-bg-opacity: .1;--motion-ease: cubic-bezier(.4, 0, .2, 1);--motion-duration: .6s;--motion-offset: 6px}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg)}body{font-family:Noto Sans JP,sans-serif;font-weight:100;color:var(--color-text);position:relative}#canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0}#canvas-container canvas{transition:filter .6s var(--motion-ease),opacity .6s var(--motion-ease)}#canvas-container.blurred canvas{filter:blur(20px);opacity:.17}#canvas-container.project-blurred canvas{filter:blur(var(--project-bg-blur))!important;opacity:var(--project-bg-opacity)!important}.navbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:clamp(16px,calc(-32px + 8vw),40px) clamp(20px,calc(-40px + 10vw),50px);z-index:1000;transition:opacity .4s ease,filter .4s ease}.is-mobile #kick-btn{display:none}@media(max-height:500px)and (orientation:landscape){html.is-mobile .navbar{padding:15px 20px 20px}}.navbar.blurred{opacity:.3;filter:blur(2px);pointer-events:none}.nav-left{display:flex;justify-content:flex-start;align-items:center;gap:60px}.nav-right{display:flex;align-items:center;gap:var(--nav-gap)}.nav-buttons{transform:translateY(1px)}#home-link{white-space:nowrap}.nav-link{color:var(--color-text);text-decoration:none;font-size:17px;cursor:pointer;transition:opacity var(--transition-duration) ease}@media(hover:hover){.nav-link:not(.project-label):hover{opacity:.6}}.nav-link:not(.project-label):active{opacity:.6}.project-label{opacity:0;pointer-events:none;cursor:default;transition:opacity .18s ease}.project-label.visible{opacity:1}.project-label--below{position:fixed;right:clamp(20px,calc(-40px + 10vw),50px)}.grid-btn{background:none;border:none;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;position:relative;transition:opacity var(--transition-duration) ease}@media(hover:hover){.grid-btn:hover{opacity:.6}}.grid-icon{display:grid;grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:6px;transition:gap .4s var(--motion-ease);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.grid-icon.active{gap:2.5px}.grid-square{width:8.5px;height:8.5px;background:var(--color-text)}.nav-buttons{display:flex;flex-direction:row;align-items:center;gap:30px}:root{--kick-size: 26px;--kick-inner-size: 12px}#kick-btn{background:none;border:none;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:opacity var(--transition-duration) ease}#kick-btn:hover{opacity:.75}#kick-btn.disabled{opacity:.2;pointer-events:none;transition:opacity .4s ease}.kick-icon{width:var(--kick-size);height:var(--kick-size);border-radius:50%;border:2.5px solid var(--color-text);display:flex;align-items:center;justify-content:center}.kick-inner{width:var(--kick-inner-size);height:var(--kick-inner-size);border-radius:50%;background:var(--color-text);transform:scale(1);transition:transform .15s var(--motion-ease)}#kick-btn.fired .kick-inner{transform:scale(calc(var(--kick-size) / var(--kick-inner-size) - .1))}.about-section{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:flex-start;padding:0 clamp(20px,calc(-40px + 10vw),50px) clamp(20px,calc(-40px + 10vw),50px);opacity:0;pointer-events:none;z-index:900;transition:opacity .5s ease}.about-section.visible{opacity:1;pointer-events:auto}.about-content{display:flex;flex-direction:row;gap:60px;max-width:1400px;align-items:flex-start;margin-top:var(--about-top-offset)}.about-image,.about-text,.about-edu{opacity:0;transform:translateY(var(--motion-offset));transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.about-section.visible .about-image{opacity:1;transform:translateY(0);transition-delay:0s}.about-section.visible .about-text{opacity:1;transform:translateY(0);transition-delay:.08s}.about-section.visible .about-edu{opacity:1;transform:translateY(0);transition-delay:.14s}.about-image--stacked{display:none}.about-image{flex-shrink:0;width:var(--nav-left-width);height:auto;max-height:calc(100vh - var(--about-top-offset) - 50px);align-self:flex-end}.about-text-wrap{display:flex;flex-direction:row;gap:60px;align-items:flex-start;min-width:0}.about-text{flex:0 0 360px;font-size:14px;line-height:1.8;max-height:calc(100vh - var(--about-top-offset) - 50px);overflow-y:auto;padding-right:20px}.about-text p{margin-bottom:20px;text-wrap:pretty}.about-text p:last-child{margin-bottom:0}.about-text strong{font-weight:700}.about-edu{flex-shrink:0;font-size:14px;line-height:1.73;text-wrap:pretty}.edu-label{font-weight:700;margin-bottom:16px}.edu-year{opacity:.7;margin:0}.edu-degree{font-weight:700;margin:0}.edu-school{opacity:.7;margin-bottom:20px}.edu-school:last-child{margin-bottom:0}.about-section,.about-content,.about-text-wrap,.about-text{scrollbar-width:none}.about-section::-webkit-scrollbar,.about-content::-webkit-scrollbar,.about-text-wrap::-webkit-scrollbar,.about-text::-webkit-scrollbar{display:none}.about-scrollbar{display:none}.about-fade-active{-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--fade-h-top, 0px),black calc(100% - var(--fade-h, 0px)),transparent 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to bottom,transparent 0px,black var(--fade-h-top, 0px),black calc(100% - var(--fade-h, 0px)),transparent 100%);mask-size:100% 100%;mask-repeat:no-repeat}#about-close-btn{display:none}@media(max-width:600px){#about-close-btn{position:relative;align-self:flex-start;margin-top:65px;flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;z-index:2;opacity:0;transform:translateY(var(--motion-offset));transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.about-section.visible #about-close-btn{opacity:1;transform:translateY(0);transition-delay:0s}}@media(max-width:1280px){.about-text-wrap{flex-direction:column;gap:40px;max-width:400px;max-height:calc(100vh - var(--about-top-offset) - 50px);overflow-y:auto;padding-right:16px;margin-right:60px}.about-text{flex:none;width:100%;max-height:none;overflow-y:visible;padding-right:0}}@media(max-width:1020px){.about-section{overflow-y:hidden}.about-content{overflow-y:auto;max-height:calc(100vh - var(--about-top-offset) - clamp(20px,calc(-40px + 10vw),50px));flex-direction:column;gap:40px}.about-text-wrap{order:1;max-width:420px;max-height:none;overflow-y:visible;padding-right:0;margin-right:0}.about-image--wide{display:none}.about-image--stacked{display:block}.about-image{order:2;width:100%;max-width:420px;height:auto;flex-shrink:0;object-position:top center}}.contact-section{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:950;transition:opacity .5s ease}.contact-section.visible{opacity:1;pointer-events:auto}.contact-content{display:flex;gap:clamp(20px,calc((100vw - 540px)/2),180px)}.contact-link{color:var(--color-text);text-decoration:none;font-size:17px;cursor:pointer;opacity:0;transform:translateY(var(--motion-offset));transition:transform var(--motion-duration) var(--motion-ease),opacity var(--transition-duration) ease}.contact-section.visible .contact-link{opacity:1;transform:translateY(0)}.contact-section.visible .contact-link:nth-child(1){transition-delay:0s}.contact-section.visible .contact-link:nth-child(2){transition-delay:.08s}.contact-section.visible .contact-link:nth-child(3){transition-delay:.16s}.contact-section.visible .contact-link:hover{opacity:.6;transition:opacity var(--transition-duration) ease}#project-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:1010;transition:opacity .5s ease}#project-overlay.visible{opacity:1;pointer-events:auto}#project-media-wrap{position:absolute;top:0;bottom:calc(var(--thumb-size) + var(--thumb-bottom) + 16px - var(--project-media-offset-y));left:0;right:0;display:flex;align-items:flex-end;justify-content:center}.project-media-item{width:auto;height:calc(100vh - var(--thumb-size) - var(--thumb-bottom) - 16px + var(--project-media-offset-y));max-width:calc(100vw - clamp(0px,calc(-80px + 20vw),100px));object-fit:contain;display:block;opacity:0;transform:translateY(var(--motion-offset));transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.project-media-item.entered{opacity:1;transform:translateY(0)}.project-video-wrap{position:relative;display:inline-flex;height:calc(100vh - var(--thumb-size) - var(--thumb-bottom) - 16px + var(--project-media-offset-y));max-width:calc(100vw - clamp(0px,calc(-80px + 20vw),100px));opacity:0;transform:translateY(var(--motion-offset));transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.project-video-wrap.entered{opacity:1;transform:translateY(0)}.project-video-wrap video{height:100%;width:auto;max-width:100%;display:block}.video-mute-btn{position:absolute;bottom:10px;right:10px;width:34px;height:34px;padding:0;border:none;border-radius:50%;background:#0006;color:#ffffffa6;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:opacity .2s ease}@media(hover:hover){.video-mute-btn:hover{opacity:.6}}#project-hit-left,#project-hit-right{position:absolute;top:0;bottom:calc(var(--thumb-size) + var(--thumb-bottom) + 16px);width:0;z-index:10}#project-hit-left{left:0}#project-hit-right{right:0}:root{--thumb-size: 52px;--thumb-gap: 10px;--thumb-opacity: .35;--thumb-border-size: 1.5px;--thumb-bottom: 24px}#project-thumbs{position:fixed;bottom:var(--thumb-bottom);left:0;right:0;--_btn-l: clamp(20px, calc(-40px + 10vw) , 50px);-webkit-mask-image:linear-gradient(to right,transparent calc(var(--_btn-l) + 30px),black calc(var(--_btn-l) + 90px),black calc(100% - 90px),transparent 100%);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-image:linear-gradient(to right,transparent calc(var(--_btn-l) + 50px),black calc(var(--_btn-l) + 150px),black calc(100% - 100px),transparent 100%);mask-size:100% 100%;mask-repeat:no-repeat;opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:1020}#project-thumbs-inner{display:flex;gap:var(--thumb-gap);align-items:flex-end}#project-thumbs.visible{opacity:1;pointer-events:auto}#project-close-btn{position:fixed;bottom:calc(var(--thumb-bottom) + var(--thumb-size) / 2 - 15px);left:clamp(20px,calc(-40px + 10vw),50px);width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:1020}#project-close-btn.visible{opacity:1;pointer-events:auto}#project-close-btn.visible:hover{opacity:.6}.close-icon{width:16px;height:16px}.close-icon:before,.close-icon:after{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:var(--color-text)}.close-icon:before{transform:translateY(-50%) rotate(45deg)}.close-icon:after{transform:translateY(-50%) rotate(-45deg)}.project-thumb{width:var(--thumb-size);height:var(--thumb-size);overflow:hidden;cursor:pointer;opacity:var(--thumb-opacity);flex-shrink:0;transition:opacity var(--transition-duration) ease,transform var(--transition-duration) var(--motion-ease)}.project-thumb img,.project-thumb video{width:100%;height:100%;object-fit:cover;display:block}.project-thumb.active{opacity:1;transform:scale(1.08)}.project-thumb--peek{transform:scale(1.065)}.project-thumb:not(.active):hover{opacity:.65}@media(max-width:600px){:root{--nav-left-width: 220px;--nav-gap: 20px}.nav-right{flex-shrink:0}.nav-link{font-size:17px}.project-label{display:none}.contact-content{flex-direction:column;align-items:center;gap:100px;padding:0 20px;width:100%;box-sizing:border-box}.contact-link{font-size:18.5px}.about-section{padding:0 20px 20px;flex-direction:column;gap:20px;overflow-y:hidden}.about-content{overflow-y:auto;max-height:calc(100vh - 135px);gap:50px;margin-top:0}.about-text-wrap{max-width:100%;max-height:none;overflow-y:visible;padding-right:0;gap:50px}.about-image{max-width:100%}.about-text,.about-edu{font-size:15.5px}}.project-text-panel{position:absolute;left:50px;top:var(--about-top-offset);bottom:0;width:var(--nav-left-width);display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;touch-action:pan-y;opacity:0;transform:translateY(var(--motion-offset));transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.project-text-panel::-webkit-scrollbar{display:none}.project-text-panel{-webkit-mask-image:linear-gradient(to bottom,transparent 0px,black var(--fade-h-top, 0px),black calc(100% - var(--fade-h, 0px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0px,black var(--fade-h-top, 0px),black calc(100% - var(--fade-h, 0px)),transparent 100%)}.project-text-panel.entered{opacity:1;transform:translateY(0)}.project-text-title{font-size:17px;font-weight:300;margin-bottom:24px;color:var(--color-text)}.project-text-body{font-size:14px;font-weight:100;line-height:1.8;color:var(--color-text);max-width:380px}.project-text-body .project-meta{opacity:.7;margin-bottom:24px}.project-text-body .project-meta span{margin-left:45px}.project-text-body p{margin-bottom:16px;text-wrap:pretty}.project-text-body p:last-child{margin-bottom:0}.project-text-body em{font-style:italic}.project-text-body strong{font-weight:400}.project-text-scrollbar{display:none}.project-thumb--text{display:flex;align-items:center;justify-content:center;background:transparent}.project-thumb--text span{font-size:9px;font-weight:100;font-family:Noto Sans JP,sans-serif;color:var(--color-text);text-align:center;line-height:1.3;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}@media(max-width:600px){.project-text-panel{left:20px;right:20px;width:auto;bottom:auto;max-height:calc(100vh - var(--about-top-offset) - var(--thumb-bottom) - var(--thumb-size) - 80px)}.project-text-title{font-size:19px}.project-text-body{font-size:15.5px;max-width:none}#project-media-wrap{align-items:center}.project-media-item{width:100vw;max-width:100vw;height:auto;max-height:calc(100vh - var(--thumb-size) - var(--thumb-bottom) - 80px)}}@media(max-height:500px)and (orientation:landscape){html.is-mobile{--about-top-offset: 60px}html.is-mobile .project-text-panel{left:20px;top:90px;bottom:-25px}html.is-mobile #project-close-btn{left:20px}html.is-mobile .contact-content{gap:100px}html.is-mobile .about-section{padding:0 20px 20px;flex-direction:row;align-items:flex-start;gap:0;overflow:hidden}html.is-mobile .about-content{flex-direction:row;margin-top:var(--about-top-offset);max-height:calc(100vh - var(--about-top-offset) - 20px);overflow-y:hidden;gap:35px;flex:1;align-items:flex-start}html.is-mobile .about-image--wide{display:none}html.is-mobile .about-image--stacked{display:block;order:1;width:auto;height:calc(100vh - var(--about-top-offset) - 20px);max-width:45%;flex-shrink:0;object-fit:cover;object-position:bottom right}html.is-mobile .about-text-wrap{order:2;flex:1;flex-direction:column;gap:24px;max-height:calc(100vh - var(--about-top-offset) - 20px);overflow-y:auto;max-width:350px;padding-right:0;margin-right:0}html.is-mobile .about-text{flex:none;width:100%;max-height:none;overflow-y:visible;font-size:14px}html.is-mobile .about-edu{font-size:13px;line-height:1.6}}