/* Body dimensions: Apple iPhone Duo technical specifications (millimetres).
   Outer display: 1398 × 2034. Inner display: 2007 × 2853 screenshot pixels.
   Every asset preserves both body and screen proportions; none is stretched. */
.hero-duo-art,.hero-closed-art{position:absolute;height:auto;filter:drop-shadow(0 24px 18px #18364338)}
.hero-duo-art{width:94%;left:5%;top:65px;transform:rotate(-7deg)}
.hero-closed-art{width:30%;left:-4%;top:250px;transform:rotate(7deg)}
.pose-tabs button{position:relative;overflow:hidden;min-height:60px}
.pose-tabs button>span:nth-child(2){display:flex;align-items:baseline;gap:9px}
.pose-tabs small{font-size:10px;color:#a9bec6}
.pose-tabs button[aria-selected="true"] small{color:inherit}
.pose-tabs .pose-icon{width:25px;height:18px;margin-inline:0}
.pose-tabs .cover-portrait{width:18px;height:25px;margin-inline:3.5px}
.pose-tabs .inner-landscape{width:25px;height:18px}
.pose-tabs .inner-portrait{width:18px;height:25px;margin-inline:3.5px}
.pose-tabs .inner-portrait::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid currentColor}
.pose-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:#9bdcd9;transform:scaleX(0);transform-origin:left}
.orientations[data-playing="true"][data-cycle="a"] .pose-tabs button[aria-selected="true"]::after{animation:pose-progress-a 5s linear forwards}
.orientations[data-playing="true"][data-cycle="b"] .pose-tabs button[aria-selected="true"]::after{animation:pose-progress-b 5s linear forwards}
.pose-playback{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:20px}
.pose-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 14px;border:1px solid #385361;border-radius:3px;background:transparent;color:#d7eeeb;font:11px var(--sans)}
.pose-toggle[hidden]{display:none}
.pose-toggle:hover{background:#173848}
.pose-toggle:focus-visible{outline-color:var(--sea)}
.playback-icon{width:12px;text-align:center;font-size:13px}
.playback-hint{font-size:9px;color:#a9bec6}
.pose-stage{container-type:inline-size;height:510px;min-height:0;padding:42px 20px;perspective:1000px}
.duo-device{--physical-unit:min(2.55px,.53cqw);width:calc(var(--body-w)*var(--physical-unit));height:calc(var(--body-h)*var(--physical-unit));max-width:none;object-fit:contain;filter:drop-shadow(0 24px 18px #0005);transition:width .7s ease,height .7s ease,transform .7s ease;transform:rotate(0deg)}
.pose-stage[data-current-pose="closed-landscape"]{--body-w:117.8;--body-h:84.1}
.pose-stage[data-current-pose="closed-portrait"]{--body-w:84.1;--body-h:117.8}
.pose-stage[data-current-pose="open-landscape"]{--body-w:164.6;--body-h:117.8}
.pose-stage[data-current-pose="vertical-portrait"]{--body-w:117.8;--body-h:164.6}
.pose-stage[data-current-pose="vertical-portrait"] .duo-device{transform:rotate(0deg)}
.pose-description{min-height:145px;max-width:450px}
@keyframes pose-progress-a{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pose-progress-b{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:1500px){.hero-duo-art{top:75px}.hero-closed-art{top:280px}}
@media(max-width:1100px){.hero-duo-art{top:100px}.hero-closed-art{top:255px}.pose-tabs button>span:nth-child(2){display:block}.pose-tabs small{display:block;margin-top:2px;font-size:9px}}
@media(max-width:800px){.hero-duo-art{width:88%;left:10%;top:40px}.hero-closed-art{width:28%;left:3%;top:210px}.pose-tabs button>span:nth-child(2){display:block}.pose-tabs button{min-height:70px}.pose-stage{height:490px}.pose-description{min-height:130px}.pose-toggle{font-size:12px}.playback-hint{font-size:10px}.hero-stage{height:490px}}
@media(max-width:480px){.hero-duo-art{width:90%;left:8%;top:40px}.hero-closed-art{width:29%;left:0;top:175px}.hero-stage{height:360px}.pose-tabs button{min-height:68px;gap:10px}.pose-tabs .tab-arrow{font-size:15px}.pose-stage{height:395px;padding-inline:12px}.pose-stage-label{font-size:7px}.pose-stage-index{font-size:10px}.duo-device{--physical-unit:.53cqw}.pose-description{min-height:150px}.pose-description h3{font-size:23px}.pose-description p{font-size:13px}.playback-hint{font-size:9px}.orientation-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){.duo-device{transition:none}.pose-tabs button::after{animation:none!important}}