body{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif}.hero-tagline{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-size:14px}.hero-tagline small{font-size:10px;letter-spacing:.13em}.about-text,.about-sub,.skills-text,.skills-subtitle,.skill-header-title,.skill-body-inner,.award-item,.contact-dispo,.contact-title,.proj-item,.detail-title,.detail-desc,.cg-phrase{font-family:'Breton','PingFang SC','Microsoft YaHei',sans-serif}.about-text{line-height:1.55}.about-sub{line-height:1.9}.about-version{white-space:nowrap;font-size:14px}.about-photo{object-fit:cover}.all-work-link{display:inline-block;margin-top:35px;color:#f0f0f0;border-bottom:1px solid #666;padding-bottom:12px;text-decoration:none;font-size:14px;letter-spacing:.04em}.all-work-link:hover{color:#e53726}.contact-title{font-size:clamp(3rem,13vw,14rem);letter-spacing:-.06em;white-space:nowrap}.proj-item{font-size:clamp(1.7rem,3.6vw,3.5rem)}.detail-title{font-size:clamp(2rem,4vw,4.5rem)}.detail-back{cursor:pointer}.skill-header{cursor:pointer}a:focus-visible,[role=button]:focus-visible{outline:2px solid #ff4b35;outline-offset:6px}.contact-dispo p{line-height:1.7}.footer-name{white-space:nowrap}.detail-selected img{object-fit:contain}.skip-intro{position:fixed;top:22px;right:25px;z-index:99999;background:none;border:0;color:#eee;font-size:12px;cursor:pointer;opacity:.75}.skip-intro:focus-visible{outline:1px solid white}.hero-bar-center{gap:10px}.reveal-phrase{font-family:'PingFang SC','Microsoft YaHei',sans-serif}
@media(max-width:700px){.hero-tagline{left:1.3rem;top:1.7rem;font-size:12px}.about-text{width:100%;font-size:27px}.about-sub{width:100%;font-size:14px}.about-version{font-size:11px}.hero-bar-center{display:none}.hero-bar{left:1.3rem;right:1.3rem}.proj-item{font-size:24px;white-space:normal}.contact-mail{font-size:clamp(20px,6vw,32px)}.detail-title{font-size:27px!important}.award-item{font-size:12px}.all-work-link{font-size:12px}.cg-phrase{font-size:30px}.skills-text{line-height:1.65}}
/* Readable native-scroll fallback when an intro dependency fails. */
.static-fallback{overflow-y:auto!important}.static-fallback body{overflow-y:auto!important}.static-fallback #intro-bg,.static-fallback #transition-panel,.static-fallback #name-layer,.static-fallback #reveal-image-wrap,.static-fallback #page-fade,.static-fallback #contact-bg,.static-fallback #contact-blob-wrap,.static-fallback .scroll-timeline,.static-fallback .scroll-pct{display:none!important}.static-fallback .hero{opacity:1!important}.static-fallback .hero-tagline,.static-fallback .hero-bar,.static-fallback .hero-line{opacity:1!important;clip-path:none!important}.static-fallback .section-after{position:relative!important;margin-top:0!important}.static-fallback .about{padding:100px 4vw!important}.static-fallback .word,.static-fallback .about-sub{opacity:1!important;filter:none!important}.static-fallback .proj-item{color:#f0f0f0}.static-fallback .circle-gallery{display:none}.static-fallback .contact{height:auto!important;padding:80px 4vw}.static-fallback .contact-pin{position:relative!important;height:auto!important}.static-fallback .contact-title{position:relative!important;transform:none!important;opacity:1!important}.static-fallback .contact-dispo,.static-fallback .contact-frame{display:none!important}.static-fallback .contact-bottom{position:relative!important;transform:none!important;opacity:1!important;margin-top:35px}.static-fallback .footer{position:relative!important;transform:none!important}

.about-photo{object-position:center;filter:none!important}
/* Editorial profile: content stays readable independently of animation startup. */
#about.about-editorial{padding:clamp(100px,13vh,180px) 4vw 100px;min-height:0;font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;isolation:isolate} .profile-topline{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #3d3d3d;padding-top:20px;margin-bottom:64px;font-size:11px;letter-spacing:.08em;color:#aaa}.profile-topline>span:first-child{color:#f0f0f0}.profile-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:5.5vw;align-items:start}.profile-copy{position:relative;z-index:2}.profile-copy h2{font-size:clamp(31px,3.8vw,64px);font-weight:500;line-height:1.42;letter-spacing:-.045em;margin:0 0 38px}.profile-copy h2>span{color:#e7422e}.profile-identity{display:flex;gap:22px;align-items:center;margin-bottom:27px}.profile-identity>img{display:block;width:72px;height:96px;object-fit:cover;flex-shrink:0}.profile-identity h3{font-size:23px;font-weight:500;letter-spacing:.01em;margin:0 0 10px}.profile-identity h3>span{display:inline-block;margin-left:12px;color:#888;font-family:Breton,Arial,sans-serif;font-size:15px}.profile-identity p{font-size:11px;color:#bbb;line-height:1.7}.profile-description{font-size:14px;line-height:1.95;color:#b3b3b3;max-width:430px;margin:0 0 30px}.profile-capabilities{list-style:none;padding:0;margin:0}.profile-capabilities li{display:flex;gap:20px;align-items:flex-start;padding:19px 0;border-top:1px solid #303030}.profile-index{font-size:10px;color:#d8412e;padding-top:4px;font-variant-numeric:tabular-nums}.profile-capabilities h4{font-size:15px;font-weight:500;margin:0 0 7px}.profile-capabilities p{font-size:12px;line-height:1.7;color:#888;margin:0}.profile-en{margin-left:auto;white-space:nowrap;font-size:9px;color:#777;letter-spacing:.06em;padding-top:4px}.profile-art{position:sticky;top:60px;height:clamp(540px,47vw,760px);background:#0a0a0a;overflow:hidden;--art-x:0px;--art-y:0px}.profile-video-stage{mix-blend-mode:screen;position:absolute;inset:0;transform:translate(var(--art-x),var(--art-y)) scale(1.035);transition:transform 1.2s cubic-bezier(.15,.7,.3,1)}.profile-art video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.profile-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.18),transparent 25%,transparent 66%,rgba(10,10,10,.8))}.profile-art-top,.profile-art-bottom{position:absolute;left:30px;right:30px;z-index:2;display:flex;align-items:center;justify-content:space-between}.profile-art-top{top:26px;font-size:9px;color:#888;letter-spacing:.16em}.profile-art-dot{width:5px;height:5px;border-radius:50%;background:#e7422e}.profile-art-bottom{bottom:27px;gap:20px}.profile-art-bottom>span{font-size:13px;color:#bbb;line-height:1.5}.profile-art-bottom small{display:block;font-size:8px;letter-spacing:.08em;color:#777;margin-top:7px}.profile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #3d3d3d;border-bottom:1px solid #3d3d3d;margin:64px 0 0;padding:32px 0}.profile-metrics>div{display:flex;align-items:center;justify-content:center;gap:24px;padding:6px 18px;border-right:1px solid #333}.profile-metrics>div:first-child{justify-content:flex-start;padding-left:0}.profile-metrics>div:last-child{border-right:0}.profile-metrics dt{display:flex;align-items:baseline;white-space:nowrap;gap:4px;line-height:1}.profile-metrics strong{font-family:Breton,Arial,sans-serif;font-weight:400;font-size:clamp(44px,5vw,78px);letter-spacing:-.065em}.profile-metrics dt>span{font-size:20px;color:#e7422e;letter-spacing:-.05em}.profile-metrics dd{margin:0;font-size:12px;line-height:1.7;white-space:nowrap}.profile-metrics dd>small{display:block;color:#666;font-size:8px;margin-top:6px;letter-spacing:.06em}.profile-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:27px}.profile-footer>span{font-size:10px;color:#777}.profile-footer>div{display:flex;gap:35px}.profile-footer a{display:flex;gap:18px;align-items:center;text-decoration:none;color:#ddd;font-size:12px;padding:10px 0}.profile-footer a:hover{color:#e7422e}.profile-footer a>span{color:#e7422e;font-size:17px}.static-fallback #about.about-editorial{padding:100px 4vw!important}
@media(min-width:1800px){#about.about-editorial{padding-left:7vw;padding-right:7vw}.profile-layout{gap:7vw}}
@media(max-width:1050px){.profile-layout{gap:4vw}.profile-art{height:590px}.profile-en{display:none}.profile-metrics>div{gap:15px;padding-left:12px;padding-right:12px}.profile-metrics dd{font-size:10px}.profile-metrics dt>span{font-size:17px}.profile-metrics dd>small{font-size:7px}}
@media(max-width:760px){#about.about-editorial{padding:100px 6vw 70px}.profile-topline{margin-bottom:38px;font-size:9px;gap:15px}.profile-topline>span:last-child{font-size:8px;letter-spacing:.02em}.profile-layout{grid-template-columns:1fr;gap:35px}.profile-copy h2{font-size:clamp(29px,7.5vw,48px);margin-bottom:28px}.profile-identity{gap:18px;margin-bottom:24px}.profile-identity>img{width:60px;height:80px}.profile-identity h3{font-size:21px}.profile-identity h3>span{font-size:13px}.profile-identity p{font-size:10px}.profile-description{max-width:100%;font-size:13px}.profile-en{display:block;font-size:8px}.profile-art{position:relative;top:auto;height:auto;aspect-ratio:1.05}.profile-art-top,.profile-art-bottom{left:20px;right:20px}.profile-art-top{top:20px}.profile-art-bottom{bottom:20px}.profile-metrics{margin-top:36px;padding:23px 0}.profile-metrics>div,.profile-metrics>div:first-child{display:block;padding:0 12px;justify-content:initial}.profile-metrics>div:first-child{padding-left:0}.profile-metrics strong{font-size:clamp(33px,8.5vw,52px)}.profile-metrics dt>span{font-size:15px}.profile-metrics dd{font-size:10px;margin-top:13px;white-space:normal}.profile-metrics dd>small{font-size:7px;letter-spacing:0;line-height:1.5}.profile-footer{align-items:flex-start;flex-direction:column;gap:15px}.profile-footer>div{width:100%;justify-content:space-between;gap:20px}.profile-footer a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.profile-video-stage{transform:none;transition:none}}
/* Original white contact reveal, with the reference's dashed arc and orbiting red nodes. */
#contact.bx-contact{min-height:390vh;min-height:390svh;--bx-angle:0deg;--bx-counter:0deg;--bx-mx:0px;--bx-my:0px;--bx-hx:50%;--bx-hy:12%}#contact.bx-contact .contact-pin{height:100vh;height:100svh;min-height:760px}#contact.bx-contact .contact-title{top:5%;left:6%;font-size:clamp(38px,5.8vw,88px);font-weight:600;line-height:1.15;color:#111}.bx-board{position:absolute;inset:24% 0 14%;z-index:3;overflow:hidden;isolation:isolate;color:#111}.bx-orbit{position:absolute;left:50%;top:72px;width:160vw;height:160vw;margin-left:-80vw;border:1px dashed #656565;border-radius:50%;transform:rotate(var(--bx-angle));transition:transform 1.25s cubic-bezier(.2,.7,.2,1);pointer-events:none}.bx-satellite{position:absolute;width:142px;height:142px;border:1px dashed #333;border-radius:50%;padding:11px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) rotate(var(--bx-counter));transition:transform 1.25s cubic-bezier(.2,.7,.2,1)}.bx-n0{left:50%;top:0}.bx-n1{left:100%;top:50%}.bx-n2{left:50%;top:100%}.bx-n3{left:0;top:50%}.bx-ball{display:flex;align-items:center;justify-content:center;flex-direction:column;width:118px;height:118px;border-radius:50%;color:#fff;background:radial-gradient(ellipse at var(--bx-hx) var(--bx-hy),#bd2018 0%,#3d0807 38%,#150706 62%,#6d1510 79%,#f3b8a6 88%,#8b3024 95%);box-shadow:inset 0 0 12px #1e0206a0;transform:translate(var(--bx-mx),var(--bx-my));transition:transform .75s cubic-bezier(.2,1.45,.35,1),background .3s}.bx-ball b{font-family:Breton,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3}.bx-ball small{font-size:8px;color:#e8d7d0;letter-spacing:.1em;margin-top:6px}.bx-copy{position:absolute;left:50%;top:43%;transform:translateX(-50%);width:min(700px,80%);text-align:center;transition:opacity .22s,filter .22s}.bx-copy.bx-changing{opacity:0;filter:blur(3px)}.bx-copy-index{margin:0 0 14px;font-size:9px;letter-spacing:.14em;color:#9d3025}.bx-copy h3{font-size:clamp(24px,2.2vw,36px);font-weight:600;line-height:1.55;letter-spacing:-.035em;margin:0;color:#181818}.bx-copy>p:last-child{font-size:13px;color:#666;line-height:2;margin:28px 0 0}.bx-steps{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;gap:35px}.bx-steps button{display:flex;align-items:center;gap:9px;background:none;border:0;border-bottom:1px solid transparent;padding:9px 0;color:#999;cursor:pointer;font:inherit;font-size:9px;white-space:nowrap}.bx-steps button span{font-size:11px}.bx-steps button[aria-current]{color:#b42920;border-bottom-color:#b42920}.bx-steps button:hover{color:#111}.bx-steps button:focus-visible{outline:2px solid #b42920;outline-offset:5px}.bx-scroll-note{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:8px;color:#999;white-space:nowrap;letter-spacing:.08em}#contact.bx-contact .contact-frame,#contact.bx-contact .contact-dispo{display:none!important}#contact.bx-contact .contact-bottom{bottom:3%;left:6%;right:6%;color:#111;z-index:5}#contact.bx-contact .contact-mail{font-size:clamp(22px,3.2vw,48px)}#contact.bx-contact .contact-socials{gap:24px}.bx-contact .contact-pin::after{content:'LET’S CREATE SOMETHING MEANINGFUL.';position:absolute;right:6%;top:7%;font-size:9px;letter-spacing:.08em;color:#777;z-index:3}.static-fallback #contact.bx-contact{min-height:900px!important;padding:0!important;background:#f0f0f0}.static-fallback #contact.bx-contact .contact-pin{height:900px!important}.static-fallback #contact.bx-contact .contact-title{position:absolute!important;transform:none!important;opacity:1!important}.static-fallback #contact.bx-contact .contact-bottom{position:absolute!important;margin:0!important}.static-fallback #contact.bx-contact .bx-board{opacity:1!important;transform:none!important}
@media(max-width:900px){.bx-board{top:23%;bottom:16%}.bx-orbit{width:220vw;height:220vw;margin-left:-110vw}.bx-copy{top:43%}.bx-copy h3{font-size:26px}.bx-copy>p:last-child{font-size:12px}.bx-contact .contact-pin::after{max-width:150px;text-align:right;font-size:7px;line-height:1.6}}
@media(max-width:600px){#contact.bx-contact{min-height:350svh}#contact.bx-contact .contact-pin{min-height:700px}#contact.bx-contact .contact-title{top:6%;font-size:40px}.bx-board{top:23%;bottom:21%}.bx-orbit{top:58px;width:280vw;height:280vw;margin-left:-140vw}.bx-satellite{width:112px;height:112px;padding:9px}.bx-ball{width:92px;height:92px}.bx-ball b{font-size:12px}.bx-ball small{font-size:7px}.bx-copy{top:42%;width:88%}.bx-copy-index{font-size:8px;margin-bottom:12px}.bx-copy h3{font-size:21px;line-height:1.55}.bx-copy>p:last-child{font-size:11px;line-height:1.9;margin-top:20px}.bx-steps{gap:24px;bottom:26px}.bx-steps button{gap:5px;font-size:8px}.bx-steps button span{font-size:10px}.bx-scroll-note{font-size:7px}#contact.bx-contact .contact-bottom{bottom:4%;display:flex;flex-direction:column;align-items:flex-start;gap:18px}#contact.bx-contact .contact-mail{font-size:clamp(20px,6vw,29px)}#contact.bx-contact .contact-socials{font-size:11px}.bx-contact .contact-pin::after{top:7%;font-size:7px;max-width:100px}}
@media(prefers-reduced-motion:reduce){.bx-orbit,.bx-satellite,.bx-ball,.bx-copy{transition:none}}
/* Keep a single viewport in place while wheel gestures advance the four points. */
#contact.bx-contact{overflow:clip}#contact.bx-contact.bx-is-locked .contact-pin{position:fixed!important;top:0!important;left:0;right:0;width:100%;height:100vh;height:100svh;overscroll-behavior:none}#contact.bx-contact.bx-is-locked .bx-board{overscroll-behavior:contain}
/* Reference motion: synchronized physical spring, vertical slide-through copy, natural screen reveal. */
.bx-orbit,.bx-satellite{transition:none;will-change:transform}.bx-ball{transform:none;transition:none;background:radial-gradient(ellipse at 50% 12.4%,#a11e16 0%,#300807 38%,#1d0807 63%,#681b16 79%,#e7aa9b 86%,#872d23 94%)}.bx-board .bx-copy{top:calc(38.5svh - 160px);width:min(652px,84%);height:320px;overflow:hidden;transition:none;filter:none}.bx-panel{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}.bx-panel-body{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:40px}.bx-panel h3{font-size:clamp(24px,2.23vw,32px);font-weight:700;line-height:1.5;margin:0;letter-spacing:-.025em}.bx-panel p{margin:0;color:#444;font-size:14px;line-height:2}.bx-panel-final h3{font-size:clamp(26px,2.78vw,40px)}.bx-copy-index{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bx-board{top:16.5%;bottom:14%}.bx-steps{opacity:0;pointer-events:none;transition:opacity .2s}.bx-steps:focus-within{opacity:1;pointer-events:auto}.bx-scroll-note{font-size:7px;color:#999}#contact.bx-contact.bx-is-locked .contact-pin{background:#f0f0f0;transform:translate3d(0,var(--bx-stage-y,0px),0)!important;pointer-events:auto!important}#contact.bx-contact.bx-is-locked{pointer-events:auto!important}#contact.bx-contact.bx-is-locked #contact-title,#contact.bx-contact.bx-is-locked #contact-socials,#contact.bx-contact.bx-is-locked #contact-mail{clip-path:none!important;pointer-events:auto!important}.bx-screen-transition #footer{visibility:visible!important}#contact.bx-is-exiting .contact-pin{will-change:transform}.bx-is-exiting .bx-scroll-note{opacity:0}
@media(max-width:900px){.bx-board{top:16.5%;bottom:16%}.bx-board .bx-copy{top:calc(38.5svh - 160px)}.bx-panel p{font-size:13px}}
@media(max-width:600px){.bx-board{top:17%;bottom:21%}.bx-board .bx-copy{top:calc(39svh - 160px);width:90%}.bx-panel-body{gap:28px}.bx-panel h3{font-size:21px;line-height:1.55}.bx-panel-final h3{font-size:25px}.bx-panel p{font-size:11px;line-height:1.9}}

/* Scroll-scrubbed frames: blur and opacity follow the same linear distance. */
.bx-scroll-note{display:none!important}.bx-panel{will-change:transform,opacity,filter;transition:none}

/* Reference geometry: fixed 150vw track; four tangent-mounted nodes rotate with the wheel. */
.bx-board{inset:0;overflow:hidden}
.bx-orbit{top:30svh;width:150vw;height:150vw;margin-left:-75vw;transform:none!important;border-color:#222;transition:none}
.bx-rotor{position:absolute;inset:0;border-radius:50%;transform:rotate(var(--bx-angle));will-change:transform}
.bx-satellite{width:144px;height:144px;padding:11px;transform:translate(-50%,-50%) rotate(var(--bx-node-angle));border-color:#222;transition:none}
.bx-ball{width:120px;height:120px;background:transparent url('/assets/contact-orb.svg') center/100% 100% no-repeat;box-shadow:none;transform:none}
.bx-ball b{font-family:Arial,sans-serif;font-size:16px;font-weight:400}
.bx-ball small{display:none}
.bx-board .bx-copy{top:calc(65.025svh - 200px);height:320px;width:min(652px,84%);overflow:hidden}
.bx-copy-mask{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,#f0f0f0 0%,#f0f0f000 30%,#f0f0f000 70%,#f0f0f0 100%)}
@media(max-width:900px){.bx-orbit{width:150vw;height:150vw;margin-left:-75vw}}
@media(max-width:600px){.bx-orbit{width:250vw;height:250vw;margin-left:-125vw;top:30svh}.bx-satellite{width:112px;height:112px;padding:9px}.bx-ball{width:92px;height:92px}.bx-ball b{font-size:13px}.bx-board .bx-copy{top:calc(65.025svh - 200px);width:88%}}

/* Quiet, staggered editorial motion. Content stays readable without JavaScript. */
[data-reveal-pending]{opacity:0}
.metric-reels{display:inline-flex;align-items:baseline;letter-spacing:0;vertical-align:baseline}
.metric-digit{display:inline-block;position:relative;width:.63em;height:1em;overflow:hidden;line-height:1;vertical-align:baseline}
.metric-strip{display:block;will-change:transform}
.metric-strip>span{display:block;height:1em;line-height:1em;text-align:center;font-variant-numeric:tabular-nums}
.all-work-link{display:inline-flex;align-items:center;gap:14px;margin-top:44px;padding:15px 20px;border:1px solid #555;border-radius:0;color:#eee;font-size:15px;letter-spacing:0;text-decoration:none;transition:background .35s,color .35s,border-color .35s}
.all-work-link small{font-size:10px;color:#999;font-variant-numeric:tabular-nums}
.all-work-arrow{margin-left:22px;color:#e7422e;font-size:22px;transition:transform .35s}
.all-work-link:hover{background:#e7422e;color:#fff;border-color:#e7422e}.all-work-link:hover small,.all-work-link:hover .all-work-arrow{color:#fff}.all-work-link:hover .all-work-arrow{transform:translate(3px,-3px)}
.skill-header{transition:color .3s}.skill-group:hover .skill-header-title,.skill-group.open .skill-header-title{color:#e7422e}
.skill-body-inner li{line-height:1.8}
/* Re-entering from the following screen must restore the visible contact layer. */
#contact.bx-is-locked .contact-pin{visibility:visible!important;opacity:1!important}
#contact.bx-is-locked #bx-board{opacity:1!important;transform:none!important}
#contact.bx-is-locked #contact-bg{display:block!important}
@media(max-width:760px){
 .all-work-link{margin-top:30px;padding:13px 17px;font-size:13px}.all-work-arrow{margin-left:16px}
 .skills-left{padding-left:6vw;padding-right:6vw}.skill-header-title{font-size:22px}
}
@media(prefers-reduced-motion:reduce){[data-reveal-pending]{opacity:1}.metric-strip{transform:none!important}.all-work-link,.all-work-arrow{transition:none}}

/* A continuous sticky boundary replaces the competing fixed-overlay exit. */
#contact.bx-contact.bx-native-scroll{height:calc(100svh + 3400px);min-height:calc(100svh + 3400px);overflow:clip;pointer-events:auto!important}
#contact.bx-native-scroll .contact-pin{position:sticky!important;top:0;height:100svh;min-height:0;background:#f0f0f0;transform:none!important;opacity:1!important;pointer-events:auto!important;overflow:hidden}
#contact.bx-native-scroll .bx-board{opacity:1!important;transform:none!important}
#footer-transition{height:100svh}
#projects .projects-inner{position:relative;padding-bottom:100px}
#projects .all-work-link{position:absolute;right:0;bottom:22px;margin:0;z-index:5}
.cg-segment{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity,transform}
#cg-phrase{width:min(650px,80vw);height:160px;display:block;text-align:center;max-width:650px;background:none;padding:0}
@media(max-width:760px){#projects .projects-inner{padding-bottom:85px}#projects .all-work-link{right:0;bottom:15px}}

/* The work action belongs to the list, above the decorative path. */
#projects .projects-list{z-index:20}
#projects .projects-inner{padding-bottom:0}
#projects .projects-list .all-work-link{position:relative;inset:auto;align-self:flex-end;flex-shrink:0;margin:26px 0 0;padding:14px 20px;z-index:100;background:#0a0a0a;isolation:isolate;white-space:nowrap}
#projects .projects-list .all-work-link:hover{background:#e7422e}
#work-flying-text,#flying-title{display:none!important}
@media(max-width:760px){#projects .projects-list .all-work-link{margin-top:22px;padding:12px 16px}}

/* Keep both screens in document flow: no fixed-layer visibility hand-off on reverse. */
#footer-transition{display:none!important;height:0!important}
#footer.footer{position:relative!important;inset:auto!important;height:100svh;min-height:100svh;visibility:visible!important;opacity:1!important;transform:none!important;isolation:isolate;backface-visibility:hidden}
#footer .footer-content{height:100%;min-height:100svh}
#contact-bg{display:none!important}
#contact.bx-native-scroll .contact-pin{backface-visibility:hidden}

/* Kaitonote reel composition: frontal depth travel, monochrome cards and difference typography. */
#circle-gallery.kaito-gallery{height:600svh;overflow:hidden;background:#0a0a0a;isolation:isolate}
.kaito-gallery #circle-gallery-pin{height:100svh;display:block;perspective:none;overflow:hidden;background:#0a0a0a}
.kaito-grid{position:absolute;inset:0 4vw;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff23 0,#ffffff23 1px,transparent 1px,transparent 25%)}
#kaito-gallery-canvas,.kaito-fallback{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.kaito-fallback .kaito-plane{position:absolute;left:50%;top:50%;max-width:none;object-fit:fill;opacity:0;filter:grayscale(1);transition:filter .5s ease;will-change:transform,opacity;cursor:pointer}
.kaito-fallback .kaito-plane:hover{filter:grayscale(0)}
#kaito-gallery-canvas{pointer-events:auto}.kaito-webgl-ready .kaito-fallback{visibility:hidden}
.kaito-gallery:not(.kaito-webgl-ready) #kaito-gallery-canvas{pointer-events:none}
#circle-gallery #cg-phrase.kaito-copy{position:absolute;inset:0;margin:auto;width:94%;max-width:none;height:fit-content;padding:0;text-align:center;z-index:4;font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-size:clamp(28px,4.7vw,96px);font-weight:300;line-height:1.5;letter-spacing:-.035em;mix-blend-mode:difference;color:#fff;pointer-events:none;isolation:isolate;will-change:opacity}
.kaito-copy p{margin:0}.kaito-copy p>span{display:inline-block;overflow:hidden;vertical-align:bottom}.kaito-copy p>span+span{margin-left:.18em}.kaito-copy p>span>span{display:inline-block;backface-visibility:hidden;will-change:transform,opacity}
.kaito-copy .kaito-serif{font-family:Georgia,'Songti SC',SimSun,serif;font-style:italic;font-weight:400}
.kaito-final{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;z-index:1;transform-origin:center;will-change:transform;text-decoration:none;color:#fff}
.kaito-final>img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) grayscale(1)}
.kaito-final>span{position:absolute;inset:0;margin:auto;height:fit-content;text-align:center;font-size:clamp(25px,4vw,68px);line-height:1.2;overflow:hidden}
.kaito-final small{display:block;margin-top:20px;font-size:11px;letter-spacing:.2em}
.kaito-css-fallback #kaito-gallery-canvas{display:none}
@media(max-width:767px){#circle-gallery.kaito-gallery{display:block!important;height:400svh}#circle-gallery #cg-phrase.kaito-copy{display:block!important;font-size:clamp(22px,5.1vw,38px);line-height:1.8;width:96%}.kaito-grid{inset:0 5vw}.kaito-final small{font-size:8px}}
@media(prefers-reduced-motion:reduce){#circle-gallery.kaito-reduced{height:100svh}.kaito-reduced .kaito-final,.kaito-reduced #kaito-gallery-canvas{display:none}.kaito-reduced .kaito-plane{transition:none}}
/* Category index: category routes on the left, independent detail links on the right. */
#projects .projects-inner{display:grid;grid-template-columns:46% 54%;align-items:start;min-height:100svh;padding:0 5vw;gap:0}
#projects .projects-list{position:relative;top:auto;width:100%;height:auto;min-height:85svh;padding:8svh 5vw 8svh 0;justify-content:center}
#projects .proj-item{display:block;text-decoration:none;font-size:clamp(20px,2.7vw,44px);line-height:1.4;padding:.65em 0;white-space:nowrap}
#projects .proj-item:hover,#projects .proj-item:focus-visible{color:#f0f0f0}
#projects #proj-preview{position:sticky;top:calc(50svh - 15vw);right:auto;width:100%;height:auto;min-height:0;margin-top:10svh;z-index:12;perspective:800px}
#projects #proj-card{width:100%;max-width:680px}
#projects #proj-cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;cursor:pointer}
#projects .proj-meta{gap:15px;min-height:20px}#projects #proj-date{max-width:75%;line-height:1.5}
#circle-gallery .kaito-plane{object-fit:cover;aspect-ratio:16/9}
#circle-gallery .kaito-final{width:min(100vw,177.7778svh);height:auto;aspect-ratio:16/9;inset:0;margin:auto}
#circle-gallery .kaito-final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#circle-gallery #cg-phrase .kaito-copy-en{font-size:clamp(14px,1.7vw,29px);line-height:1.6;letter-spacing:-.01em;margin-top:24px}
#circle-gallery #cg-phrase .kaito-copy-en>span+span{margin-left:.3em}
@media(max-width:767px){#projects{padding:10svh 0}#projects .projects-inner{grid-template-columns:1fr;min-height:0;padding:0 6vw}#projects .projects-list{min-height:0;padding:0 0 35px}#projects .proj-item{font-size:clamp(21px,5.2vw,32px);padding:.55em 0}#projects #proj-preview{display:flex!important;position:relative;top:auto;margin:0 0 50px;opacity:1;pointer-events:auto}#projects .proj-label{font-size:10px}#circle-gallery #cg-phrase .kaito-copy-en{font-size:13px;letter-spacing:0;line-height:1.7;margin-top:18px}#circle-gallery .kaito-copy-en>span{display:block}#circle-gallery #cg-phrase .kaito-copy-en>span+span{margin-left:0}}
/* Final reel image expands edge to edge; moving covers keep their 16:9 planes. */
#circle-gallery .kaito-final{width:100%;height:100%;aspect-ratio:auto;inset:0;margin:0}
#circle-gallery .kaito-final>img{width:100%;height:100%;object-fit:cover}
/* Profile results replace capability bullets in the left editorial column. */
#about .profile-metrics.profile-metrics-list{display:grid;grid-template-columns:1fr;gap:0;margin:30px 0 0;padding:0;border:0;width:100%}
#about .profile-metrics-list>div,#about .profile-metrics-list>div:first-child,#about .profile-metrics-list>div:last-child{display:grid;grid-template-columns:135px minmax(0,1fr);align-items:center;justify-content:initial;gap:20px;padding:19px 0;border:0;border-top:1px solid #303030}
#about .profile-metrics-list dt{gap:4px}#about .profile-metrics-list strong{font-size:clamp(38px,3.8vw,54px);letter-spacing:-.04em}#about .profile-metrics-list dt>span{font-size:19px}
#about .profile-metrics-list dd{margin:0;font-size:14px;line-height:1.5;white-space:normal}#about .profile-metrics-list dd>small{font-size:9px;line-height:1.5;letter-spacing:.06em;margin-top:7px;color:#888}
#about .profile-art-bottom{bottom:32px;left:30px;right:30px}#about .profile-art-bottom>span{font-family:var(--font-display);font-size:clamp(24px,2.6vw,40px);line-height:1.35;letter-spacing:-.03em;color:#f0f0f0;text-shadow:0 2px 20px #0008}#about .profile-art-bottom small{font-family:var(--font-body);font-size:11px;line-height:1.5;letter-spacing:.14em;margin-top:14px;color:#b5b5b5}
.recognition-pointer{position:fixed;top:0;left:0;width:min(233.333px,30.667vh,32vw);height:min(233.333px,30.667vh,32vw);z-index:59999;pointer-events:none;opacity:0;visibility:hidden;will-change:transform;transition:opacity .08s linear}
.recognition-pointer.is-visible{opacity:1;visibility:visible}.recognition-pointer-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none}.recognition-pointer-image.is-current{opacity:1;visibility:visible}
@media(max-width:760px){#about .profile-metrics-list>div,#about .profile-metrics-list>div:first-child,#about .profile-metrics-list>div:last-child{grid-template-columns:130px minmax(0,1fr);gap:16px;padding:18px 0}#about .profile-metrics-list strong{font-size:42px}#about .profile-metrics-list dd{font-size:13px}#about .profile-art-bottom{bottom:24px;left:22px;right:22px}#about .profile-art-bottom>span{font-size:clamp(24px,6vw,34px)}}
@media(prefers-reduced-motion:reduce){.recognition-pointer{transition:none}}
/* Keep the copy/mask below the entire orbit stacking context at every breakpoint. */
#contact .bx-board{isolation:isolate}
#contact .bx-board .bx-copy{z-index:0;pointer-events:none;contain:layout paint}
#contact .bx-board .bx-orbit{z-index:2;pointer-events:none}
#contact .bx-board .bx-copy-mask{z-index:1;pointer-events:none}
#contact .bx-board .bx-copy-index{z-index:0;pointer-events:none}
#about .profile-art-bottom{justify-content:flex-end;text-align:right;pointer-events:none}
#about .profile-art-bottom>span{margin-left:auto;text-align:right}
#reveal-phrase{font-size:clamp(4.4rem,8.8vw,8rem);width:94vw;max-width:none;margin:0;line-height:1.15;letter-spacing:-.04em;transform-origin:center;will-change:transform}
#reveal-phrase .reveal-line{display:block;white-space:nowrap}
@media(max-width:760px){#reveal-phrase{font-size:calc((100vw - 48px)/7);line-height:1.3;width:calc(100vw - 32px)}}
/* Align profile artwork copy and the remaining CTA with the section's right edge. */
#about .profile-art-bottom{left:0;right:0;bottom:32px;justify-content:flex-end;text-align:right}
#about .profile-art-bottom>span{display:block;text-align:right;margin-left:auto}
#about .profile-footer>div{margin-left:auto;justify-content:flex-end;text-align:right}
@media(max-width:760px){#about .profile-art-bottom{left:0;right:0;bottom:24px}#about .profile-footer>div{width:auto;align-self:flex-end;margin-left:auto;justify-content:flex-end}}
/* Resident image layers crossfade without delayed source mutations or scroll selection. */
#projects .project-preview-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
#projects .project-preview-frame .project-preview-layer{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;will-change:opacity;pointer-events:none}
#projects .project-preview-frame #proj-cover{pointer-events:auto;z-index:0}
#circle-gallery #cg-phrase.kaito-copy{mix-blend-mode:normal}
#circle-gallery #cg-phrase .kaito-data-accent{font-family:var(--font-body);font-style:normal;font-weight:400;color:#e53726}

#circle-gallery .kaito-final>img.gallery-watch-cover{object-fit:cover;object-position:center;filter:brightness(.78)}
#circle-gallery .kaito-final>.gallery-case-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:none;pointer-events:none}
#circle-gallery .kaito-final:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 22%,#0003 50%,transparent 78%);z-index:1}
#circle-gallery .kaito-final>span{z-index:2;text-shadow:0 2px 18px #0009}
/* Shared right edge for category text, divider rules, and the all-work link. */
#projects #projects-list{align-items:flex-end;text-align:right}
#projects #projects-list>.proj-item{width:100%;box-sizing:border-box;text-align:right;margin-left:auto;margin-right:0}
#projects #projects-list>.all-work-link{align-self:flex-end;text-align:right;padding-left:0;padding-right:0;margin-left:auto;margin-right:0}
#projects #projects-list>.all-work-link{margin-right:16px;padding-left:14px;padding-right:14px}
@media(max-width:767px){#projects #projects-list>.all-work-link{margin-right:12px}}
/* Preserve source colors in actual work previews; each preview has one opaque layer. */
#projects #proj-preview,#projects #proj-card,#projects .project-preview-frame{isolation:isolate;mix-blend-mode:normal;filter:none}
#projects .project-preview-layer{mix-blend-mode:normal!important;filter:none!important}
#circle-gallery .gallery-case-video{mix-blend-mode:normal!important;filter:none!important}
/* Prioritize the role and align the two hero corners to the same content grid. */
#hero-tagline{right:3rem;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.hero-position{max-width:500px}.hero-person{display:block;font-size:11px;line-height:1.4;letter-spacing:.08em;color:#bbb;margin-bottom:13px}.hero-role{display:block;font-family:var(--font-body,Arial,sans-serif);font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.55;letter-spacing:-.025em}.hero-role>span{font-size:.8em;font-weight:500}.hero-position-note{font-size:12px;line-height:1.8;color:#b5b5b5;margin:15px 0 3px}.hero-position small{display:block;color:#888;font-size:9px;letter-spacing:.14em}.hero-signature{font-size:11px;line-height:1.4;letter-spacing:.04em;white-space:nowrap;text-align:right}
#projects #projects-list>.all-work-link{margin-right:0}
#skills{--skills-copy-size:clamp(1rem,1.5vw,1.2rem)}#skills .skills-subtitle,#skills .skills-text{font-size:var(--skills-copy-size)}#skills .skills-text{font-family:var(--font-body,Arial,sans-serif);font-weight:400;line-height:1.9;letter-spacing:0}#skills .skills-data-line{color:#e53726}
@media(max-width:700px){#hero-tagline{left:1.3rem;right:1.3rem;top:1.7rem;display:block}.hero-person{font-size:10px;margin-bottom:18px}.hero-role{font-size:22px}.hero-role>span{font-size:16px}.hero-position-note{font-size:11px;margin-top:13px}.hero-signature{position:absolute;right:0;top:0;font-size:9px;letter-spacing:0}}
/* About and expertise headlines share the same responsive type scale. */
#profile-heading,#skills .skills-text{font-size:clamp(31px,3.8vw,64px)}#skills .skills-text{font-weight:500;line-height:1.42;letter-spacing:-.045em}
@media(max-width:760px){#profile-heading,#skills .skills-text{font-size:clamp(29px,7.5vw,48px)}}
/* Preserve complete CJK glyphs throughout headline entry, scale, and sentence exit. */
#reveal-phrase{box-sizing:border-box;width:calc(100vw - 64px);max-width:calc(100vw - 64px);padding:.18em .04em;font-family:var(--font-body);font-size:clamp(32px,8.8vw,128px);line-height:1.35;overflow:visible;white-space:nowrap;text-align:center;flex-shrink:0}
#reveal-phrase .reveal-line{display:block;overflow:visible;line-height:inherit}#reveal-phrase .rp-char{line-height:inherit;vertical-align:baseline}
.profile-description .profile-experience{display:inline-block;font-weight:500;color:#eee;margin-bottom:12px}
@media(max-width:760px){#reveal-phrase{width:calc(100vw - 40px);max-width:calc(100vw - 40px);font-size:calc((100vw - 64px)/6);line-height:1.35}}

/* Decode gallery covers before they enter the scroll sequence; the CSS projection stays visible meanwhile. */
#circle-gallery .kaito-plane{content-visibility:auto}

/* Native media use the original perspective projection, keeping GIFs and videos animated. */
#circle-gallery.kaito-native-media .kaito-fallback{pointer-events:none}
#circle-gallery.kaito-native-media .kaito-plane{display:block;overflow:hidden;pointer-events:auto;content-visibility:visible;text-decoration:none}
#circle-gallery.kaito-native-media .gallery-native-media{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#circle-gallery.kaito-native-media .kaito-plane:focus-visible{filter:grayscale(0);outline:2px solid #d93625;outline-offset:4px}
#circle-gallery.kaito-native-media .kaito-final>.gallery-native-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s ease}
#circle-gallery.kaito-native-media .kaito-final:hover>.gallery-native-media,#circle-gallery.kaito-native-media .kaito-final:focus-visible>.gallery-native-media{filter:grayscale(0)}