:root {
  --hl-gutter: 48px;
  --hl-top: 30px;
  --hl-screen: 100svh;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  overscroll-behavior-y: none;
}

@media (max-width: 640px) {
  :root {
    --hl-gutter: max(20px, env(safe-area-inset-left, 0px));
    --hl-top: max(16px, env(safe-area-inset-top, 0px));
  }

  [style*="left: 48px"] {
    left: var(--hl-gutter) !important;
  }

  [style*="right: 48px"] {
    right: max(20px, env(safe-area-inset-right, 0px)) !important;
  }

  [style*="top: 30px"],
  [style*="top: 33px"] {
    top: var(--hl-top) !important;
  }

  [style*="padding: 96px 48px 0"] {
    padding: 88px var(--hl-gutter) 0 !important;
  }

  [style*="margin: 96px 48px 24px"] {
    margin: 72px var(--hl-gutter) max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }
}