/* Reference geometry, full-page choreography and responsive composition. */
body{overflow-x:clip;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.project>div:first-child>.pill{align-self:flex-start}
#cursor.view{mix-blend-mode:difference}#cursor.view:before{background:#fff}#cursor.view span{color:#09090b}
#cursor.preview:before{transform:scale(1)}
@media(max-width:639px),(hover:none),(pointer:coarse){#cursor{display:none!important}.custom-cursor,.custom-cursor *{cursor:auto!important}}
.personal-slide:focus-visible{outline-offset:-5px}
.personal-overlay,.slide-count{pointer-events:auto}
.avatar-stage{position:relative;width:100%;height:100%;mask-image:linear-gradient(#000 68%,transparent 100%)}
.hero-portrait .avatar-body{mask-image:none;transform:none;transition:none;pointer-events:none}
.experience-sticky .ghost{text-align:center;left:0;width:100%;transform:none;font-size:clamp(70px,12.5vw,175px)}
#projects .project-progress{width:auto;height:auto;left:50%;right:auto;bottom:28px;display:flex;align-items:center;gap:10px;transform:translateX(-50%);background:none}
#projects .project-progress:before{display:none}
.project-progress b{font-size:9px;font-weight:700;letter-spacing:.3em;line-height:1;color:var(--muted)}
.project-progress-track{position:relative;overflow:hidden;width:56px;height:1px;background:#ffffff26}
#projects .project-progress span{inset:0 auto auto 0;width:16px;height:1px;animation:reference-scroll-left 1.65s cubic-bezier(.45,0,.55,1) infinite}
#projects .project-progress.last{flex-direction:column;bottom:20px;transform:translateX(-50%)}
.project-progress.last .project-progress-track{width:1px;height:40px}
#projects .project-progress.last span{width:1px;height:16px;animation-name:reference-scroll-down}
.scroll-cue i{animation-name:reference-scroll-down}
@keyframes reference-scroll-left{0%{opacity:0;transform:translateX(350%)}18%,72%{opacity:1}100%{opacity:0;transform:translateX(-120%)}}
@keyframes reference-scroll-down{0%{opacity:0;transform:translateY(-120%)}18%,72%{opacity:1}100%{opacity:0;transform:translateY(250%)}}
@media(max-width:1023px){#projects .project-progress{display:none}}
@media(prefers-reduced-motion:reduce){#projects .project-progress{display:none}}
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}
#home{height:auto;min-height:100dvh;padding:64px 0 24px}.hero-head{padding-inline:24px;margin-top:8px}h1{font-size:14.5vw;letter-spacing:-.05em}.hero-portrait{top:100px;width:220px;height:auto;aspect-ratio:1}.hero-portrait img{mix-blend-mode:normal;mask-image:linear-gradient(#000 65%,transparent 100%);object-fit:contain}.hero-description{bottom:5.4rem;font-size:14px;line-height:24px}.scroll-cue{bottom:20px;animation:fade-in .6s 1.15s both}
.notepad{background:#101014 radial-gradient(#ffffff1c 1.1px,transparent 1.3px) 16px 16px/26px 26px;border:0;border-radius:20px;box-shadow:0 34px 70px -34px #000d9;overflow:hidden}.notepad:before{content:"";position:absolute;right:0;top:0;width:52px;height:52px;background:linear-gradient(225deg,#08090b 0%,#08090b 43%,#ffffff30 43%,#ffffff30 48%,#23232b 48%);border-top-right-radius:20px;z-index:2}.intro-layout{grid-template-columns:minmax(260px,.72fr) minmax(0,1.7fr)}#intro-panel,.spotlight{font-size:clamp(1.75rem,3.5vw,3.6rem)}
#experience,#projects{height:auto}.experience-sticky{position:relative;height:100svh;padding-block:0}.experience-sticky>.section-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.experience-sticky .ghost{top:120px;left:50%;width:110%;transform:translateX(-50%);font-size:13.5vw;color:#ffffff06}.timeline{left:50%;top:60px;bottom:64px;background:#ffffff26}.timeline:before{content:"";position:absolute;left:-9.5px;top:50%;width:20px;height:20px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 6px #a3e63518,0 0 35px #a3e63540}.timeline:after{content:"";position:absolute;left:-4px;top:7%;width:9px;height:9px;background:#52525b;border-radius:50%;box-shadow:0 calc(86vh - 106px) #52525b}.chapter{inset:48px;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:24px;align-items:center}.chapter>div:first-child{grid-column:1;padding:0 12px 0 0}.chapter>div:last-child{grid-column:3;padding-right:0;transform:translateY(24px)}.chapter h3{font-size:clamp(1.9rem,3.05vw,3.8rem);font-weight:900;letter-spacing:-.045em;line-height:1.15;margin:24px 0 20px}.chapter .role{font-size:20px;font-weight:600}.chapter .location{font-size:16px;margin-top:12px}.chapter .overview{border-top:1px solid var(--line);padding-top:24px;margin-top:28px;font-size:14px;line-height:28px;color:var(--muted)}.chapter-items{margin:0;gap:26px}.chapter-items>div+div{border-top:1px solid var(--line);padding-top:24px}.chapter-items h4{font-size:24px;line-height:1.3;letter-spacing:-.025em;margin-bottom:12px}.chapter-items h4:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);vertical-align:middle;margin-right:12px}.chapter-items p{font-size:14px;line-height:26px}.period{font-size:14px}.project-sticky{position:relative}#project-track{width:max-content}.project{padding:96px max(48px,calc((100vw - 1472px)/2)) 40px;gap:48px;max-width:none}.project>div:first-child,.project-visual{min-height:min(66vh,690px);display:flex;flex-direction:column;justify-content:center}.project-visual>div{width:100%;max-width:760px}.project-visual .phone{margin:auto}.project h2{font-size:clamp(3.8rem,8vw,8.7rem);line-height:1;letter-spacing:-.075em;word-break:keep-all;overflow-wrap:normal}.project-meta{margin-bottom:40px}.work-label{top:86px;left:48px}.project:before{color:#ffffff05}.project-progress{left:50%;right:auto;bottom:28px;transform:translateX(-50%);height:1px;width:40px}.project-progress:before{content:"SCROLL";position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.3em;color:var(--muted)}.project-progress span{position:absolute;width:16px;transform:none;animation:scroll-side 1.65s cubic-bezier(.45,0,.55,1) infinite}.project-progress.last{transform:translateX(-50%) rotate(90deg);bottom:35px}.project-progress.last:before{display:none}@keyframes scroll-side{from{left:0}to{left:24px}}
#carousel{width:min(68vw,1600px)}
#contact.wrap{max-width:none;min-height:100dvh;padding:64px max(48px,calc((100vw - 1304px)/2)) 0;overflow:hidden;background:radial-gradient(38rem 30rem at var(--px,50%) var(--py,50%),#ffffff13,transparent 68%),linear-gradient(#07090d,#0a0c11);display:flex;flex-direction:column}#contact h2{display:flex;flex:1;flex-direction:column;justify-content:center;text-align:center;min-height:52vh;padding-block:40px;font-size:clamp(3.5rem,8.4vw,7.25rem);line-height:.92;letter-spacing:-.05em;font-weight:900}.contact-line{display:block;white-space:nowrap}#contact h2 .contact-line:first-child{color:#f4f4f5}#contact h2 .contact-line:last-child{color:transparent;-webkit-text-stroke:1px #fff;margin-top:.13em}html[lang=en] #contact h2{font-size:clamp(4rem,11.2vw,10.5rem);line-height:.86;font-weight:500;letter-spacing:-.07em}.contact-grid{grid-template-columns:4fr 8fr;gap:0;margin:24px 0 0;border-top:1px solid var(--line);padding:36px 0 40px}.contact-grid>div+div{padding-left:48px;border-left:1px solid var(--line)}.contact-grid a{margin-top:16px}.contact-grid .email{font-size:clamp(18px,2vw,30px)}.bottom{margin-top:auto}.contact-grid .muted{margin-top:16px}
@media(min-width:640px){#home{padding-top:80px;padding-bottom:32px}h1{font-size:14vw}.hero-portrait{top:120px;width:280px}.hero-description{bottom:6.2rem;font-size:16px}.scroll-cue{bottom:28px}}
@media(min-width:768px){#home{min-height:760px;padding-top:96px}.hero-head{padding-inline:48px;margin-top:32px}h1{font-size:12vw}.hero-portrait{top:180px;width:380px}}
@media(min-width:1024px){#home{min-height:820px}h1{font-size:11vw}.hero-portrait{top:200px;width:450px}}
@media(min-width:1280px){#home{min-height:100dvh;padding-bottom:40px}.hero-portrait{width:500px}.notepad,.spotlight{padding:64px}.chapter>div:first-child{padding-left:48px;padding-right:32px}.chapter>div:last-child{padding-right:40px}.project{gap:64px}.project-meta{margin-bottom:64px}.work-label{left:64px}}
@media(min-width:1024px) and (max-height:780px){.chapter-items{gap:16px}.chapter-items>div+div{padding-top:16px}.chapter-items h4{font-size:22px}.chapter-items p{font-size:13px;line-height:23px}.project-meta{margin-bottom:24px}.project h2{font-size:7vw}.project .lead{font-size:22px}.project-role{margin-top:20px;font-size:13px}.project>div:first-child,.project-visual{min-height:0}}
@media(max-width:1023px){.intro-layout{grid-template-columns:minmax(0,1fr)}.experience-sticky{height:auto;padding-block:80px}.experience-sticky>.section-title{position:relative;clip-path:none;overflow:visible;width:auto;height:auto;font-size:48px}.chapter{inset:auto;display:block;padding-left:26px;border-top:0;border-left:1px solid #ffffff26;margin-left:4px;padding-top:0;padding-bottom:64px}.chapter:before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;background:var(--lime);border-radius:50%}.chapter>div:first-child,.chapter>div:last-child{padding:0;transform:none}.chapter-items{grid-template-columns:1fr;margin-top:32px}.chapter-items h4{font-size:22px}.chapter-items p{font-size:15px;line-height:27px}.chapter h3{font-size:34px}.project-sticky{height:auto}#project-track{width:100%}.project{padding:100px 24px 70px;gap:40px}.project>div:first-child,.project-visual{min-height:0}.project h2{font-size:64px}.project-visual>div{width:100%}.work-label{top:40px;left:24px}.project-meta{margin-bottom:24px}#carousel{width:100%}#contact.wrap{padding:64px 24px 0}.contact-grid>div+div{padding-left:28px}}
@media(max-width:639px){.hero-head{margin-top:8px}.notepad{min-height:430px;padding:28px}.spotlight{padding:28px}.chapter h3{font-size:30px}.project h2{font-size:58px}#contact h2{font-size:13vw;min-height:44vh}html[lang=en] #contact h2{font-size:11.2vw;line-height:.95}.contact-grid{grid-template-columns:1fr;gap:32px;margin-top:0}.contact-grid>div+div{padding:28px 0 0;border-left:0;border-top:1px solid var(--line)}.contact-grid .email{font-size:20px}.intro-left h2{font-size:clamp(3.5rem,8vw,7.5rem)}}
@media(prefers-reduced-motion:reduce){.experience-sticky{height:auto;padding-block:80px}.experience-sticky>.section-title{clip-path:none;position:relative;width:auto;height:auto}.chapter{position:relative;inset:auto;min-height:500px;margin-top:40px}.project-sticky{height:auto}#project-track{width:100%}.project{min-height:100vh}.contact-line{transform:none!important}.project-progress{display:none}}
.experience-sticky .ghost{text-align:center;left:0;width:100%;transform:none;font-size:clamp(70px,12.5vw,175px)}

/* Recorded whole-character motion, composited with a clean transparent matte. */
.hero-portrait{cursor:pointer;touch-action:manipulation}
.avatar-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none}
.avatar-ready .avatar-canvas{opacity:1}
.avatar-ready .avatar-body{visibility:hidden}
.avatar-video-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%)}
.hero-portrait:focus-visible{outline:1px solid var(--lime);outline-offset:6px;border-radius:24px}

/* Widen the canvas while preserving the character's existing display height. */
.hero-portrait{--avatar-height:220px;width:calc(var(--avatar-height)*4/3);height:var(--avatar-height);aspect-ratio:4/3;top:calc(100% - clamp(26px,5vw,56px))}
@media(min-width:640px){.hero-portrait{--avatar-height:280px}}
@media(min-width:768px){.hero-portrait{--avatar-height:380px}}
@media(min-width:1024px){.hero-portrait{--avatar-height:450px}}
@media(min-width:1280px){.hero-portrait{--avatar-height:500px}}

/* One continuous light behind the content, including pinned sections.
   It never blends over the portrait, project images or text. */
body{isolation:isolate}
#ambient-glow{position:fixed;left:0;top:0;width:76rem;height:60rem;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#ffffff13,transparent 68%);opacity:0;transition:opacity .2s ease;will-change:transform}
#contact.wrap{background:transparent}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){#ambient-glow{display:none}}

/* Three real milestones: two internships, then education. */
.timeline{top:96px;bottom:80px}
.timeline:before,.timeline:after{display:none}
.timeline-progress{transform:scaleY(0);transform-origin:top}
.timeline-node{position:absolute;left:50%;width:12px;height:12px;border-radius:50%;background:#52525b;transform:translate(-50%,-50%)}
.timeline-node:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--lime);box-shadow:0 0 0 5px #a3e63512,0 0 22px #a3e63535;opacity:0;transition:opacity .16s ease}
.timeline-node.is-reached:after{opacity:1}
.timeline-node:before{content:"";position:absolute;inset:-2px;border:1px solid #a3e635b3;border-radius:inherit;box-shadow:0 0 10px #a3e63526;opacity:0;transform:scale(.9);pointer-events:none}
.timeline-node.is-reached:before{animation:milestone-ring .8s var(--ease) both}
@keyframes milestone-ring{0%{opacity:0;transform:scale(.9)}15%{opacity:.65}100%{opacity:0;transform:scale(3.2)}}
@media(prefers-reduced-motion:reduce){.timeline-node.is-reached:before{animation:none}}
.experience-sticky .ghost{top:96px;left:0;width:100%;text-align:center;transform:none;pointer-events:none}

/* Mobile publication polish: readable flow, comfortable touch targets. */
@media(max-width:1023px){
  #menu,#language{min-width:44px;min-height:44px}
  .brand{min-height:44px}
  #navigation a{display:flex;align-items:center;min-height:44px}
  #navigation{max-height:calc(100dvh - 76px);overflow-y:auto}
  .project>div,.chapter>div,.metrics>div{min-width:0}
  .phone{max-width:100%}
  .experience-sticky>.section-title{font-size:clamp(26px,7.5vw,48px)}
}
@media(max-width:767px){
  #home{min-height:100svh;height:auto;padding-top:96px;padding-bottom:108px}
  .hero-head{margin-top:0;padding-inline:16px}
  .hero-portrait{--avatar-height:min(300px,72vw);position:relative;top:auto;margin-top:-20px;animation:none}
  .hero-description{position:relative;left:auto;bottom:auto;transform:none;margin:12px auto 0;width:calc(100% - 40px);font-size:14px;line-height:1.7}
  .scroll-cue{bottom:24px}
  .project h2{font-size:clamp(44px,14vw,64px);overflow-wrap:anywhere}
  .personal-overlay{padding:24px 20px}
  .personal-overlay h3{font-size:clamp(26px,8vw,36px)}
  html[lang=en] #contact h2{font-size:clamp(25px,9vw,44px)}
  #contact{padding-bottom:env(safe-area-inset-bottom)}
}