/* A vector mark cannot switch to an OS-specific emoji. */
.starz-mark{display:block;width:.82em;height:.82em;flex:none}
.brand-star{display:inline-flex;align-items:center;justify-content:center}

/* The original 100svh animation frame and canvas stay untouched.
   A separate, non-interactive backdrop covers the larger visible area.
   Its height never follows Safari's retracting toolbar. */
.hero-viewport-background{display:none}
@media (max-width:900px),(hover:none) and (pointer:coarse){
  .scroll-experience .site-header{
    padding-top:max(24px,env(safe-area-inset-top,0px));
    padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
    padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
  }
  .scroll-experience .intro-bottom{
    left:max(var(--gutter),env(safe-area-inset-left,0px));
    right:max(var(--gutter),env(safe-area-inset-right,0px));
    bottom:max(23px,env(safe-area-inset-bottom,0px));
  }
  .journey-dock{bottom:max(12px,env(safe-area-inset-bottom,0px))}
}
@media(max-width:900px) and (orientation:portrait){
  .scroll-experience{--intro-copy-bottom:105px}
  .scroll-experience .intro-copy{
    bottom:calc(var(--intro-copy-bottom) + max(0px,env(safe-area-inset-bottom,0px) - 23px));
  }
  .js .scroll-experience.experience .worlds{
    top:calc(108px + max(0px,env(safe-area-inset-top,0px) - 24px));
    bottom:max(24px,env(safe-area-inset-bottom,0px));
  }
}
@media(max-width:380px) and (orientation:portrait){
  .scroll-experience{--intro-copy-bottom:98px}
}
@media(max-width:900px) and (max-height:620px) and (orientation:portrait){
  .scroll-experience{--intro-copy-bottom:85px}
  .scroll-experience .site-header{padding-top:max(16px,env(safe-area-inset-top,0px))}
}
@media(max-height:600px) and (orientation:landscape){
  .scroll-experience .site-header{padding-top:max(14px,env(safe-area-inset-top,0px))}
  .scroll-experience .intro-bottom{bottom:max(12px,env(safe-area-inset-bottom,0px))}
  .scroll-experience.sphere-horizontal .intro-copy{
    left:max(var(--gutter),env(safe-area-inset-left,0px));
  }
  .js .scroll-experience.experience .worlds{
    left:max(var(--gutter),env(safe-area-inset-left,0px));
    right:max(var(--gutter),env(safe-area-inset-right,0px));
    bottom:max(15px,env(safe-area-inset-bottom,0px));
  }
}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:900px),(hover:none) and (pointer:coarse){
    .js .hero-viewport-background{
      display:block;position:sticky;top:0;height:100lvh;margin-bottom:-100lvh;
      z-index:-1;pointer-events:none;
      background:radial-gradient(ellipse at 81% 87%,#e3e4eb00 4%,#ebf0f755 50%,#ffffff8c 100%),linear-gradient(115deg,#f9fafc 12%,#e6eaf1 50%,#cad4e3 100%);
    }
    .js .scroll-experience .experience-frame{background:transparent}
    .js .scroll-experience .experience-grain{opacity:0}
  }
}