@font-face{font-family:Geist;src:url(./Geist-var-Bk3cE561.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#171717;--paper:#f2f1ed;--hot:#ff5a89;--line:rgba(242,241,237,.22);--pad:clamp(18px,2.1vw,34px);--header:58px;--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}html{background:var(--ink);scroll-behavior:auto}body{margin:0;background:var(--ink);color:var(--paper);font-family:Geist,"PingFang SC","Noto Sans SC",sans-serif;font-weight:430;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.skip-link{position:fixed;z-index:100;left:12px;top:12px;transform:translateY(-200%);background:#fff;color:#111;padding:10px 16px;border-radius:999px}.skip-link:focus{transform:none}
.site-header{position:fixed;z-index:50;top:0;left:0;width:100%;padding:var(--pad);display:flex;align-items:center;justify-content:space-between;pointer-events:none;mix-blend-mode:difference;color:#fff}.site-header>*{pointer-events:auto}.brand{font-size:clamp(24px,2.2vw,38px);letter-spacing:.08em;font-weight:650}.header-actions{display:flex;align-items:center;gap:10px}.pill,.round-button{height:var(--header);border:0;display:inline-flex;align-items:center;justify-content:center;gap:18px;text-transform:uppercase;letter-spacing:.03em;font-size:13px;cursor:pointer;transition:transform .45s var(--ease),background .3s,color .3s}.pill:hover,.round-button:hover{transform:scale(.96)}.pill{padding:0 26px;border-radius:999px}.pill-light,.round-button{background:#f7f6f2;color:#111}.pill-dark{background:#24242c;color:#fff}.round-button{width:var(--header);border-radius:50%}.menu-dots{letter-spacing:.15em}.sound-bars{display:flex;gap:3px;align-items:center;height:16px}.sound-bars i{width:2px;height:7px;background:currentColor;display:block;animation:sound 1s ease-in-out infinite alternate}.sound-bars i:nth-child(2){height:15px;animation-delay:.2s}.sound-bars i:nth-child(3){height:10px;animation-delay:.4s}.sound-toggle[aria-pressed="false"] .sound-bars i{animation-play-state:paused;height:2px}@keyframes sound{to{transform:scaleY(.45)}}
.menu-panel{position:fixed;z-index:80;inset:0 0 0 auto;width:min(520px,100%);padding:var(--pad);background:#f5f4ef;color:#111;transform:translateX(105%);transition:transform .65s var(--ease);display:flex;flex-direction:column;justify-content:center}.menu-panel.is-open{transform:none}.menu-close{position:absolute;top:var(--pad);right:var(--pad);border:0;background:transparent;font-size:48px;line-height:1;cursor:pointer}.menu-kicker{position:absolute;top:var(--pad);left:var(--pad);font-size:12px;letter-spacing:.08em}.menu-panel nav{display:flex;flex-direction:column}.menu-panel nav a{padding:18px 0;border-bottom:1px solid #aaa;font-size:clamp(26px,4vw,48px);transition:padding .35s var(--ease)}.menu-panel nav a:hover{padding-left:14px}
.project-scroll{position:relative;height:760vh;background:var(--ink)}.project-stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}.stage-grid{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(90deg,transparent calc(25% - .5px),#fff 25%,transparent calc(25% + .5px)),linear-gradient(transparent calc(50% - .5px),#fff 50%,transparent calc(50% + .5px));pointer-events:none}.project-meta{position:absolute;z-index:4;left:var(--pad);top:50%;width:min(54vw,880px);transform:translateY(-50%);will-change:transform,opacity}.project-index,.label,.scroll-cue,.end-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em}.project-index{margin:0 0 20px}.project-meta h1{font-size:clamp(60px,8.5vw,154px);line-height:.84;letter-spacing:-.065em;margin:0;max-width:8em;font-weight:500;text-wrap:balance}.project-meta-lower{display:grid;grid-template-columns:minmax(260px,1.4fr) 1fr;gap:clamp(36px,7vw,110px);margin-top:clamp(36px,7vh,78px);max-width:760px}.project-description{font-size:clamp(15px,1.1vw,19px);line-height:1.5;margin:0}.project-services{font-size:12px}.project-services .label{color:#969696;margin:0 0 10px}.project-services ul{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}.launch-link{display:inline-flex;gap:30px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:5px}.scroll-cue{position:absolute;z-index:5;right:var(--pad);bottom:var(--pad);margin:0;color:var(--hot);display:flex;align-items:center;gap:12px}.scroll-cue i{display:block;width:54px;height:1px;background:currentColor;transform-origin:left}
.media-viewport{position:absolute;z-index:3;left:0;right:0;top:15.5svh;height:70svh;overflow:visible;pointer-events:none}.media-rail{height:100%;display:flex;gap:clamp(32px,4.5vw,78px);width:max-content;padding-left:68vw;padding-right:12vw;will-change:transform}.media-card{position:relative;flex:0 0 auto;width:min(70vw,1180px);height:100%;margin:0;overflow:hidden;border-radius:clamp(18px,1.7vw,28px);background:#d9d8d4;color:#111;box-shadow:0 30px 80px rgba(0,0,0,.28);transform:translateZ(0);pointer-events:auto}.media-card-hero{width:min(76vw,1260px)}.media-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);filter:saturate(.9) contrast(1.02)}.media-card:hover img{transform:scale(1.025)}.media-card figcaption{position:absolute;z-index:4;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase;mix-blend-mode:difference}.media-card-poster:after,.media-card-interface:after,.media-card-hero:after,.media-card-final:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));pointer-events:none}.poster-type{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;justify-content:center;padding:8%;font-size:clamp(52px,7vw,128px);font-weight:600;line-height:.78;letter-spacing:-.07em;color:#fff;mix-blend-mode:difference}.poster-type span:last-child{align-self:flex-end}
.code-scene{height:100%;background:#e5ff3f;color:#111;padding:28px;display:flex;flex-direction:column}.code-top{display:flex;justify-content:space-between;border-bottom:1px solid #111;padding-bottom:14px;font-size:12px;text-transform:uppercase}.code-layout{position:relative;flex:1;display:grid;grid-template-columns:45px 1fr 36%;align-items:center}.code-layout ol{font-size:11px;line-height:2.2;color:rgba(0,0,0,.42);padding:0;list-style:none}.code-layout pre{font:clamp(15px,1.45vw,27px)/1.7 Geist,monospace;white-space:pre-wrap}.code-layout b{color:#364fb7}.code-layout em{color:#be2e3f;font-style:normal}.code-orbit{position:relative;aspect-ratio:1;border:1px solid #111;border-radius:50%}.code-orbit:before,.code-orbit:after{content:"";position:absolute;border:1px solid #111;border-radius:50%;inset:13%;transform:rotate(60deg);clip-path:polygon(0 0,100% 0,100% 46%,0 84%)}.code-orbit:after{inset:27%;transform:rotate(-35deg)}.code-orbit i{position:absolute;width:14px;height:14px;background:#111;border-radius:50%;left:9%;top:26%;box-shadow:120px 120px 0 #111}.code-scene>p{margin:0;font-size:clamp(28px,3.5vw,66px);font-weight:620;line-height:.9;letter-spacing:-.04em}
.metrics-scene{height:100%;padding:30px;background:#dad9d4;display:flex;flex-direction:column}.metrics-scene>p{margin:0 0 22px;font-size:11px;letter-spacing:.12em}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#777;border:1px solid #777;flex:1}.metric-grid article{background:#dad9d4;padding:22px;display:flex;flex-direction:column}.metric-grid span{font-size:11px}.metric-grid strong{font-size:clamp(58px,7vw,130px);font-weight:470;letter-spacing:-.07em;margin:auto 0}.metric-grid small{font-size:10px;letter-spacing:.1em}.metric-wave{height:70px;display:flex;gap:9px;align-items:flex-end;padding-top:20px}.metric-wave i{flex:1;height:40%;background:#111}.metric-wave i:nth-child(2n){height:90%}.metric-wave i:nth-child(3n){height:62%}.final-mark{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:#fff;font-size:40vw;line-height:1;font-weight:190;mix-blend-mode:difference}.project-progress{position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:var(--pad);height:1px;background:var(--line);opacity:0;transition:opacity .3s}.project-progress i{display:block;width:100%;height:100%;background:var(--hot);transform:scaleX(0);transform-origin:left}

/* Geometry follows the inspected reference: 34em intro, 53em rail lead, 5em gaps. */
:root{--ink:#181818;--paper:#fffde0;--hot:#f65893;--unit:clamp(16px,1vw,24px);--pad:clamp(20px,3vw,60px);--header:48px}
body{font-weight:400}.site-header{mix-blend-mode:normal;color:var(--paper)}.brand{color:var(--hot);font-weight:500;font-size:30px}.pill{font-size:12px}.pill-light,.round-button{background:#fff;color:#192743}.pill-dark{background:#292933}.stage-grid{display:none}
.project-stage{min-height:0}.project-meta{width:34em;font-size:var(--unit);left:var(--pad);z-index:2;will-change:opacity}.project-meta h1{font-size:4.5em;line-height:1.08;font-weight:400;letter-spacing:-.055em;max-width:none;text-wrap:balance}.project-index{font-size:10px;letter-spacing:.12em;color:#999}.project-meta-lower{grid-template-columns:60% 20%;gap:20%;margin-top:3em}.project-description{font-size:.8em;line-height:1.65}.project-services{font-size:.75em}.project-services ul{display:block;line-height:1.6;white-space:nowrap}.project-services .label{color:inherit;font-size:1em;margin-bottom:1em}.launch-link{background:white;color:#192743;border:0;border-radius:99px;padding:14px 22px;white-space:nowrap;margin-top:16px;gap:16px}.scroll-cue{bottom:6vh}
.media-viewport{top:calc(var(--pad)*2 + var(--header)*1.4);height:calc(100svh - var(--pad)*4 - var(--header)*1.8)}.media-rail{padding-left:calc(var(--unit)*53);padding-right:0;gap:calc(var(--unit)*5)}.media-card,.media-card-hero{width:auto;aspect-ratio:1820/1024;flex-shrink:0;box-shadow:none;border-radius:22px}.media-card-hero{aspect-ratio:1234/720}.media-card img{object-fit:cover;transform:scale(1.06);transition:none;will-change:transform}.media-card:hover img{transform:scale(1.06)}.media-card figcaption{font-size:10px}.code-scene>p{padding-bottom:20px}.metrics-scene{padding-bottom:44px}.metric-grid strong{font-size:clamp(45px,6vw,100px)}.metric-wave{display:none}
.next-project{position:absolute;z-index:5;inset:0;transform:translate3d(100vw,0,0);background:#121414;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);will-change:transform;pointer-events:none}.next-project.is-visible{pointer-events:auto}.next-project>p{font-size:12px;letter-spacing:.1em;color:#a8a8ac;margin:0 0 22px}.next-project h2{font-size:calc(var(--unit)*4.5);line-height:1.08;letter-spacing:-.055em;font-weight:400;margin:0;color:#c2c3c7}.next-project-footer{position:absolute;left:var(--pad);bottom:var(--pad);width:310px;max-width:calc(100% - var(--pad)*2);display:flex;gap:14px;align-items:center;font-size:11px}.next-project-footer i{height:3px;flex:1;background:linear-gradient(to right,var(--hot) calc(var(--next-progress,0)*100%),#48484a 0);border-radius:3px}.project-progress{bottom:var(--pad);left:var(--pad);right:var(--pad)}
.menu-panel{visibility:hidden}.menu-panel.is-open{visibility:visible}.menu-panel nav a{font-size:32px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.project-meta.is-inactive{pointer-events:none}.is-changing .next-project{transform:translate3d(0,0,0)!important;transition:transform .7s cubic-bezier(.76,0,.24,1)}.is-changing .next-project h2{color:var(--paper);transition:color .7s}.is-changing .next-project>p,.is-changing .next-project-footer{opacity:0;transition:opacity .3s}
:focus-visible{outline:2px solid var(--hot);outline-offset:6px}
@media(max-width:812px){:root{--pad:20px;--header:44px}.site-header{padding:16px 20px;background:linear-gradient(#181818e8,transparent)}.brand{font-size:22px}.header-actions{gap:8px}.pill{padding:0 16px;height:44px}.header-actions .pill-dark,.sound-toggle{display:none}.back-link span:last-child{display:none}.back-link{width:44px;padding:0}.menu-panel nav a{font-size:27px}.project-scroll{height:auto!important}.project-stage{position:relative;height:auto;overflow:hidden;padding:136px var(--pad) 0}.project-meta{position:relative;left:0;top:0;width:auto;transform:none!important;opacity:1!important}.project-meta h1{font-size:clamp(42px,12vw,72px);line-height:1.18;letter-spacing:-.06em;word-break:keep-all}.project-meta-lower{display:flex;flex-direction:column;gap:28px;margin-top:34px}.project-description{font-size:16px;max-width:30em}.project-services{font-size:13px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.project-services .label{grid-column:1/-1;margin:0}.project-services ul{margin:0}.launch-link{align-self:end;justify-self:end;margin:0;font-size:12px}.scroll-cue,.project-progress{display:none}.media-viewport{position:relative;inset:auto;height:auto;margin-top:50px}.media-rail{height:auto;width:auto;padding:0;display:flex;flex-direction:column;gap:20px;transform:none!important}.media-card,.media-card-hero{width:100%;height:auto;aspect-ratio:1820/1024;border-radius:16px}.media-card-hero{aspect-ratio:1234/720}.media-card img{position:absolute;inset:0}.media-card-code,.media-card-metrics{aspect-ratio:4/5}.code-scene{padding:20px}.code-layout{grid-template-columns:25px 1fr}.code-orbit{display:none}.code-layout pre{font-size:12px}.code-scene>p{font-size:30px;line-height:1;padding-bottom:25px}.poster-type{font-size:9vw;line-height:.95}.metrics-scene{padding:20px 20px 40px}.metrics-scene>p{font-size:9px}.metric-grid article{padding:16px}.metric-grid strong{font-size:42px}.media-card figcaption{font-size:8px;left:14px;right:14px;bottom:12px}.final-mark{font-size:75vw}.next-project{position:relative;inset:auto;transform:none!important;min-height:48svh;margin:50px calc(var(--pad)*-1) 0;padding:50px var(--pad) 95px;pointer-events:auto}.next-project h2{font-size:clamp(42px,12vw,72px);line-height:1.18}.next-project-footer{bottom:30px}.is-changing .next-project{transition:none}.project-meta.is-inactive{pointer-events:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.media-card img{transform:none!important}}

.media-card{clip-path:inset(16% round 22px);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}.media-card.is-in-view{clip-path:inset(0 round 22px)}
.site-demo{background:#e5e4e0}.demo-viewport{position:absolute;inset:0;overflow:hidden;transform-origin:50% 45%;pointer-events:none}.demo-viewport iframe{position:absolute;inset:0;border:0;width:1440px;height:900px;transform-origin:0 0;pointer-events:none}.demo-controls{position:absolute;z-index:8;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:12px;color:#fff}.demo-chapter{background:#181818cc;border-radius:999px;padding:10px 15px}.demo-play{cursor:pointer;background:#181818cc;color:white;border:1px solid #ffffff50;border-radius:999px;padding:10px 15px;font:inherit}.demo-play:hover{background:#181818}.demo-timeline{position:absolute;z-index:8;left:20px;right:20px;bottom:10px;height:2px;background:#18181820}.demo-timeline i{display:block;height:100%;background:var(--hot);transform-origin:left;transform:scaleX(0)}
@media(max-width:812px){.demo-controls{left:10px;right:10px;bottom:14px;font-size:9px}.demo-chapter,.demo-play{padding:7px 10px}.demo-timeline{bottom:7px;left:10px;right:10px}.media-card{clip-path:none;transition:none}}

/* Website case: preserve the captured page edges and keep labels outside its UI. */
.visit-link{display:inline-flex;white-space:nowrap;margin-top:18px;gap:16px;border-bottom:1px solid currentColor;padding-bottom:5px;color:var(--hot)}
.has-website-case .media-card{aspect-ratio:1425/891;background:#e8e7e3}
.website-capture img{position:absolute;inset:0;height:calc(100% - 34px);object-fit:contain;transform:none!important;filter:none}
.website-capture figcaption{bottom:0;left:0;right:0;height:34px;padding:0 18px;align-items:center;mix-blend-mode:normal;background:#242525;color:#eae9e2;font-size:10px;letter-spacing:.05em}
.demo-story,.demo-scene{position:absolute;inset:0;overflow:hidden}.demo-scene{will-change:transform,opacity;background:#e8e7e3}.demo-scene img{width:100%;height:100%;object-fit:cover;filter:none;position:absolute;inset:0;will-change:transform}.demo-poster{transform:none!important}.demo-viewport{transform:none!important}.site-demo:after{display:none}.demo-controls{pointer-events:none}.demo-play{pointer-events:auto}
@media(max-width:812px){.visit-link{margin-top:0;grid-column:2;justify-self:end;font-size:12px}.has-website-case .website-capture{aspect-ratio:1425/1000}.website-capture figcaption{font-size:8px;padding:0 12px;height:28px}.website-capture img{height:calc(100% - 28px)}}

/* Reference-inspired foliage projection: three focus planes, slow wind, input inertia.
   Original vector silhouettes, composited beneath content without a second WebGL scene. */
:root{--case-base:#292a2b;--case-light:#484944;--case-shade:#191c20;--next-base:#252c29;--next-light:#414b3e}
body{background:var(--case-base)}
.case-atmosphere{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 82% 8%,var(--case-light) 0%,transparent 70%),linear-gradient(125deg,var(--case-base) 20%,var(--case-shade) 100%)}
.case-atmosphere:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 55% 45%,transparent 20%,#080b1040 100%)}
.case-shadow-depth{position:absolute;inset:-8%;transform:translate3d(var(--shadow-x,0px),var(--shadow-y,0px),0) rotate(var(--shadow-turn,0deg));transform-origin:15% 100%;will-change:transform}
.case-shadow-depth i{position:absolute;display:block;width:120vmax;height:120vmax;left:-28vmax;top:-36vmax;background:url(./project-foliage.svg) center/contain no-repeat;opacity:.27;filter:blur(5px);transform-origin:15% 95%;animation:case-wind-near 22s ease-in-out infinite alternate;will-change:transform}
.case-shadow-depth i:nth-child(2){left:24vmax;top:-30vmax;width:95vmax;height:95vmax;opacity:.17;filter:blur(16px);animation:case-wind-far 29s ease-in-out -9s infinite alternate}
.case-shadow-depth i:nth-child(3){left:-5vmax;top:8vmax;width:85vmax;height:85vmax;opacity:.12;filter:blur(28px);animation:case-wind-near 34s ease-in-out -15s infinite alternate-reverse}
.project-scroll{background:transparent}.project-index{color:#c2c1b9}.project-services .label{color:var(--hot)}
.next-project{background:radial-gradient(ellipse at 90% 5%,var(--next-light),transparent 80%),var(--next-base);isolation:isolate}
.next-project:before{content:"";position:absolute;z-index:-1;inset:-20%;background:url(./project-foliage.svg) 20% 50%/100vmax no-repeat;opacity:.13;filter:blur(16px);pointer-events:none;transform:rotate(-12deg)}
.next-project h2{color:var(--paper)}
@keyframes case-wind-near{from{transform:rotate(-9deg) translate3d(-1%,0,0)}to{transform:rotate(-5deg) translate3d(1%,1%,0)}}
@keyframes case-wind-far{from{transform:rotate(142deg) scale(1.02)}to{transform:rotate(146deg) scale(1.04)}}
body.is-page-hidden .case-shadow-depth i{animation-play-state:paused}
@media(max-width:812px){.site-header{background:linear-gradient(#242629ee,transparent)}.case-shadow-depth i{opacity:.18}.case-shadow-depth i:nth-child(2){opacity:.12}.case-shadow-depth i:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){.case-shadow-depth{transform:none!important;will-change:auto}.case-shadow-depth i{animation:none;will-change:auto;transform:rotate(-7deg)}.case-shadow-depth i:nth-child(2){transform:rotate(144deg)}}

/* Recorded live browser interactions; native video decoding replaces screenshot transforms. */
.demo-recording{display:block;width:100%;height:100%;object-fit:contain;background:#e8e7e3}
.demo-recording:fullscreen{object-fit:contain;background:#111}
.is-recording .demo-chapter{margin-right:auto}.is-recording .demo-controls{gap:8px}
.demo-fullscreen{pointer-events:auto;cursor:pointer;border:1px solid #ffffff50;background:#181818cc;color:#fff;border-radius:999px;padding:10px 15px;font:inherit;white-space:nowrap}
.demo-fullscreen:hover{background:#181818}
@media(max-width:812px){.is-recording .demo-controls{font-size:8px;gap:5px}.is-recording .demo-chapter,.is-recording .demo-play,.demo-fullscreen{padding:7px 8px}.is-recording .demo-chapter{letter-spacing:0}}

.demo-recording{pointer-events:auto}