@font-face{font-family:"Source Han Sans CN";src:url("assets/fonts/SourceHanSansCN-Light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Source Han Sans CN";src:url("assets/fonts/SourceHanSansCN-Regular.woff") format("woff");font-weight:350 500;font-display:swap}
@font-face{font-family:"Source Han Sans CN";src:url("assets/fonts/SourceHanSansCN-Bold.woff") format("woff");font-weight:600 900;font-display:swap}
@font-face{font-family:Urbanist;src:url("assets/fonts/Urbanist.ttf") format("truetype");font-weight:100 900;font-display:swap}
:root{--scale:1;--cover-scale:1;--orange:#f15a35;--ink:#4b4d4e;--page-x:3.35vw;--header-height:calc(55px * var(--scale));color-scheme:light}
*{box-sizing:border-box}
html{scroll-padding-top:var(--header-height)}
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:#fff;color:var(--ink);font-family:"Source Han Sans CN","PingFang SC",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
::selection{background:var(--orange);color:#fff}
.skip-link{position:fixed;top:-100px;left:24px;z-index:300;padding:12px 18px;background:var(--orange);color:#fff}
.skip-link:focus{top:12px}
.site-header{position:fixed;z-index:100;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--header-height);padding:0 var(--page-x);background:rgba(255,255,255,.72);color:#1a1a1a;border-bottom:1px solid rgba(5,5,5,.07);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);transition:background-color .3s,color .3s,border-color .3s}
.site-header[data-theme=dark]{background:rgba(13,13,13,.63);color:#fff;border-bottom-color:rgba(255,255,255,.07)}
.back-link{justify-self:start;display:flex;align-items:center;gap:calc(10px * var(--scale));font-size:calc(13px * var(--scale))}
.back-link span:last-child{position:relative}
.back-link span:last-child:after{content:"";position:absolute;bottom:-5px;left:0;right:100%;height:1px;background:currentColor;transition:right .25s}
.back-link:hover span:last-child:after,.back-link:focus-visible span:last-child:after{right:0}
.project-name{font-size:calc(13px * var(--scale));font-weight:400}
.language-control{justify-self:end;display:flex;gap:calc(7px * var(--scale));font-size:calc(12px * var(--scale))}
.language-control button{padding:0;border:0;background:transparent;opacity:.48;position:relative}
.language-control button.active{opacity:1;font-weight:700}
.language-control button:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:currentColor;transition:right .25s}
.language-control button:hover:after,.language-control button:focus-visible:after{right:0}
.reading-progress{position:absolute;left:0;bottom:-1px;width:100%;height:1.5px;pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(.0572917);transform-origin:left;will-change:transform}
.chapter-nav{position:fixed;z-index:50;left:calc(48px * var(--scale));top:50%;transform:translateY(-50%);display:grid;gap:calc(14px * var(--scale));opacity:0;visibility:hidden;transition:opacity .08s,visibility 0s linear .08s}
.chapter-nav.is-visible{opacity:1;visibility:visible;transition:opacity .08s}
.chapter-nav a{display:flex;align-items:center;gap:calc(9px * var(--scale));font-size:calc(11px * var(--scale));line-height:calc(13px * var(--scale));white-space:nowrap;color:#8e9090;transition:color .2s,transform .2s}
.chapter-dot{width:calc(8px * var(--scale));height:calc(8px * var(--scale));flex:0 0 auto;border:1px solid currentColor;border-radius:50%;transition:background-color .2s}
.chapter-nav a[aria-current=location]{color:#1a1a1a;font-weight:500}
.chapter-nav a[data-chapter-link="ux"][aria-current="location"]{color:#fff}
.chapter-nav a[aria-current=location] .chapter-dot{background:currentColor}
.chapter-nav a:hover,.chapter-nav a:focus-visible{color:var(--orange);transform:translateX(3px)}
.panel{position:relative;width:100%;height:calc(var(--panel-h) * var(--scale));margin-bottom:calc(50px * var(--scale));overflow:hidden;background:#fff;scroll-margin-top:0}
.panel.scene-two{margin-bottom:calc(128px * var(--scale))}
.panel.closing-mark{margin-bottom:0}
.panel.ux,.panel.closing-visual{margin-bottom:0!important}
.panel:focus{outline:none}
.artboard{position:relative;width:1440px;height:var(--panel-h);overflow:hidden;isolation:isolate;transform:scale(var(--scale));transform-origin:top left}
.layer{position:absolute;left:calc(var(--x,0) * 1px);top:calc(var(--y,0) * 1px);width:calc(var(--w,auto) * 1px);height:calc(var(--h,auto) * 1px);margin:0}
.layer[src]{object-fit:fill}
.cover{background:#171716}
.cover .artboard{transform:scale(var(--cover-scale))}
.cover-art{left:0;top:0;width:1440px;height:785px;object-fit:cover}
.cover-title{color:#f7f7f7;font-family:Urbanist,"SF Pro Display",sans-serif;white-space:nowrap}
.cover-title h1{margin:0;font-size:80px;font-weight:800;line-height:1;letter-spacing:-.04em}
.cover-title p{margin:12px 0 0;font-size:31px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.cover-title h1,.cover-title p{background:linear-gradient(83deg,rgba(255,255,255,.96),rgba(212,239,235,.35));background-clip:text;-webkit-background-clip:text;color:transparent}
.cover-meta{display:flex;gap:56px;color:#efefef;font-size:13px;white-space:nowrap}
.cover-arrow{position:absolute;left:1317px;top:680px;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.6);border-radius:50%;color:#fff;font-size:26px;transition:background-color .25s,border-color .25s,color .25s}
.cover-arrow span{transition:transform .25s}
.cover-arrow.is-scroll-active,.cover-arrow:hover,.cover-arrow:focus-visible{background:var(--orange);border-color:var(--orange);color:#050505}
.cover-arrow.is-scroll-active span,.cover-arrow:hover span,.cover-arrow:focus-visible span{transform:rotate(45deg)}
.demo-slot{overflow:hidden}
.film-media{display:block;max-width:none;object-fit:cover;overflow:hidden;border:0;border-radius:16px;background:#050505;box-shadow:0 1px 3px rgba(5,5,5,.12)}
.film-media:focus-visible{outline:2px solid var(--orange);outline-offset:5px}
.demo-slot img,.demo-slot video{display:block;width:100%;height:100%;object-fit:cover}
.film-acronym{display:flex;gap:43px;color:#313638;font-family:Urbanist,sans-serif;font-size:18px;white-space:nowrap}
.film-acronym strong{font-weight:700}
.film-acronym span::first-letter,.film-acronym::first-letter{font-weight:700}
.copy h2,.section-label{margin:0;color:var(--ink);font-size:24px;font-weight:700;line-height:1.5}
.copy p{margin:16px 0 0;font-size:16px;line-height:1.5;color:#676b6c}
.overview-lead{font-size:13px;line-height:1.55;color:#454849}
.overview-visual{border-radius:16px}
.overview-lead strong{font-weight:700}
.overview-list{list-style:none;padding:0;margin:0}
.overview-list li{display:flex;align-items:center;gap:30px;height:40px;border-top:1px solid #c6c9ca;font-size:13px;white-space:nowrap}
.overview-list li:last-child{border-bottom:1px solid #c6c9ca}
.overview-list b{font-weight:500}
.process .wide p{margin-top:9px}
.pain-left h3,.pain-shift h3{margin:0;font-size:48px;line-height:1.35;font-weight:700;letter-spacing:.02em}
.pain-left p,.pain-shift p{font-size:16px;line-height:1.5;margin:18px 0 0;color:#6a6d6e}
.pain-left strong{font-weight:700;color:#4b4d4e}
.pain-right{display:grid;gap:20px}
.pain-right article{position:relative;height:176px;border:1px solid #d2d6d8;border-radius:17px;padding:31px 35px 25px 90px}
.pain-right .number{position:absolute;left:14px;top:10px}
.number{color:var(--orange);font-size:20px;font-weight:400}
.pain-right h4{margin:0;font-size:16px;font-weight:700}
.pain-right p{margin:10px 0 0;font-size:16px;line-height:1.5;color:#777b7c}
.mission{height:176px;border:1px solid #a2d996;border-radius:15px;padding:28px 62px}
.mission h4{margin:0;font:700 36px Urbanist,sans-serif;color:#a6dc9c}
.mission p{font-size:16px;line-height:1.5;margin:14px 0 0}
.mission strong{font-weight:700}
.mechanism-text h3{margin:0;font-size:16px;font-weight:700}
.mechanism-text p{margin:9px 0 0;font-size:16px;line-height:1.5}
.m2,.m4{text-align:right}
.map-notes article{min-height:176px;border-top:1px solid #c9cdce;padding-top:15px}
.map-notes h3{margin:0;font-size:14px;font-weight:700}
.map-notes p{margin:13px 0 0;font-size:13px;line-height:1.5}
.scene-title{font-size:32px;line-height:1.2;font-weight:700;white-space:nowrap}
.scene-title span{color:#FF5B2E;margin-right:8px;font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-size:32px;font-weight:700}
.scene-subhead{font-size:22px;font-weight:500;line-height:1.2}
.demo-slot{border-radius:16px;background:#000}
.scene-one .demo-slot{aspect-ratio:652/483}
.scene-two .demo-slot{aspect-ratio:1055/546}
.scene-three .demo-slot,.scene-four .demo-slot{aspect-ratio:1055/543}
.demo-slot img{object-fit:fill}
.scene-one .demo-slot img{position:absolute;left:253px;top:47px;width:190px;height:389px;object-fit:contain}
.demo-slot video{position:absolute;inset:0;object-fit:contain;border-radius:16px;background:transparent;cursor:pointer}
.demo-slot video:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}
.home-copy h2{margin:0;font-family:Urbanist,sans-serif;font-size:22px;font-weight:700}
.home-copy h3{margin:12px 0 0;font-size:48px;line-height:1.43;font-weight:300}
.home-copy p{margin:21px 0 0;font-size:16px;line-height:1.5}
.feature-copy .number{display:block;font-size:16px;font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif}
.feature-copy h3{font-size:27px;line-height:1.45;margin:18px 0 0;font-weight:700}
.feature-copy p{font-size:16px;line-height:1.5;margin:15px 0 0;color:#606464}
.layer.feature-image{border-radius:20px;object-fit:cover;object-position:center var(--feature-position)}
.ux{background:#050505;color:#fff}
.ux .artboard{background:#050505}
.ux .section-label{color:#fff}
.ux .ux-sf-number{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif}
.ux-art,.ux-trio-art{display:none}
.ux-row{display:grid;grid-template-columns:420px 1fr;gap:0;overflow:hidden}
.ux-copy{padding-top:112px;width:373px}
.ux-copy h3,.ux-trio h3{font-size:27px;line-height:1.45;margin:15px 0 0;font-weight:700}
.ux-copy p,.ux-trio p{font-size:16px;line-height:1.5;margin:15px 0 0;color:#d6d6d6}
.ux-trio{overflow:hidden}
.ux-trio-copy{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:55px;background:#050505}
.ux-trio-copy article{min-width:0}
.ux-trio-copy h3{font-size:24px}
.ux-trio-copy p{font-size:14px}
.project-pagination{position:relative;width:100%;height:calc(412px * var(--scale));border-top:1px solid #d2d2d2;background:#fff}
.project-switch{position:absolute;top:calc(108px * var(--scale));display:flex;align-items:center;gap:calc(24px * var(--scale));height:calc(180px * var(--scale))}
.project-switch.previous{left:calc(94px * var(--scale))}
.project-switch.next{right:calc(95px * var(--scale))}
.round-arrow{display:grid;place-items:center;width:calc(58px * var(--scale));height:calc(58px * var(--scale));border:1px solid #9e9e9e;border-radius:50%;font-size:calc(24px * var(--scale));color:#9e9e9e;transition:color .2s,border-color .2s}
.project-thumb{position:relative;display:block;width:calc(335px * var(--scale));height:calc(180px * var(--scale));overflow:hidden;border-radius:calc(8px * var(--scale));isolation:isolate}
.thumb-image{width:100%;height:100%;object-fit:cover;transition:filter .45s,transform .6s}
.thumb-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4px * var(--scale));background:rgba(5,5,5,.1);color:rgba(255,255,255,.8);opacity:0;transform:translateY(6px);transition:opacity .36s,transform .48s}
.thumb-direction{font-size:calc(16px * var(--scale));font-weight:300;line-height:1.2}
.thumb-project-name{font-family:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,sans-serif;font-size:calc(13px * var(--scale));font-weight:700;line-height:1.2}
.project-switch:hover .thumb-image,.project-switch:focus-visible .thumb-image{filter:blur(10px);transform:scale(1.04)}
.project-switch:hover .thumb-label,.project-switch:focus-visible .thumb-label{opacity:1;transform:translateY(0)}
.project-switch:hover .round-arrow,.project-switch:focus-visible .round-arrow{border-color:#050505;color:#050505}
.project-footer{position:absolute;left:var(--page-x);right:var(--page-x);bottom:calc(32px * var(--scale));display:flex;justify-content:space-between;font-size:calc(10px * var(--scale));letter-spacing:.08em;color:#9e9e9e}
.project-footer a:hover,.project-footer a:focus-visible{color:var(--orange)}
.page-exit{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);transition:opacity .35s}
body.is-leaving .page-exit{opacity:1}
@media(max-width:700px){
  :root{--header-height:48px}
  .site-header{padding:0 20px}
  .back-link,.project-name{font-size:12px}
  .language-control{gap:7px;font-size:11px}
  .chapter-nav{left:0;right:0;top:auto;bottom:0;transform:none;display:flex;gap:18px;width:100%;overflow-x:auto;padding:11px 18px max(11px,env(safe-area-inset-bottom));background:rgba(255,255,255,.91);backdrop-filter:blur(18px);scrollbar-width:none}
  .chapter-nav a{gap:6px;font-size:11px;line-height:16px;flex-shrink:0;padding:5px 0}
  .chapter-dot{width:6px;height:6px}
  main{padding-top:48px}
  .cover{height:calc(785px * var(--scale))!important}
  .cover .artboard{transform:scale(var(--scale))}
  .panel{margin-bottom:24px!important}
  .project-pagination{height:190px}
  .project-switch{top:35px;gap:6px}
  .project-switch.previous{left:12px}
  .project-switch.next{right:12px}
  .round-arrow{width:22px;height:22px;font-size:12px}
  .project-thumb{width:calc((100vw - 72px)/2);height:91px;border-radius:4px}
  .thumb-label{opacity:1;transform:none;background:rgba(0,0,0,.2)}
  .thumb-direction,.thumb-project-name{font-size:10px}
  .project-footer{left:20px;right:20px;bottom:56px;font-size:9px}
}
@media(hover:none){.thumb-label{opacity:1;transform:none;background:rgba(5,5,5,.2)}}
@media(max-width:700px){
  .panel,.panel.scene-two,.panel.closing-mark{height:auto!important;min-height:0;margin:0!important;overflow:visible}
  .panel+.panel{border-top:1px solid #f0f0f0}
  .artboard{width:100%;height:auto!important;min-height:0;padding:55px 20px 65px;display:flex;flex-direction:column;gap:24px;overflow:visible;transform:none!important}
  .layer{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;max-width:100%;margin:0!important}
  img.layer{height:auto!important;object-fit:contain!important}
  .cover{height:auto!important}
  .cover .artboard{padding:48px 0 35px;gap:0}
  .cover-art{width:100%!important;height:auto!important}
  .cover-title{padding:20px 22px 0;white-space:normal}
  .cover-title h1{font-size:48px}
  .cover-title p{font-size:18px;margin-top:6px}
  .cover-meta{padding:26px 22px 0;display:block;font-size:10px;line-height:1.8}
  .cover-meta span{display:block}
  .cover-arrow{position:relative;left:auto;top:auto;align-self:flex-end;margin:16px 22px 0;width:46px;height:46px;font-size:22px}
  .film-media{aspect-ratio:990/554}
  .film-acronym{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:13px;white-space:normal}
  .copy h2,.section-label{font-size:20px;line-height:1.35}
  .copy p,.overview-lead,.mechanism-text p{font-size:14px;line-height:1.7}
  .overview-lead{width:100%;max-width:none}
  .overview-list li{font-size:12px}
  .pain-left h3,.pain-shift h3{font-size:32px}
  .pain-left p,.pain-shift p,.pain-right p,.mission p{font-size:14px;line-height:1.6}
  .pain-right{gap:12px}
  .pain-right article{height:auto;min-height:142px;padding:25px 20px 22px 48px}
  .pain-right .number{left:14px;top:18px;font-size:15px}
  .pain-right h4{font-size:14px}
  .pain-line{display:none}
  .mission{height:auto;padding:22px}
  .mission h4{font-size:26px}
  .mechanism-text h3{font-size:15px}
  .m2,.m4{text-align:left}
  .map-notes article{min-height:0;padding:12px 0}
  .scene-title{white-space:normal}
  .scene-subhead{font-size:17px}
  .demo-slot{border-radius:16px}
  .scene-one .demo-slot img{left:50%;top:50%;width:29%;height:82%;transform:translate(-50%,-50%)}
  .home-copy h2{font-size:16px}
  .home-copy h3{font-size:29px;line-height:1.4}
  .home-copy p,.feature-copy p{font-size:14px;line-height:1.65}
  .feature-copy h3{font-size:22px;margin-top:8px}
  .layer.feature-image{aspect-ratio:516/370;height:auto!important;border-radius:12px;object-fit:cover!important}
  .ux .artboard{gap:50px}
  .ux-visual{display:none}
  .ux-row{display:flex;flex-direction:column;gap:12px;overflow:hidden}
  .ux-copy{width:100%;padding:0}
  .ux-copy h3,.ux-trio h3{font-size:21px}
  .ux-copy p,.ux-trio p{font-size:14px;line-height:1.65}
  .ux-art{position:relative;display:block;width:100%;height:240px;overflow:hidden}
  .ux-art img{position:absolute;left:0;width:170vw;height:auto;max-width:none;transform:translateX(-40%)}
  .ux-first .ux-art img{top:0}
  .ux-second .ux-art img{top:-86.4vw}
  .ux-trio{overflow:hidden}
  .ux-trio-art{position:relative;display:block;width:100%;aspect-ratio:1055/260;overflow:hidden}
  .ux-trio-art img{position:absolute;left:0;bottom:0;width:100%;height:auto}
  .ux-trio-copy{position:relative;display:grid;grid-template-columns:1fr;gap:30px;background:#050505}
  .closing-visual .artboard{display:block;padding:0}
  .closing-visual .layer{width:100%!important;height:auto!important;object-fit:contain!important}
  .closing-mark .artboard{padding:0;display:block;position:relative;height:300px!important;overflow:hidden}
  .closing-mark .layer:first-child{height:300px!important;object-fit:cover!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.page-exit{display:none}}

/* Shared author identity in the project-detail navigation. */
.profile-link{justify-self:end;display:inline-flex;align-items:center;gap:0;font-size:calc(12px * var(--scale));letter-spacing:.08em;line-height:1;white-space:nowrap;transition:transform .25s ease}
.profile-link::after{content:"→";width:0;margin-left:0;overflow:hidden;opacity:0;transform:translateX(-5px);transition:width .25s ease,margin-left .25s ease,opacity .2s ease,transform .25s ease}
.profile-link:hover,.profile-link:focus-visible{transform:translateX(-4px)}
.profile-link:hover::after,.profile-link:focus-visible::after{width:.9em;margin-left:.42em;opacity:1;transform:translateX(0)}
.profile-link:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.site-header .project-name,.site-header .profile-link{font-family:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400}