:root {
  --frosted-surface-background: rgba(247, 249, 251, 0.82);
  --frosted-surface-border: rgba(207, 216, 224, 0.72);
  --frosted-surface-shadow: 0 10px 28px rgba(31, 48, 62, 0.06);
  --frosted-surface-filter: blur(32px) saturate(1.18);
}

.frosted-surface,
.sticky-frost {
  background: var(--frosted-surface-background);
  /* border-bottom: 1px solid var(--frosted-surface-border); */
  /* box-shadow: var(--frosted-surface-shadow); */
  -webkit-backdrop-filter: var(--frosted-surface-filter);
  backdrop-filter: var(--frosted-surface-filter);
}

.sticky-frost {
  position: sticky;
  top: var(--sticky-frost-top, 0);
  z-index: var(--sticky-frost-z, 20);
  isolation: isolate;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .frosted-surface,
  .sticky-frost {
    background: rgba(247, 249, 251, 0.88);
  }
}