.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.glass-surface__filter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.glass-surface__sheen,
.glass-surface__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glass-surface__sheen {
  background: linear-gradient(135deg, hsl(0 0% 100% / 0.10) 0%, transparent 42%, transparent 64%, hsl(0 0% 100% / 0.04) 100%);
}

.glass-surface__rim {
  padding: 3px;
  background: linear-gradient(150deg, hsl(0 0% 100% / 0.26), hsl(0 0% 100% / 0.03) 45%, hsl(0 0% 100% / 0.02) 60%, hsl(0 0% 100% / 0.13));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.glass-surface--svg {
  background: hsl(0 0% 0% / var(--glass-frost, 0));
  -webkit-backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
  backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
}

.glass-surface--fallback {
  background: hsl(0 0% 100% / calc(0.04 + var(--glass-frost, 0) * 0.3));
  -webkit-backdrop-filter: blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);
  backdrop-filter: blur(12px) saturate(calc(var(--glass-saturation, 1) * 1.4)) brightness(1.04);
}

#nav.glass-surface--svg {
  background: rgba(13, 18, 27, var(--glass-frost, 0.08));
  -webkit-backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1.7));
  backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1.7));
}

#nav.scrolled.glass-surface--svg {
  background: rgba(13, 18, 27, 0.26);
}

#nav.glass-surface--fallback {
  background: rgba(16, 21, 32, 0.34);
}

#nav.scrolled.glass-surface--fallback {
  background: rgba(13, 18, 27, 0.56);
}