:root{color-scheme:dark;--bg:#080f12;--ink:#eef3f3;--muted:#98a7ad;--accent:#8be1e4;font-family:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}.skip{position:fixed;top:-80px;left:24px;z-index:10;padding:14px;background:var(--bg)}.skip:focus{top:12px}
header{height:100px;padding:0 3.5vw;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;width:100%;z-index:4}.identity{font-size:25px;letter-spacing:-1px;font-weight:600}.identity span{font-weight:400;color:var(--muted)}#motion{border:0;background:none;color:var(--muted);padding:14px 0 14px 20px;font-size:12px;cursor:pointer}#motion:hover{color:var(--ink)}
.experience{height:180vh;min-height:1250px}.scene{height:100vh;min-height:700px;position:sticky;top:0;overflow:hidden;isolation:isolate}.intro,.chapter{position:absolute;z-index:2;left:3.5vw;top:15.5%;width:42%;max-width:650px;will-change:transform,opacity}.eyebrow{font-size:12px;line-height:1.7;letter-spacing:3px;color:var(--accent);margin:0 0 20px}h1{font-size:clamp(62px,6.2vw,100px);line-height:1.15;letter-spacing:-3px;font-weight:500;margin:0}.lead{font-size:clamp(16px,1.65vw,24px);line-height:1.7;color:var(--muted);margin:20px 0 0}.project-entry{display:grid;grid-template-columns:60px 1fr;gap:20px;margin-top:65px;max-width:520px}.number{font-size:48px;font-weight:200;line-height:1;color:#6f828b}.project-entry>div{border-top:1px solid #526871;padding-top:27px}.technology{font-size:20px;margin:0 0 8px}h2{font-size:clamp(22px,2.2vw,32px);font-weight:550;line-height:1.45;margin:0}.description{color:var(--muted);font-size:16px;line-height:1.8;margin:20px 0}.cta{display:inline-flex;align-items:center;gap:24px;color:var(--accent);font-size:19px;line-height:1.5;padding:8px 0}.cta img{transition:transform .25s}.project-entry:hover .cta img,.cta:hover img{transform:translateX(6px)}
.art{position:absolute;left:43%;top:8%;width:57%;height:76%;z-index:1;will-change:transform}.art picture{display:block;width:100%;height:100%;animation:float 9s ease-in-out infinite}.art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 35px #0008)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.wordmark{position:absolute;left:2.8vw;bottom:-.15em;font-size:clamp(130px,21vw,340px);font-weight:600;letter-spacing:-.035em;line-height:1;color:transparent;-webkit-text-stroke:1px #31525d;z-index:0;user-select:none}.scroll-hint{position:absolute;right:3.5vw;bottom:40px;font-size:11px;letter-spacing:2px;color:#7e969f}.chapter{top:30%;opacity:0;transform:translateY(50px);pointer-events:none}.chapter h2{font-size:clamp(38px,4vw,64px);font-weight:400;line-height:1.3;letter-spacing:-1.5px}.chapter .cta{margin-top:32px}.chapter[data-active]{pointer-events:auto}footer{border-top:1px solid #263940;display:flex;justify-content:space-between;padding:28px 3.5vw;color:var(--muted);font-size:12px;gap:20px}body.motion-paused .art picture{animation-play-state:paused}
@media(min-width:701px) and (max-height:800px){.intro{top:16%}.eyebrow{margin-bottom:12px}h1{font-size:65px}.lead{font-size:17px;margin-top:14px}.project-entry{margin-top:30px}.project-entry>div{padding-top:18px}.description{margin:12px 0;font-size:14px}.technology{font-size:17px}h2{font-size:25px}.scene{min-height:650px}}
@media(max-width:1000px) and (min-width:701px){.intro{width:49%}.art{left:49%;width:51%}.project-entry{grid-template-columns:40px 1fr;gap:16px}.eyebrow{letter-spacing:1.5px;font-size:10px}.number{font-size:38px}h1{font-size:65px}.project-entry h2{font-size:23px}.description{font-size:14px}.chapter{width:48%}}
@media(max-width:700px){header{height:82px;padding:0 24px}.identity{font-size:20px}.experience{height:auto;min-height:0}.scene{position:relative;height:auto;min-height:0;padding:122px 24px 65px;display:flex;flex-direction:column;overflow:hidden}.intro,.chapter{position:relative;left:auto;top:auto;width:100%;max-width:none;transform:none!important;opacity:1!important}.intro{display:contents}.eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 16px}h1{font-size:clamp(54px,11vw,74px);letter-spacing:-2px}.lead{font-size:16px;margin-top:16px}.art{position:relative;left:auto;top:auto;width:100%;height:390px;margin:15px 0 10px;order:1;transform:none!important}.art img{object-fit:contain}.project-entry{order:2;margin-top:15px;grid-template-columns:42px 1fr;gap:16px}.project-entry>div{padding-top:20px}.number{font-size:36px}.technology{font-size:18px}h2{font-size:24px}.description{font-size:14px}.chapter{order:3;margin-top:100px;pointer-events:auto}.chapter h2{font-size:36px}.chapter .lead{font-size:16px}.chapter .cta{margin-top:18px}.wordmark{font-size:145px;bottom:-16px;left:auto;right:14px;opacity:.5}.scroll-hint{display:none}footer{padding:26px 24px;flex-direction:column;gap:8px}.cta{font-size:17px}#motion{font-size:11px}}
.scene{background:var(--bg)}.art{mix-blend-mode:lighten}.cta img{filter:brightness(0) saturate(100%) invert(89%) sepia(18%) saturate(842%) hue-rotate(129deg)}
@media(min-width:701px) and (max-height:800px){.wordmark{font-size:clamp(130px,22vh,220px)}}
@media(prefers-reduced-motion:reduce){.art picture{animation:none}.cta img{transition:none}}
html,body{overscroll-behavior:none;scroll-behavior:auto}
.chapter{left:57%;width:40%}.art-secondary{left:1%;top:12%;width:54%;height:72%;opacity:0;mix-blend-mode:normal;pointer-events:none}
body.at-end .art picture{animation-play-state:paused}
@media(max-width:700px){.art-secondary{left:auto;top:auto;width:100%;height:300px;order:3;opacity:1;margin:65px 0 0}.chapter{left:auto;width:100%;order:4;margin-top:20px}.art:not(.art-secondary){opacity:1!important}}
.scene>footer{position:absolute;bottom:0;left:0;width:100%;opacity:0;z-index:3;background:var(--bg);padding:22px 3.5vw}
@media(max-width:700px){.scene>footer{position:relative;order:5;opacity:1!important;margin-top:70px;padding:24px 0 0}.scene{padding-bottom:24px}}