html.is-mobile-runtime {
  --browser-ui-bottom-inset: 0px;
  --browser-ui-content-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh));
  --browser-ui-layout-height: var(--app-viewport-height, var(--mobile-viewport-height, 100dvh));
}

html.is-mobile-runtime.has-browser-bottom-ui {
  --app-viewport-height: var(--mobile-stage-page-height, var(--browser-ui-content-height)) !important;
  --mobile-dynamic-viewport-height: var(--browser-ui-content-height) !important;
  --mobile-viewport-height: var(--mobile-stage-page-height, var(--browser-ui-content-height)) !important;
  --device-height: var(--mobile-stage-page-height, var(--browser-ui-content-height)) !important;
  --mockup-stage-height: var(--mobile-stage-page-height, var(--browser-ui-content-height)) !important;
  --mockup-screen-height: var(--mobile-stage-page-height, var(--browser-ui-content-height)) !important;
  --safe-bottom: var(--browser-ui-bottom-inset, 0px) !important;
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--browser-ui-bottom-inset, 0px)) !important;
}

html.is-mobile-runtime.has-browser-bottom-ui,
html.is-mobile-runtime.has-browser-bottom-ui body,
html.is-mobile-runtime.has-browser-bottom-ui #app,
html.is-mobile-runtime.has-browser-bottom-ui .mockup-shell,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-shell,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-frame {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
  overflow-x: hidden !important;
}

html.is-mobile-runtime.has-browser-bottom-ui .phone-stage,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-overlay,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage > .screen,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-frame > .phone-stage > .screen {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime.has-browser-bottom-ui body #app,
html.is-mobile-runtime.has-browser-bottom-ui body #app .mockup-shell,
html.is-mobile-runtime.has-browser-bottom-ui body #app .mockup-shell .phone-stage-shell,
html.is-mobile-runtime.has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame,
html.is-mobile-runtime.has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame > .phone-stage,
html.is-mobile-runtime.has-browser-bottom-ui body #app .mockup-shell .phone-stage > .screen,
html.is-mobile-runtime.has-browser-bottom-ui body #app .mockup-shell .phone-stage-frame > .phone-stage > .screen {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime.has-browser-bottom-ui .phone-stage,
html.is-mobile-runtime.has-browser-bottom-ui .screen--scroll,
html.is-mobile-runtime.has-browser-bottom-ui .screen.screen--scroll,
html.is-mobile-runtime.has-browser-bottom-ui .app-drawer__panel--menu,
html.is-mobile-runtime.has-browser-bottom-ui .app-drawer__panel--mypage {
  scroll-padding-bottom: calc(var(--browser-ui-bottom-inset, 0px) + 24px) !important;
}

html.is-mobile-runtime.has-browser-bottom-ui .screen--scroll,
html.is-mobile-runtime.has-browser-bottom-ui .screen.screen--scroll {
  padding-bottom: max(var(--browser-ui-bottom-inset, 0px), env(safe-area-inset-bottom, 0px)) !important;
}

html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-overlay > .home-screen__sheet,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-overlay > .home-flow-pager,
html.is-mobile-runtime.has-browser-bottom-ui .phone-stage-overlay > .home-flow-nav,
html.is-mobile-runtime.has-browser-bottom-ui .ranking-sheet,
html.is-mobile-runtime.has-browser-bottom-ui .toast-layer {
  margin-bottom: var(--browser-ui-bottom-inset, 0px) !important;
}

html.is-mobile-runtime.has-browser-bottom-ui.has-drawer-overlay .app-overlay.app-drawer,
html.is-mobile-runtime.has-browser-bottom-ui.has-drawer-overlay .app-drawer__panel--menu,
html.is-mobile-runtime.has-browser-bottom-ui.has-drawer-overlay .app-drawer__panel--mypage {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime.has-translucent-browser-ui,
html.is-mobile-runtime.has-translucent-browser-ui body {
  background: transparent !important;
}

html.is-mobile-runtime.has-translucent-browser-ui {
  --mobile-dynamic-viewport-height: var(--browser-ui-content-height) !important;
  --app-viewport-height: var(--mobile-stage-page-height, var(--browser-ui-layout-height)) !important;
  --mobile-viewport-height: var(--mobile-stage-page-height, var(--browser-ui-layout-height)) !important;
  --device-height: var(--mobile-stage-page-height, var(--browser-ui-layout-height)) !important;
  --mockup-stage-height: var(--mobile-stage-page-height, var(--browser-ui-layout-height)) !important;
  --mockup-screen-height: var(--mobile-stage-page-height, var(--browser-ui-layout-height)) !important;
}

html.is-mobile-runtime.has-translucent-browser-ui,
html.is-mobile-runtime.has-translucent-browser-ui body,
html.is-mobile-runtime.has-translucent-browser-ui #app,
html.is-mobile-runtime.has-translucent-browser-ui .mockup-shell,
html.is-mobile-runtime.has-translucent-browser-ui .phone-stage-shell,
html.is-mobile-runtime.has-translucent-browser-ui .phone-stage-frame,
html.is-mobile-runtime.has-translucent-browser-ui .phone-stage {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body {
  height: auto !important;
  min-height: var(--browser-ui-layout-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui body {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui #app,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .mockup-shell,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage-shell,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage-frame,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage {
  height: auto !important;
  min-height: var(--browser-ui-layout-height) !important;
  max-height: none !important;
  overflow-x: hidden !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .mockup-shell,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage-shell,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage-frame,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage {
  overflow-y: visible !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage {
  position: relative !important;
  inset: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

html.is-mobile-runtime.has-translucent-browser-ui .phone-stage > .screen,
html.is-mobile-runtime.has-translucent-browser-ui .phone-stage-frame > .phone-stage > .screen {
  height: var(--app-viewport-height) !important;
  min-height: var(--app-viewport-height) !important;
  max-height: var(--app-viewport-height) !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage > .screen,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage-frame > .phone-stage > .screen {
  height: auto !important;
  min-height: var(--browser-ui-layout-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage > .screen:not(.screen--scroll),
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .phone-stage-frame > .phone-stage > .screen:not(.screen--scroll) {
  height: var(--browser-ui-layout-height) !important;
  min-height: var(--browser-ui-layout-height) !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .screen.screen--landing,
html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .screen.screen--landing .landing__background {
  height: var(--browser-ui-layout-height) !important;
  min-height: var(--browser-ui-layout-height) !important;
  max-height: none !important;
}

html.is-mobile-runtime.is-safari-ui-runtime.has-translucent-browser-ui .screen.screen--landing .landing__background img {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
}

html.is-mobile-runtime.has-translucent-browser-ui.has-browser-bottom-ui .screen--scroll,
html.is-mobile-runtime.has-translucent-browser-ui.has-browser-bottom-ui .screen.screen--scroll {
  padding-bottom: calc(var(--browser-ui-bottom-inset, 0px) + max(24px, env(safe-area-inset-bottom, 0px))) !important;
}