:root{color-scheme:light;--ink:#10100f;--lime:#c5fa29;--scroll:0}*{box-sizing:border-box}html{background:white}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #729800;outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}.scroll-scene{height:132svh}.viewport{height:100svh;position:sticky;top:0;display:grid;place-items:center;overflow:hidden;background:#fff}.scene{position:relative;width:min(100vw,181.42svh);aspect-ratio:1689/931;isolation:isolate;flex:none}header{position:absolute;inset:1.6% 3.8% auto;display:flex;justify-content:space-between;align-items:flex-start;z-index:50;font-size:clamp(11px,.95vw,18px)}.logo{font-weight:800;font-size:clamp(21px,1.9vw,35px);letter-spacing:-.065em;line-height:.87;display:inline-block}.logo span{color:var(--lime);font-size:1.4em;line-height:0}nav{position:absolute;left:40%;top:16%;display:flex;gap:3.8vw;white-space:nowrap}nav span,.lab-link{cursor:default}.header-right{display:flex;gap:1.8vw;align-items:flex-start}.lab-link{display:flex;justify-content:space-between;min-width:6.7vw;border-bottom:1px solid #222;padding:1vw 0 .8vw;gap:2vw}.intro,.caption{position:absolute;z-index:40;top:13.2%;margin:0;font-size:clamp(10px,.9vw,17px);line-height:1.4}.intro{left:3.8%;font-weight:700;letter-spacing:.07em}.caption{right:3.8%}.wordmark{margin:0;font-family:Arial,Helvetica,sans-serif;font-weight:900}.oops{position:absolute;top:32.5%;left:12.25%;font-size:32.6vw;font-size:calc(min(100vw,181.42svh)*.326);letter-spacing:-.078em;line-height:.83;z-index:20;transform:scaleX(1.06);transform-origin:left top}.working{position:absolute;top:71.6%;left:54.7%;z-index:25;font-size:calc(min(100vw,181.42svh)*.056);font-weight:800;letter-spacing:-.065em;line-height:1;white-space:nowrap}.dot{color:var(--lime);margin-left:.035em}.objects{display:contents}.object{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,10);transform:translate3d(0,calc(var(--scroll)*var(--depth,0)*1px),0);will-change:transform;pointer-events:none}.object img{display:block;width:100%;height:auto;object-fit:contain;animation:float var(--duration,7s) ease-in-out infinite;animation-delay:var(--delay,-2s);transform:rotate(var(--rotation,0deg));will-change:transform}.lens{--x:36.7%;--y:12.5%;--w:25.2%;--z:12;--duration:8.2s;--delay:-3s}.card{--x:22%;--y:15%;--w:16%;--z:10;--rotation:-5deg;--duration:9s;--delay:-4s}.swoosh{--x:12.6%;--y:24%;--w:18%;--z:8;--rotation:15deg;--duration:9.5s}.invader{--x:79.5%;--y:26%;--w:8.8%;--z:10;--duration:7s;--delay:-5s}.loop{--x:30%;--y:53%;--w:29%;--z:18;--rotation:24deg;--duration:10s;--delay:-7s}.die{--x:6.7%;--y:56%;--w:15.5%;--z:30;--rotation:8deg;--duration:8.8s;--delay:-4.5s}.headphones{--x:22.8%;--y:66%;--w:16%;--z:31;--rotation:2deg;--duration:8s;--delay:-6s}.shoe{--x:77.5%;--y:40%;--w:20%;--z:32;--rotation:-5deg;--duration:8.4s;--delay:-2.5s}.mug{--x:83.8%;--y:74%;--w:8.5%;--z:31;--rotation:-10deg;--duration:7.6s;--delay:-3.8s}.motion{position:absolute;right:1.4%;bottom:3%;z-index:50;border:1px solid #e0e2d9;background:#ffffffcc;border-radius:50%;width:3vw;height:3vw;min-width:36px;min-height:36px;font-size:clamp(14px,1.15vw,21px);color:#4a583a;display:grid;place-items:center}.motion:hover{background:#f3f7e8}.paused .object img{animation-play-state:paused}.paused .object{will-change:auto}@keyframes float{0%,100%{transform:translate3d(-2px,-5px,0) rotate(calc(var(--rotation,0deg) - .7deg))}50%{transform:translate3d(3px,6px,0) rotate(calc(var(--rotation,0deg) + .7deg))}}
@media(min-aspect-ratio:2/1){.scene{width:181.42svh}}
@media(max-width:700px){.scroll-scene{height:125svh}.scene{width:100%;height:100svh;min-height:600px;aspect-ratio:auto}header{inset:23px 6% auto;font-size:12px}.logo{font-size:24px}nav{left:auto;right:0;top:68px;gap:24px;font-size:12px}.header-right{gap:15px}.lab-link{padding:9px 0 10px;gap:20px;min-width:75px}.intro,.caption{top:19%;font-size:10px}.intro{left:6%;max-width:44%}.caption{right:6%;max-width:43%}.oops{top:42%;left:5.5%;font-size:39vw;letter-spacing:-.078em;transform:scaleX(1.04)}.working{top:calc(42% + 30vw);left:34%;font-size:8.1vw;letter-spacing:-.07em}.lens{--x:30%;--y:27%;--w:42%}.card{--x:8%;--y:29%;--w:26%}.invader{--x:80%;--y:23%;--w:13%}.swoosh{--x:0%;--y:40%;--w:30%}.loop{--x:30%;--y:53%;--w:40%}.die{--x:2%;--y:57%;--w:23%}.shoe{--x:72%;--y:51%;--w:29%}.headphones{--x:21%;--y:69%;--w:31%}.mug{--x:76%;--y:72%;--w:17%}.motion{right:6%;bottom:4%;width:40px;height:40px}.object img{animation-name:float-mobile}@keyframes float-mobile{0%,100%{transform:translate3d(-1px,-3px,0) rotate(calc(var(--rotation,0deg) - .5deg))}50%{transform:translate3d(2px,4px,0) rotate(calc(var(--rotation,0deg) + .5deg))}}}
@media(prefers-reduced-motion:reduce){.object img{animation:none!important}.object{transform:none!important;will-change:auto}.scroll-scene{height:100svh}}
/* Match the reference's type baseline and foreground spacing. */
@media(min-width:701px){.oops{top:26%}.loop{--y:51%;--w:24%}}
.dot{display:inline-block;width:.18em;height:.18em;border-radius:50%;background:var(--lime);font-size:inherit;line-height:0;color:transparent;vertical-align:.03em;margin-left:.09em}
@media(max-width:700px){.invader{--y:26%}}
@media(min-width:701px){.working{left:56.2%}.shoe{--y:37%}}
@media(max-width:700px){.working{top:calc(42% + 39vw);z-index:35}}

/* The full composition exits as the visitor continues scrolling. */
.scroll-scene{height:280svh}.scene{transform:translate3d(0,calc(var(--scroll)*-1.1px),0);will-change:transform}.object{transform:translate3d(0,calc(var(--scroll)*var(--depth,0)*-1px),0)}
@media(prefers-reduced-motion:reduce){.scroll-scene{height:calc(200svh + 64px)}.viewport{position:relative}.scene{transform:none;will-change:auto}}

/* Keep the type and navigation anchored; scroll only the artwork. */
.scene{transform:none;will-change:auto}.object{transform:translate3d(0,calc(var(--scroll)*var(--exit-speed,1)*-1px),0)}
@media(prefers-reduced-motion:reduce){.scroll-scene{height:280svh}.viewport{position:sticky}.object{transform:translate3d(0,calc(var(--scroll)*var(--exit-speed,1)*-1px),0)!important}}
/* Independent scroll paths are separate from the gentle float on each image. */
.object{transform:translate3d(var(--exit-x,0px),var(--exit-y,0px),0) rotate(var(--exit-angle,0deg))!important}

.experiment-nav{position:relative}.experiment-toggle{background:none;padding:0;font:inherit;display:flex;align-items:center;gap:9px}.experiment-toggle>span{font-size:.85em;transition:transform .2s}.experiment-toggle[aria-expanded=true]>span{transform:rotate(180deg)}.experiment-list{position:absolute;top:calc(100% + 20px);left:-18px;min-width:255px;padding:8px;background:#fff;border:1px solid #e6e6df;box-shadow:0 12px 35px #0000000c;border-radius:4px}.experiment-list[hidden]{display:none}.experiment-list a{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:16px 12px;font-size:14px;white-space:nowrap}.experiment-list a:hover,.experiment-list a:focus-visible{background:#f2f5ea}.experiment-list a>span{color:#758b43}.experiment-list a+a{border-top:1px solid #f0f0eb}@media(max-width:700px){.experiment-list{left:auto;right:-8px;top:calc(100% + 14px);min-width:230px}.experiment-list a{font-size:13px}}

@media(max-width:700px){}
/* Rebalance the nine remaining objects around the wordmark. */
@media(min-width:701px){
 .lens{--x:45%;--y:10%;--w:28%}
 .card{--x:25.5%;--y:15%;--w:17.5%}
 .swoosh{--x:12%;--y:23%;--w:19%}
 .invader{--x:80%;--y:23.5%;--w:9.5%}
 .shoe{--x:77%;--y:36%;--w:21%}
 .die{--x:7%;--y:55%;--w:15.5%}
 .headphones{--x:25%;--y:67%;--w:16%}
 .mug{--x:83.5%;--y:76%;--w:9%}
}
@media(max-width:700px){
 .lens{--x:38%;--y:27%;--w:46%}
 .card{--x:10%;--y:30%;--w:29%}
 .invader{--x:81%;--y:26%;--w:13%}
 .swoosh{--x:0%;--y:39%;--w:31%}
 .shoe{--x:73%;--y:49%;--w:28%}
 .loop{--x:35%;--y:55%;--w:39%}
}

/* A second scroll chapter follows the artwork's complete exit. */
.scroll-scene{height:420svh}
.oops{transform:translate3d(0,var(--wordmark-y,0px),0) scaleX(1.06);opacity:var(--wordmark-opacity,1);will-change:transform}
.working{transform:translate3d(0,var(--wordmark-y,0px),0);opacity:var(--wordmark-opacity,1);will-change:transform}
.experiment-invite{position:absolute;top:35%;left:12%;right:12%;z-index:35;text-align:center}
.experiment-invite[hidden]{display:none}
.experiment-invite h2{font-size:clamp(44px,6.2vw,105px);font-weight:700;line-height:1;letter-spacing:-.065em;margin:0 0 36px}
.experiment-invite h2>span{color:var(--lime)}
.invite-links{display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.invite-links a{display:flex;align-items:center;gap:32px;border-bottom:1px solid #cdd2c3;padding:12px 0;font-size:14px}
.invite-links a>span{color:#778256}.invite-links a:hover{border-color:var(--ink)}
@media(max-width:700px){.oops{transform:translate3d(0,var(--wordmark-y,0px),0) scaleX(1.04)}.experiment-invite{top:40%;left:7%;right:7%}.experiment-invite h2{font-size:10.5vw;margin-bottom:28px}.invite-links{flex-direction:column;align-items:center;gap:12px}.invite-links a{font-size:12px;min-width:210px;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.scroll-scene{height:420svh}.oops,.working{will-change:auto}}