/* Phone fit. The sky runs under Safari's toolbars and the home-screen status bar; landscape gets its own layout. */
html{background:#070a1f}
body{background:transparent}
#sky{top:0;bottom:auto;height:calc(100vh + 200px);height:calc(100lvh + env(safe-area-inset-top) + env(safe-area-inset-bottom) + 200px)}
@media (display-mode:standalone){html,body{height:100lvh}#sky{height:calc(100lvh + env(safe-area-inset-top) + env(safe-area-inset-bottom) + 260px)}}
#dialAnchor{width:min(72vw,320px,46svh)}
.np{margin-top:16px}
.top{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
#installBox[hidden]{display:none}
@media (display-mode:standalone){#installBox{display:none}}

@media (orientation:landscape) and (max-height:560px){
  .top{padding-top:calc(env(safe-area-inset-top) + 6px)}
  .brand #mono{height:26px}
  main{padding:calc(env(safe-area-inset-top) + 42px) max(28px,calc(env(safe-area-inset-right) + 12px)) calc(env(safe-area-inset-bottom) + 64px) max(28px,calc(env(safe-area-inset-left) + 12px));
    -webkit-mask:linear-gradient(transparent 0,#000 calc(env(safe-area-inset-top) + 40px),#000 calc(100% - env(safe-area-inset-bottom) - 80px),transparent calc(100% - env(safe-area-inset-bottom) - 50px));
    mask:linear-gradient(transparent 0,#000 calc(env(safe-area-inset-top) + 40px),#000 calc(100% - env(safe-area-inset-bottom) - 80px),transparent calc(100% - env(safe-area-inset-bottom) - 50px))}
  #view[data-page="radio"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  #view[data-page="radio"] .meter{grid-column:1/-1;grid-row:1;height:56px;margin:0}
  #view[data-page="radio"] #dialAnchor{grid-column:1;grid-row:2/span 3;justify-self:center;align-self:start;width:auto;
    height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 42px - 56px - 66px);max-height:360px;min-height:150px;aspect-ratio:1;position:sticky;top:0}
  #view[data-page="radio"] .hint{display:none}
  #view[data-page="radio"] .np{grid-column:2;grid-row:2;margin:4px 0 0;text-align:left}
  #view[data-page="radio"] .np-st,#view[data-page="radio"] .np-ctl{justify-content:flex-start}
  #view[data-page="radio"] .np h1{font-size:28px;margin-top:6px}
  #view[data-page="radio"] .np-line,#view[data-page="radio"] .np-times{margin-left:0;margin-right:0}
  #view[data-page="radio"] .np-ctl{margin-top:12px}
  #view[data-page="radio"] .dj{grid-column:2;grid-row:3;justify-content:flex-start;margin:18px 0 0}
  #view[data-page="radio"] .float{grid-column:2;grid-row:4;margin-top:18px}
  .tabs{max-width:500px;padding:2px 8px calc(env(safe-area-inset-bottom) + 4px)}
  .tabs a{font-size:10px;gap:1px;padding:4px 0}.tabs i{font-size:16px}
  .mini-anchor{bottom:calc(env(safe-area-inset-bottom) + 52px);right:max(14px,env(safe-area-inset-right));width:64px;height:64px}
  .mini-info{bottom:calc(env(safe-area-inset-bottom) + 62px);right:calc(max(14px,env(safe-area-inset-right)) + 76px)}
  #toast{bottom:calc(env(safe-area-inset-bottom) + 70px)}
}