/* One device demonstration. The landscape gallery is an unobstructed panorama.
   Portrait outer-body ratio: 117.8 / 164.6, from Apple's iPhone Duo specs.
   Inner display: 1878 / 2670; each half is 1878 / 1335. */
body{--duo-angle:90deg;--walker-lean:0deg}.hero-copy{max-width:640px}.hero .intro{max-width:410px}.hero-shade{background:linear-gradient(90deg,#061522dc,#06152285 32%,#06152205 70%),linear-gradient(0deg,var(--ink),transparent 28%,#07152120 70%,#07152180)}.scene-stage{min-height:580px;height:min(52vw,740px);max-height:740px}.scene-backdrop,.city-video{opacity:1;transform:none;object-fit:cover;object-position:center}.scene-stage.video-active .city-video{opacity:1}.stage-shade{background:linear-gradient(0deg,#071521f5,transparent 32%,transparent 75%,#07152188)}.scene-topline{position:absolute;top:26px;left:8vw;right:8vw;margin:0;padding:0}.scene-bottomline{position:absolute;left:8vw;right:8vw;bottom:30px;margin:0;padding:0}.scene-stage.changing #scene-screen{animation:scene-enter .65s ease both}.hinge-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:45px;align-items:center;margin-top:28px}.hinge-instruments{min-width:0}.experiment .instrument-head{position:relative;z-index:2}.hinge-instruments .balance-display{margin-top:10px}.hinge-instruments .experiment-footer{flex-direction:column;align-items:stretch;margin-top:12px}.hinge-instruments .experiment-footer .button{align-self:flex-start}.hinge-control-label{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}.hinge-control-label label{margin:0}.hinge-control-label output{color:var(--gold);font-size:20px;font-variant-numeric:tabular-nums}.duo-device{position:relative;width:100%;max-width:410px;aspect-ratio:1/1.16;perspective:1500px;isolation:isolate;margin:0 auto}.duo-assembly{position:absolute;top:4%;left:15%;width:70%;aspect-ratio:1178/1646;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-18deg) rotateZ(-2deg)}.duo-half{position:absolute;width:100%;height:50%;padding:4px;background:linear-gradient(135deg,#a2a8ad,#3d4650 15%,#161d25 60%,#8a949d);box-shadow:0 0 0 1px #c3cbd477;transform-style:preserve-3d;backface-visibility:visible}.duo-upper{top:0;border-radius:24px 24px 0 0;transform-origin:50% 100%;transform:rotateX(calc(90deg - var(--duo-angle)));box-shadow:0 0 0 1px #bbc5cf88,-6px 4px 16px #0005}.duo-lower{top:50%;border-radius:0 0 24px 24px;transform-origin:50% 0%;transform:rotateX(90deg);box-shadow:0 0 0 1px #c3cbd488,0 18px 40px #0008}.duo-display{position:relative;width:100%;height:100%;overflow:hidden;background:#132432;border:1px solid #020609;transform:translateZ(1px)}.duo-upper .duo-display{border-radius:20px 20px 0 0;border-bottom:0}.duo-lower .duo-display{border-radius:0 0 20px 20px;border-top:0}.duo-upper{padding-bottom:0}.duo-lower{padding-top:0}.duo-display>img:not(.duo-walker){display:block;width:100%;height:100%;object-fit:cover}.duo-display:after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,#ffffff0c,transparent 65%);pointer-events:none}.duo-hinge{position:absolute;top:calc(50% - 2px);left:4px;right:4px;height:5px;background:linear-gradient(#334b58,#192d3b,#304554);transform:translateZ(2px);z-index:5}.duo-angle{position:absolute;left:calc(100% + 14px);top:-12px;color:var(--gold);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:1px;padding:4px 6px;border:1px solid #e7bc7d40;background:#071521cc;border-radius:3px;transform:rotateY(18deg) rotateX(30deg)}.duo-top-label{position:absolute;top:12%;left:10%;font-size:10px;color:#c9d8e6bb;letter-spacing:2.5px}.duo-waves{position:absolute;inset:0;width:100%;height:100%;opacity:.65}.wind-wave{stroke:#c6ddec;stroke-width:.8;opacity:.25}.duo-walker{position:absolute!important;left:32.9%;top:49.8%;width:9.4%!important;height:auto!important;object-fit:contain!important;transform-origin:50% 95%;transform:rotate(var(--walker-lean));z-index:2}.duo-upper,.duo-walker{will-change:transform}.motion-off .duo-upper,.motion-off .duo-walker{will-change:auto}.motion-off .scene-stage.changing #scene-screen{animation:none}
@media(max-width:1100px){.hinge-layout{gap:28px}.duo-device{aspect-ratio:1/1.23}.scene-stage{height:58vw;min-height:500px}}
@media(max-width:800px){.hero{min-height:760px;padding-bottom:130px}.hero-copy{max-width:550px}.hero .intro{max-width:440px}.scene-stage{height:60vw;min-height:470px}.scene-bottomline{left:7vw;right:7vw;bottom:25px;gap:18px}.scene-topline{left:7vw;right:7vw}.hinge-layout{grid-template-columns:1fr;gap:5px;margin-top:15px}.duo-device{max-width:360px;aspect-ratio:1/1.1}.hinge-instruments .experiment-footer .button{align-self:stretch}.hinge-instruments .experiment-footer{gap:20px}}
@media(max-width:540px){.hero{min-height:700px;padding-top:125px;padding-bottom:120px}.hero .intro{max-width:335px}.scene-stage{height:auto;min-height:0;max-height:none;padding-top:56.3%;padding-bottom:145px}.scene-backdrop,.city-video{height:calc(100% - 145px);object-fit:cover}.stage-shade{background:linear-gradient(0deg,#071521 0%,#07152100 55%,#07152144 100%)}.scene-topline{top:18px;font-size:10px}.scene-bottomline{bottom:25px;gap:15px}.scene-title{font-size:28px}.scene-tabs button{font-size:12px;padding:10px 11px}.duo-device{aspect-ratio:1/1.16;max-width:350px}.duo-assembly{left:13%;width:72%;top:2%}.duo-half{padding:3px}.duo-upper{padding-bottom:0;border-radius:18px 18px 0 0}.duo-lower{padding-top:0;border-radius:0 0 18px 18px}.duo-upper .duo-display{border-radius:15px 15px 0 0}.duo-lower .duo-display{border-radius:0 0 15px 15px}.duo-hinge{left:3px;right:3px;height:4px}.duo-angle{left:calc(100% + 9px);font-size:11px;padding:3px 4px}.duo-top-label{font-size:9px}.hinge-layout{gap:0}.hinge-control-label output{font-size:18px}}
@media(prefers-reduced-motion:reduce){.scene-stage.changing #scene-screen{animation:none}}
.city-video{opacity:0}.scene-stage.video-active .city-video{opacity:1}