[data-persistent-player]{transform-style:preserve-3d}
.route-view{min-height:100vh;transition:opacity .24s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.route-view.is-leaving{opacity:0;transform:translateY(14px)}
.route-view.is-entering{animation:route-enter .55s cubic-bezier(.16,1,.3,1) both}
@keyframes route-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

body.route-case [data-persistent-player]{
  position:fixed;
  z-index:160;
  top:0;
  left:50%;
  width:min(220px,calc(100vw - 120px));
  height:50px;
  aspect-ratio:auto;
  transform:translateX(-50%);
  transform-origin:50% 0;
  animation:notch-pop .42s cubic-bezier(.2,.82,.24,1) both;
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.24));
  will-change:transform,opacity;
}
body.route-case [data-persistent-player]::before{
  display:none;
}
body.route-case [data-persistent-player] iframe{position:relative;z-index:1;display:block;width:100%;height:100%;border:0}
@keyframes notch-pop{
  0%{opacity:0;transform:translate(-50%,-108%) scale(.985)}
  78%{opacity:1;transform:translate(-50%,2px) scale(1.004)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}

body.route-home.shell-routed [data-persistent-player]{animation:none;transform:rotate(var(--player-angle)) scale(var(--player-scale))}

@media(max-width:780px){
  body.route-case [data-persistent-player]{top:calc(env(safe-area-inset-top) - 12px);width:126px;height:44px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.2))}
}

@media(prefers-reduced-motion:reduce){
  .route-view{transition:none}
  .route-view.is-entering,body.route-case [data-persistent-player]{animation:none}
}