/* Safe-area content only. Intro cover and animation retain their original timing. */
@media (hover: none) and (pointer: coarse) {
  .topbar { top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); }
  #main { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .enhanced .chapter-screen { left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); }
  .sheet {
    --ios-sheet-gap: 14px;
    top: max(var(--ios-sheet-gap), env(safe-area-inset-top, 0px));
    right: max(var(--ios-sheet-gap), env(safe-area-inset-right, 0px));
    bottom: max(var(--ios-sheet-gap), env(safe-area-inset-bottom, 0px));
    width: min(720px, calc(100vw - max(var(--ios-sheet-gap), env(safe-area-inset-left, 0px)) - max(var(--ios-sheet-gap), env(safe-area-inset-right, 0px))));
    height: calc(100dvh - max(var(--ios-sheet-gap), env(safe-area-inset-top, 0px)) - max(var(--ios-sheet-gap), env(safe-area-inset-bottom, 0px)));
  }
}
@media (hover: none) and (pointer: coarse) and (max-width: 760px) {
  .sheet { --ios-sheet-gap: 7px; left: max(var(--ios-sheet-gap), env(safe-area-inset-left, 0px)); }
}