:root {
  --motora-url-bar-reserve: 0px;
  --motora-inset-top: max(12px, env(safe-area-inset-top, 0px), var(--motora-url-bar-reserve));
  --motora-inset-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  --motora-inset-left: max(0px, env(safe-area-inset-left, 0px));
  --motora-inset-right: max(0px, env(safe-area-inset-right, 0px));
  --motora-native-top: 56px;
}
@media (max-width: 640px) {
  :root {
    --motora-inset-top: max(14px, env(safe-area-inset-top, 0px), var(--motora-url-bar-reserve));
  }
}
html.motora-app-webview {
  --motora-url-bar-reserve: 56px;
  --motora-inset-top: max(56px, env(safe-area-inset-top, 0px), var(--motora-url-bar-reserve));
}
html.motora-native-app {
  --motora-url-bar-reserve: 56px;
  --motora-inset-top: max(var(--motora-native-top, 56px), env(safe-area-inset-top, 0px), 56px);
}
html.motora-app-webview body:not(.app-body),
html.motora-native-app body:not(.app-body) {
  padding-top: calc(var(--motora-inset-top) + 8px) !important;
  padding-left: max(8px, var(--motora-inset-left)) !important;
  padding-right: max(8px, var(--motora-inset-right)) !important;
}
html.motora-app-webview .wrap,
html.motora-native-app .wrap,
html.motora-app-webview .container-fluid,
html.motora-native-app .container-fluid {
  padding-top: calc(var(--motora-inset-top) + 12px);
}
html.motora-app-webview .topbar,
html.motora-native-app .topbar,
html.motora-app-webview .inst-site-header,
html.motora-native-app .inst-site-header {
  padding-top: calc(0.75rem + var(--motora-inset-top));
}