/* Keep the initial scrollIntoView target below the browser cutout and header. */
:root{--eco-safe-top:env(safe-area-inset-top,0px);--eco-safe-right:env(safe-area-inset-right,0px);--eco-safe-bottom:env(safe-area-inset-bottom,0px);--eco-safe-left:env(safe-area-inset-left,0px)}
body{padding:var(--eco-safe-top) var(--eco-safe-right) var(--eco-safe-bottom) var(--eco-safe-left);min-height:100dvh}
main{scroll-margin-top:calc(var(--eco-safe-top) + 128px)}
.skip:focus{top:calc(var(--eco-safe-top) + 6px);left:calc(var(--eco-safe-left) + 6px)}
dialog{max-height:calc(100dvh - var(--eco-safe-top) - var(--eco-safe-bottom) - 24px)}
@media(max-height:550px) and (min-width:600px){body.playing main{scroll-margin-top:calc(var(--eco-safe-top) + 12px)}}