body.study5{overflow:hidden;background:#19232d}
#experience.study5{height:100dvh;min-height:0;overflow:hidden}
.study5 #stage{touch-action:none;cursor:grab}.study5 #stage:active{cursor:grabbing}
.study5 #stage canvas{display:block;width:100%;height:100%}
.study5 header{z-index:3;text-shadow:0 1px 8px #000}
.study5 #playback-controls{left:50%;right:auto;transform:translateX(-50%);width:auto;z-index:3;bottom:62px}
.study5 .transport{display:flex;align-items:center;gap:4px;background:#101923dd;border:1px solid #ffffff2b;border-radius:30px;padding:4px 8px}
.study5 .transport button{border:0;background:transparent;min-width:44px;min-height:44px;font-size:18px;display:grid;place-items:center}
.study5 .transport :is(#human,#ai){font-size:12px;padding:0 10px}
.study5 :is(#loading,#error){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#10232dee;border:1px solid #ffffff40;padding:18px 24px;border-radius:12px;font:13px Arial;z-index:9;text-align:center;width:min(280px,85%)}
.study5 #loading progress{display:block;width:100%;margin-top:12px;accent-color:#82d9e8}
.study5 #stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent calc(50% - .5px),#f6e8da66 50%,transparent calc(50% + .5px))}
.study5 #stage[data-focused=true]::after{display:none}
@media(max-aspect-ratio:9/10){
 .study5 #stage::after{background:linear-gradient(to bottom,transparent calc(50% - .5px),#f6e8da66 50%,transparent calc(50% + .5px))}
 .study5.has-interface header{top:max(4px,env(safe-area-inset-top))}
 .study5 .archive-nav button{min-height:32px}
 .study5 .wordmark{font-size:16px;min-height:32px}
 .study5.has-interface #playback-controls{display:flex;align-items:center;gap:5px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));width:max-content;max-width:calc(100% - 16px)}
 .study5.has-interface .transport{gap:0;padding:3px}
 .study5.has-interface .transport button{padding:0 5px;min-width:38px}
 .study5.has-interface #auto-view{margin:0;min-height:44px;padding:4px 8px;font-size:10px}
 .study5.has-interface .social-nav{top:calc(50% - 44px);bottom:auto;right:12px;left:auto}
}

#estimate-details{display:block;margin:3px auto 0;min-height:30px;padding:3px 10px;background:#10202bc9;color:#d9e5e9;border:1px solid #ffffff30;border-radius:20px;font:11px Arial;cursor:pointer;white-space:nowrap}
#estimate-dialog{color:#e8eef1;background:#14222d;border:1px solid #ffffff50;border-radius:16px;padding:24px;max-width:min(560px,calc(100vw - 32px));max-height:80dvh;overflow:auto;font:14px/1.5 Arial}
#estimate-dialog::backdrop{background:#050a10bb}#estimate-dialog h2{font-size:20px;margin:0 25px 16px 0}#estimate-dialog p{margin:12px 0}#close-estimate{float:right;border:0;background:transparent;color:inherit;min-width:32px;min-height:32px;font-size:24px}
@media(max-aspect-ratio:9/10){#experience.has-interface #playback-controls{flex-wrap:wrap;justify-content:center;max-width:calc(100% - 80px);gap:3px}#estimate-details{font-size:10px;min-height:30px;margin:0}#experience.has-interface #auto-view{min-height:30px;height:30px}#experience.has-interface .transport button{min-height:36px}}

/* One arcade matchup lockup; artwork overlays never intercept gestures. */
#stage::before{content:'';position:absolute;left:50%;top:calc(50% + 30px);translate:-50% -50%;z-index:2;width:160px;height:116px;background:url('./assets/vs-arcade-v1.svg') center/contain no-repeat;filter:drop-shadow(0 4px 7px #0009);pointer-events:none}
#stage[data-focused=true]::before,#stage[data-focused=true] .comparison-label{display:none}
#stage .comparison-label{position:absolute;left:50%;top:calc(50% - 70px);translate:-50% 0;z-index:3;width:360px;height:44px;max-width:calc(100% - 24px);display:grid;place-items:center;padding:0 16px;background:url('./assets/vs-ribbon-v1.svg') center/100% 100% no-repeat;color:#fff4e3;font:900 23px/1 Arial,sans-serif;letter-spacing:-.5px;text-align:center;white-space:nowrap;filter:drop-shadow(0 3px 8px #0008);pointer-events:none}
@media(max-aspect-ratio:9/10){
 #stage::before{top:50%;width:124px;height:90px}
 #stage .comparison-label{top:calc(50% - 70px);width:290px;height:35px;font-size:18px;padding:0 12px;letter-spacing:-.4px}
 #experience.has-interface .social-nav{top:auto;bottom:max(4px,env(safe-area-inset-bottom));right:12px;left:auto}
 #experience.has-interface #playback-controls{bottom:max(55px,calc(env(safe-area-inset-bottom) + 55px))}
 #experience #stage::after{background:linear-gradient(to bottom,transparent calc(50% - 2px),#ffc65b 50%,transparent calc(50% + 2px));filter:drop-shadow(0 0 5px #ff9d21aa)}
}

@media(min-aspect-ratio:9/10){
 #experience.has-interface #playback-controls{display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 100px)}
 #experience.has-interface :is(#estimate-details,#auto-view){margin:0}
}
@media(min-aspect-ratio:9/10) and (max-height:460px){
 #stage .comparison-label{top:calc(50% - 32px);width:280px;height:32px;font-size:18px}
 #stage::before{top:calc(50% + 48px);width:124px;height:90px}
}