:root {
  color-scheme: light dark;
  --super-search-viewport-height: 100dvh;
  --super-search-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --super-search-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  --super-search-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --super-search-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 0;
  overscroll-behavior: none;
  background: light-dark(#f3f3f4, #101214);
}

body > #super-search-v1 {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  height: var(--super-search-viewport-height);
  max-height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-top: var(--super-search-safe-top);
  padding-right: var(--super-search-safe-right);
  padding-bottom: var(--super-search-safe-bottom);
  padding-left: var(--super-search-safe-left);
}

body > #super-search-v1 .sv-screen {
  min-width: 0;
  scroll-padding-bottom: calc(94px + var(--super-search-safe-bottom));
}

body > #super-search-v1 .sv-hscroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body > #super-search-v1 .sv-results-sticky,
body > #super-search-v1 .sv-module-sticky {
  min-width: 0;
}

body > #super-search-v1 .sv-nav {
  bottom: calc(10px + var(--super-search-safe-bottom));
}

body > #super-search-v1 .sv-sheet {
  padding-bottom: calc(22px + var(--super-search-safe-bottom));
}

body > #super-search-v1 .sv-share-backdrop {
  padding-bottom: calc(82px + var(--super-search-safe-bottom));
}

html.super-search-keyboard-open #super-search-v1 .sv-nav {
  display: none;
}

@media (prefers-color-scheme: dark) {
  html,
  body {
    background: #101214;
  }
}