/* Opt-in candidate: only the SCENE STUDIO preview, never the hero video. */
.mobile-studio-slot{display:contents}
.mobile-studio-safe-area{position:fixed;inset:0 auto auto 0;width:0;height:0;padding-top:env(safe-area-inset-top,0px);visibility:hidden;pointer-events:none}
@media(max-width:800px), (max-width:1100px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  #studio[data-mobile-studio] .mobile-studio-slot{display:block;min-width:0}
  #studio[data-mobile-studio] .mobile-studio-slot>.preview-image-wrap{height:100%}
  #studio[data-mobile-studio] .mobile-studio-slot>.preview-image-wrap>#studio-image{width:100%;height:100%;object-fit:contain;aspect-ratio:auto}
  #studio[data-mobile-studio] .preview-image-wrap[data-studio-dock]{box-sizing:border-box;max-width:none;overflow:hidden;background:var(--color-dark);transition:none;transform:none;isolation:isolate}
  #studio[data-mobile-studio] :is(button,a,input,select,textarea){scroll-margin-top:calc(var(--studio-docked-bottom,0px) + 16px)}
}
/* Phone landscape can be wider than the desktop breakpoint; retain stacked controls. */
@media(max-width:1100px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  #studio[data-mobile-studio] .studio{grid-template-columns:minmax(0,1fr)}
  #studio[data-mobile-studio] .studio-display{position:static;align-self:stretch}
  #studio[data-mobile-studio] .studio-settings{border-left:0;padding-left:0}
}
/* Latest owner choice for this candidate: dark header surface in both OS themes.
   PC shares only this color treatment; its preview behavior stays unchanged. */
.dark-opening.hero-header-overlay::before{content:"";height:var(--studio-header-height,92px);background:var(--color-dark)}
.hero-header-overlay>header.site-header{color:var(--color-on-dark);background:var(--color-dark);--focus-ring:var(--color-focus-inverse)}
.hero-header-overlay>header.site-header .member-header-menu a{color:var(--color-on-dark)}
.hero-header-overlay>header.site-header .desktop-nav a[aria-current="page"]{color:var(--color-on-dark);border-bottom-color:var(--color-on-dark)}
/* The existing footer remains intact; only its dark-surface tokens change. */
body>footer.site-footer,body>footer.site-shared-footer{width:100%;max-width:none;box-sizing:border-box;background:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-dark-border);--focus-ring:var(--color-focus-inverse)}
body>footer.site-footer :is(a,p),footer.site-shared-footer>.site-footer-menu>a,footer.site-shared-footer>.site-copyright{color:var(--color-muted-on-dark)}
body>footer.site-footer .brand{color:var(--color-on-dark)}
body>footer.site-footer a:hover,footer.site-shared-footer>.site-footer-menu>a:hover{color:var(--color-on-dark)}
body>footer.site-footer :is(a,button):focus-visible{outline-color:var(--color-focus-inverse)}

/* Phone/touch compact preview already fills its useful viewport; keep desktop expansion. */
@media(max-width:800px) and (pointer:coarse), (max-width:1100px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  #studio #expand-preview{display:none}
}