:root {
  scroll-padding-top: 92px;
}

:is(
  body[data-app-install="journaling"] > .topbar,
  body[data-app-install="drift"] > .drift-header,
  body[data-app-install="library"] > .library-header,
  body[data-app-install="writer"] > .writer-header,
  body[data-app-install="reader"] > .reader-header,
  body[data-app-install="browser"] > .browser-chrome,
  body[data-app-install="light"] > .light-header,
  body[data-app-install="slides"] > .slides-header,
  body[data-app-install="sheets"] > .sheets-header,
  body[data-app-install="semantic-field"] > header,
  body[data-app-install="playem"] > .playem-header
) {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  isolation: isolate;
  background: color-mix(in srgb, var(--surface, var(--paper, var(--bg, #11130f))) 92%, transparent) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

html[data-theme="light"] :is(
  body[data-app-install="journaling"] > .topbar,
  body[data-app-install="drift"] > .drift-header,
  body[data-app-install="library"] > .library-header,
  body[data-app-install="writer"] > .writer-header,
  body[data-app-install="reader"] > .reader-header,
  body[data-app-install="browser"] > .browser-chrome,
  body[data-app-install="light"] > .light-header,
  body[data-app-install="slides"] > .slides-header,
  body[data-app-install="sheets"] > .sheets-header,
  body[data-app-install="semantic-field"] > header,
  body[data-app-install="playem"] > .playem-header
) {
  background: color-mix(in srgb, var(--surface, var(--paper, #f4f0e5)) 94%, white 6%) !important;
  box-shadow: 0 9px 26px rgba(32, 43, 34, .12);
}

@media (prefers-reduced-motion: reduce) {
  :is(
    body[data-app-install] > header,
    body[data-app-install] > .topbar,
    body[data-app-install] > [class$="-header"],
    body[data-app-install] > .browser-chrome
  ) {
    scroll-behavior: auto;
  }
}