@font-face{font-display:swap;font-family:Source Han Sans CN;font-style:normal;font-weight:700;src:url(/assets/fonts/SourceHanSansCN-Bold.otf) format("opentype")}@font-face{font-display:swap;font-family:Source Han Sans CN;font-style:normal;font-weight:500;src:url(/assets/fonts/SourceHanSansCN-Medium.otf) format("opentype")}html,body,#root{width:100%;min-height:100%;margin:0}html{scroll-behavior:smooth}body{overflow-x:hidden;color:#1d1d1f;background:#fbfbfd;font-family:Source Han Sans CN,-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Arial,sans-serif}button{font:inherit}.home-view,.stage-page,.project-view{position:relative;display:grid;width:100%;min-height:100svh;place-items:center;overflow:hidden;background:#fbfbfd}.stage-artwork{display:block;width:min(100vw,177.7778svh);height:auto;background:#fff}.stage-canvas{width:min(100vw,177.7778svh);aspect-ratio:16 / 9;background:#fff;box-shadow:0 20px 70px #00000014;container-type:inline-size}.home-view{animation:home-stage-enter .76s cubic-bezier(.2,.8,.2,1) both}.home-composition{position:relative;width:min(100vw,177.7778svh);aspect-ratio:16 / 9;overflow:hidden;background:#fff}.home-view.is-leaving .home-composition{animation:home-leave .46s cubic-bezier(.6,0,.2,1) both}.home-scale-frame{position:absolute;inset:0}.home-artboard{position:absolute;inset:0;overflow:visible}.home-gray-block{position:absolute;left:11.0631%;top:52.9586%;width:88.9369%;height:37.7821%;background:#7e7e7e;animation:block-enter .9s .16s cubic-bezier(.2,.8,.2,1) both}.home-person{position:absolute;left:12.0495%;top:8.5885%;z-index:2;width:47.5857%;height:auto;animation:person-enter .98s .26s cubic-bezier(.2,.8,.2,1) both;pointer-events:none;-webkit-user-select:none;user-select:none}.home-title{position:absolute;right:1.9%;top:14.45%;z-index:3;color:#221f20;display:grid;animation:title-enter .82s .42s cubic-bezier(.2,.8,.2,1) both;justify-items:end}.home-title h1{margin:0;font-size:8.75cqw;font-weight:700;letter-spacing:0;line-height:.96}.home-title p{display:flex;align-items:baseline;gap:2.1875cqw;margin:1.25cqw 0 0;line-height:1}.home-title span{color:#487fbe;font-size:5cqw;font-weight:700;letter-spacing:0;white-space:nowrap}.home-title strong{color:#221f20;font-size:5cqw;font-weight:700;letter-spacing:0;white-space:nowrap}.enter-hotspot{position:absolute;left:11.0631%;top:83.3333%;width:5.7979%;height:7.4074%;min-width:0;min-height:0;border:0;padding:0;background:transparent;cursor:pointer;animation:button-enter .72s .72s cubic-bezier(.2,.8,.2,1) both}.enter-hotspot:before{position:absolute;inset:0;background:#221f20;content:"";transition:background .22s ease,box-shadow .22s ease,transform .22s ease}.enter-hotspot:after{display:none;content:""}.enter-hotspot span{display:none}.enter-hotspot i{position:absolute;left:50%;top:50%;z-index:2;width:34%;height:max(1.5px,.18cqw);background:#fff;transform:translate(-50%,-50%);transition:transform .22s ease}.enter-hotspot i:before,.enter-hotspot i:after{position:absolute;right:0;width:42%;height:100%;background:#fff;content:"";transform-origin:right center}.enter-hotspot i:before{transform:rotate(40deg)}.enter-hotspot i:after{transform:rotate(-40deg)}.enter-hotspot:hover:before,.enter-hotspot:focus-visible:before{background:#111;box-shadow:0 14px 34px #0000002e;transform:scale(1.04)}.enter-hotspot:hover i,.enter-hotspot:focus-visible i{transform:translate(-40%,-50%)}.enter-hotspot:focus-visible,.back-button:focus-visible,.home-return-button:focus-visible,.project-return-button:focus-visible,.project-hotspot:focus-visible,.contents-photo-button:focus-visible,.side-pager button:focus-visible{outline:2px solid #0071e3;outline-offset:4px}.inside-view{position:relative;width:100%;height:100svh;min-height:100svh;overflow:hidden;background:#fbfbfd;animation:page-enter .62s cubic-bezier(.2,.8,.2,1) both}.stage-page{position:absolute;inset:0;display:grid;min-height:100svh;padding:0;place-items:center;transition:opacity .62s cubic-bezier(.2,.82,.16,1),filter .62s cubic-bezier(.2,.82,.16,1),transform .62s cubic-bezier(.2,.82,.16,1)}.about-stage .stage-canvas{animation:about-canvas-enter .56s cubic-bezier(.2,.82,.16,1) both}.contents-page{opacity:0;filter:blur(12px);pointer-events:none;visibility:hidden;transform:translate(4vw) scale(.986)}.inside-view.is-showing-contents .about-stage{opacity:0;filter:blur(12px);pointer-events:none;transform:translate(-4vw) scale(.986)}.inside-view.is-showing-contents .contents-page{opacity:1;filter:blur(0);pointer-events:auto;visibility:visible;transform:translate(0) scale(1)}.inside-view.is-showing-about .project-hotspot{pointer-events:none}.inside-action-layer{position:absolute;inset:0;z-index:9;width:min(100vw,177.7778svh);aspect-ratio:16 / 9;margin:auto;pointer-events:none}.home-return-button{position:absolute;left:1.1cqw;top:1.1cqw;display:grid;width:2.75cqw;height:2.75cqw;min-width:38px;min-height:38px;max-width:54px;max-height:54px;border:0;border-radius:50%;padding:0;place-items:center;color:#5f5f63eb;background:linear-gradient(145deg,#ffffffad,#ebecf17a),#eff0f4c7;box-shadow:inset 0 1px #ffffffdb,inset 0 -1px #0000000a,0 14px 40px #0000001a;cursor:pointer;pointer-events:auto;transition:background .22s ease,box-shadow .22s ease,color .22s ease,transform .22s ease;backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}.home-return-button svg{width:58%;height:58%;stroke-width:3;transition:transform .22s ease}.home-return-button:hover,.home-return-button:focus-visible{color:#3a3a3ef5;background:linear-gradient(145deg,#ffffffc7,#ebecf194),#eff0f4db;box-shadow:inset 0 1px #ffffffeb,inset 0 -1px #0000000d,0 18px 48px #00000021;transform:scale(1.04)}.home-return-button:hover svg,.home-return-button:focus-visible svg{transform:translate(-2px)}.contents-canvas{position:relative;width:100%;height:100%;overflow:hidden;color:#231f20;background:#fff}.contents-word,.contents-number,.contents-photo-button,.contents-project-title{opacity:0;animation:contents-piece-enter .68s cubic-bezier(.2,.82,.16,1) both}.contents-word{position:absolute;left:4.43cqw;top:46.9cqw;margin:0;font-size:5.05cqw;font-weight:700;letter-spacing:0;line-height:.95;animation-delay:.12s}.contents-project{position:absolute;left:var(--photo-left);top:var(--photo-top);width:15.05cqw;height:25.5cqw}.contents-project-01{--photo-left: 57.34cqw;--photo-top: 4.17cqw;--photo-position: 35% 48%;--number-delay: .26s;--media-delay: .42s;--title-left: 5.82cqw}.contents-project-02{--photo-left: 80.78cqw;--photo-top: 4.17cqw;--photo-position: 50% 58%;--number-delay: .56s;--media-delay: .72s;--title-left: 5.82cqw}.contents-project-03{--photo-left: 57.34cqw;--photo-top: 29.06cqw;--photo-position: 50% 50%;--number-delay: .86s;--media-delay: 1.02s;--title-left: 9.25cqw}.contents-project-04{--photo-left: 80.78cqw;--photo-top: 29.06cqw;--photo-position: 50% 45%;--number-delay: 1.16s;--media-delay: 1.32s;--title-left: 5.82cqw}.contents-number{position:absolute;left:-2.05cqw;top:16.65cqw;z-index:2;color:#ffffff0a;font-size:5.12cqw;font-weight:700;letter-spacing:0;line-height:.95;-webkit-text-stroke:1.4px #231f20;text-stroke:1.4px #231f20;animation-delay:var(--number-delay);pointer-events:none}.contents-photo-button{position:absolute;left:0;top:0;z-index:1;width:15.05cqw;height:19.84cqw;border:0;border-radius:.62cqw;padding:0;overflow:hidden;background:transparent;box-shadow:0 8px 18px #0000000a;cursor:pointer;animation-delay:var(--media-delay);animation-name:contents-photo-enter;transition:box-shadow .22s ease,transform .22s ease}.contents-photo-button:hover,.contents-photo-button:focus-visible{box-shadow:0 12px 26px #00000012;transform:scale(1.026)}.contents-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--photo-position)}.contents-photo-button.is-placeholder,.contents-photo-button.is-placeholder .contents-photo{background:#bfc1c3}.contents-project-title{position:absolute;left:var(--title-left);top:20.82cqw;z-index:3;width:12.4cqw;margin:0;color:#231f20;font-size:1.02cqw;font-weight:700;letter-spacing:0;line-height:1.2;white-space:nowrap;animation-delay:var(--media-delay);pointer-events:none}.side-pager{position:fixed;left:50%;bottom:clamp(16px,2.4svh,26px);z-index:8;display:flex;align-items:center;gap:14px;border-radius:999px;padding:13px 18px;background:linear-gradient(145deg,#ffffffad,#ebecf17a),#eff0f4b8;box-shadow:inset 0 1px #ffffffdb,inset 0 -1px #0000000a,0 18px 54px #0000001f;transform:translate(-50%);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}.side-pager button{width:12px;height:12px;border:0;border-radius:999px;padding:0;background:#5f5f63d1;cursor:pointer;transition:width .28s cubic-bezier(.2,.82,.16,1),height .28s cubic-bezier(.2,.82,.16,1),background .22s ease,transform .22s ease}.side-pager button:hover{background:#444448e6;transform:scale(1.12)}.side-pager button.is-active{width:46px;height:12px;background:#5f5f63f2;transform:none}.stage-artwork,.project-page-frame{box-shadow:0 20px 70px #00000014}.about-page{position:relative;display:block;width:100%;height:100%;color:#231f20;background:#fff}.about-left h1,.about-name,.about-info,.timeline-title,.timeline,.about-right .experience,.about-bio,.tools{opacity:0;animation:about-block-enter .72s cubic-bezier(.2,.82,.16,1) both}.about-left h1{animation-delay:.12s}.about-name{animation-delay:.22s}.about-info{animation-delay:.34s}.about-bio{animation-delay:.44s}.timeline-title{animation-delay:.56s}.timeline{animation-delay:.68s}.tools{animation-delay:.8s}.about-right .experience:nth-of-type(1){animation-delay:.92s}.about-right .experience:nth-of-type(2){animation-delay:1.04s}.about-right .experience:nth-of-type(3){animation-delay:1.16s}.about-page h1,.about-page h2,.about-page h3,.about-page h4,.about-page p{margin:0}.about-left,.about-center,.about-right{position:absolute}.about-left{left:4.17cqw;top:4.08cqw;width:29.3cqw}.about-center{left:38.02cqw;top:4.12cqw;width:26.6cqw}.about-right{left:70.05cqw;top:4.12cqw;width:25.8cqw}.about-name{display:flex;align-items:baseline;gap:1.15cqw;margin:1.55cqw 0 0}.about-name h2{font-size:3.26cqw;font-weight:700;letter-spacing:0;line-height:1}.about-name p{font-size:2.05cqw;font-weight:700}.about-name span{color:#4a83c4}.about-left h1{margin:0;font-size:5.25cqw;font-weight:700;line-height:.95;letter-spacing:0}.about-info{position:absolute;left:0;top:14.5cqw;margin-top:0}.about-bio,.tools{position:absolute;left:0;top:29.6cqw;margin-top:0}.about-info h3,.about-bio h3,.tools h3,.experience h3{margin-bottom:1.55cqw;color:#4a83c4;font-size:1.55cqw;font-weight:700;line-height:1}.about-info ul{display:grid;gap:.96cqw;margin:0;padding:0;font-size:1.05cqw;font-weight:500;line-height:1.42;list-style:none}.about-info li:before{display:none;content:""}.about-info li{display:grid;grid-template-columns:1.7cqw 1fr;align-items:center;gap:1.35cqw}.about-info svg{width:1.42cqw;height:1.42cqw;color:#111;stroke-width:2}.about-bio p,.experience p{font-size:1.03cqw;font-weight:500;line-height:1.64;text-align:justify}.about-bio p+p{margin-top:.78cqw}.about-center .timeline-title{margin:0 0 1.84cqw;color:#4a83c4;font-size:1.55cqw;font-weight:700;line-height:1}.timeline{position:relative;display:grid;gap:3.09cqw;margin:.22cqw 0 0 .08cqw;padding-left:2.34cqw}.timeline:before{position:absolute;left:.62cqw;top:.44cqw;width:1px;height:19.95cqw;background:#4a83c4;content:""}.timeline-item{position:relative}.timeline-item:before{position:absolute;left:-2.25cqw;top:-.12cqw;width:1.02cqw;height:1.02cqw;border-radius:50%;background:#4a83c4;content:""}.timeline-item:last-child:before{background:#fff;box-shadow:inset 0 0 0 2px #4a83c4}.timeline-item time{display:block;margin-bottom:.72cqw;color:#231f20;font-size:1.18cqw;font-weight:700;line-height:1}.timeline-item p{font-size:1.02cqw;font-weight:500;line-height:1.5}.tool-grid{--tool-radius: .62cqw;display:grid;grid-template-columns:repeat(5,3.9cqw);gap:1.29cqw 1.15cqw}.tool-tile{box-sizing:border-box;display:grid;width:3.9cqw;height:3.9cqw;border-radius:var(--tool-radius);clip-path:inset(0 round var(--tool-radius));place-items:center;overflow:hidden}.tool-tile.dark{background:#121212}.tool-tile.light{border:1px solid #d7d7d7;background:#fff}.tool-tile.blue{background:#4558bd}.tool-tile.image-fill img{width:3.9cqw;height:3.9cqw;border-radius:var(--tool-radius)}.tool-tile img{display:block;width:72%;height:72%;object-fit:contain}.tool-tile.figma img,.tool-tile.gemini img{width:70%;height:70%}.tool-tile.jimeng img,.tool-tile.kimi img{width:72%;height:72%}.tool-tile.openai img{width:74%;height:74%}.tool-tile.codex img{width:100%;height:100%}.tool-tile.claude img,.tool-tile.cursor img,.tool-tile.trae img{width:72%;height:72%}.tool-tile.comfy img{width:73%;height:73%}.tool-tile.lovart img,.tool-tile.openclaw img,.tool-tile.banana img{width:72%;height:72%}.about-right{display:block}.about-right .experience{position:absolute;left:0;width:100%}.about-right .experience:nth-of-type(1){top:0}.about-right .experience:nth-of-type(2){top:14.5cqw}.about-right .experience:nth-of-type(3){top:29.6cqw}.ability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.05cqw 1.42cqw}.ability-grid span{font-size:1.02cqw;font-weight:500;line-height:1.35;white-space:nowrap}.experience h4{margin-bottom:.45cqw;font-size:1.02cqw;font-weight:700;line-height:1.55}.about-right .experience:nth-of-type(3) p{line-height:1.7}.project-hotspots{position:absolute;inset:0;width:min(100vw,177.7778svh);aspect-ratio:16 / 9;margin:auto;pointer-events:none}.project-hotspot{position:absolute;border:0;border-radius:18px;padding:0;background:#ffffff03;cursor:pointer;pointer-events:auto;transition:background .22s ease,box-shadow .22s ease,transform .22s ease}.project-hotspot:before{position:absolute;inset:0;border:1px solid rgba(0,113,227,0);border-radius:inherit;content:"";transition:border-color .22s ease}.project-hotspot span{position:absolute;right:18px;bottom:18px;border-radius:999px;padding:8px 12px;color:#fff;background:#00000075;box-shadow:0 10px 28px #00000029;font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.project-hotspot:hover,.project-hotspot:focus-visible{background:#fff3;box-shadow:0 22px 70px #0000001f;transform:scale(1.018)}.project-hotspot:hover:before,.project-hotspot:focus-visible:before{border-color:#0071e36b}.project-hotspot:hover span,.project-hotspot:focus-visible span{opacity:1;transform:translateY(0)}.hotspot-01{left:54.7%;top:6.8%;width:19%;height:40.8%}.hotspot-02{left:78.3%;top:6.8%;width:19%;height:40.8%}.hotspot-03{left:54.7%;top:51%;width:19%;height:40.8%}.hotspot-04{left:78.3%;top:51%;width:19%;height:40.8%}.back-button{position:fixed;top:20px;left:20px;z-index:10;min-height:38px;border:1px solid rgba(29,29,31,.12);border-radius:999px;padding:0 14px;color:#1d1d1f;background:#ffffffbd;box-shadow:0 10px 28px #00000014;cursor:pointer;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.back-button:hover{background:#fffffff0}.inside-view>.back-button{opacity:0;pointer-events:none}.project-view{align-items:start;box-sizing:border-box;min-height:100svh;overflow:visible;padding:clamp(18px,3vw,42px);animation:project-enter .52s cubic-bezier(.2,.8,.2,1) both;justify-content:center;place-items:start center}.project-return-button{--project-stage-width: min(100vw, 177.7778svh);--project-stage-height: calc(var(--project-stage-width) * .5625);position:fixed;left:calc((100vw - var(--project-stage-width)) / 2 + var(--project-stage-width) * .011);top:calc((100svh - var(--project-stage-height)) / 2 + var(--project-stage-width) * .011);z-index:30;width:clamp(38px,calc(var(--project-stage-width) * .0275),54px);height:clamp(38px,calc(var(--project-stage-width) * .0275),54px)}.project-pages{display:grid;justify-self:center;width:min(calc(100vw - clamp(36px,6vw,84px)),177.7778svh);gap:clamp(14px,2vw,28px)}.project-page-frame{width:100%;margin:0;aspect-ratio:16 / 9;border-radius:clamp(12px,1.2vw,22px);overflow:hidden;background:transparent;transform:translateY(32px) scale(.982);transition:transform .76s cubic-bezier(.2,.82,.16,1)}.project-page-frame:has(.project-page-image.is-visible){transform:translateY(0) scale(1)}.project-page-image{display:block;width:100%;height:100%;object-fit:contain;opacity:1}.notice{position:fixed;left:50%;bottom:28px;z-index:12;border-radius:999px;padding:10px 14px;color:#fff;background:#1d1d1fc7;box-shadow:0 14px 40px #0000002e;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transform:translate(-50%,10px);transition:opacity .22s ease,transform .22s ease;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.notice.is-visible{opacity:1;transform:translate(-50%)}@keyframes home-stage-enter{0%{background:#fff}to{background:#fbfbfd}}@keyframes block-enter{0%{opacity:0;transform:translate(38px) scaleX(.96);transform-origin:left center}to{opacity:1;transform:translate(0) scaleX(1);transform-origin:left center}}@keyframes person-enter{0%{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes title-enter{0%{opacity:0;transform:translate(34px)}to{opacity:1;transform:translate(0)}}@keyframes button-enter{0%{opacity:0;transform:translate(-18px)}to{opacity:1;transform:translate(0)}}@keyframes home-leave{0%{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(12px);transform:scale(1.018) translateY(-1.2%)}}@keyframes page-enter{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes about-canvas-enter{0%{opacity:0;transform:scale(.992)}to{opacity:1;transform:scale(1)}}@keyframes about-block-enter{0%{opacity:0;filter:blur(8px);transform:translateY(18px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes contents-piece-enter{0%{opacity:0;filter:blur(8px);transform:translateY(18px) scale(.986)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}@keyframes contents-photo-enter{0%{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}@keyframes project-enter{0%{opacity:0;transform:translateY(18px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:1ms!important;scroll-behavior:auto!important;transition-duration:1ms!important}}