html, body, #root {
  background: #000;
  color-scheme: dark;
}

html.llamas-mobile-viewport {
  --llamas-content-height: var(--llamas-viewport-height, 100dvh);
  --llamas-keyboard-safe-bottom: env(safe-area-inset-bottom, 0px);
  height: 100%;
  overflow: hidden;
  background: #000;
  color-scheme: dark;
}
html.llamas-mobile-viewport body {
  background: #000;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
html.llamas-mobile-viewport #root {
  background: #000;
  position: fixed;
  top: var(--llamas-viewport-top, 0px);
  left: 0;
  right: 0;
  height: var(--llamas-viewport-height, 100dvh);
  max-height: var(--llamas-viewport-height, 100dvh);
  min-height: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
html.llamas-mobile-viewport #root > div {
  min-height: 0;
  min-width: 0;
}
html.llamas-mobile-viewport .llamas-viewport-modal {
  top: var(--llamas-viewport-top, 0px);
  bottom: auto;
  height: var(--llamas-viewport-height, 100dvh);
  max-height: var(--llamas-viewport-height, 100dvh);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.llamas-mobile-viewport :is(input, textarea, select, [contenteditable=true]) {
  font-size: 16px !important;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}
html.llamas-keyboard-open {
  --llamas-keyboard-safe-bottom: 0px;
}
@media all and (display-mode: standalone) {
  html.llamas-mobile-viewport {
    --llamas-content-height: calc(var(--llamas-viewport-height, 100dvh) - env(safe-area-inset-top, 0px) - var(--llamas-keyboard-safe-bottom));
  }
  html.llamas-mobile-viewport #root {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: var(--llamas-keyboard-safe-bottom);
    box-sizing: border-box;
  }
}