.glass {
  background: var(--glass-fill);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  position: relative;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--glass-highlight), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-hover:hover {
  background: var(--glass-fill-hover);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass {
    background: var(--bg-depth);
  }
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(700px circle at 15% 10%, var(--glow-a), transparent 60%),
    radial-gradient(600px circle at 85% 85%, var(--glow-b), transparent 60%),
    var(--bg-base);
}