.glass {
  --glass-tint: rgba(255, 255, 255, .08);
  --glass-rim: rgba(255, 255, 255, .75);
  --glass-rim-soft: rgba(255, 255, 255, .12);
  --glass-shine: rgba(255, 255, 255, .22);
  --glass-shadow: rgba(0, 0, 0, .35);
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    0 12px 40px var(--glass-shadow),
    0 2px 6px rgba(0, 0, 0, .15),
    inset 0 1px 1px var(--glass-shine),
    inset 0 -6px 14px -8px var(--glass-shine);
}

/* Bright rim, strongest at the top-left and bottom-right where light hits a curved edge. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.25px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--glass-rim), var(--glass-rim-soft) 35%, var(--glass-rim-soft) 65%, var(--glass-rim));
  -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);
  pointer-events: none;
}

/* Soft glare that follows the pointer. */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--glare-x, 50%) var(--glare-y, 0%), var(--glass-shine), transparent 70%);
  opacity: .55;
  pointer-events: none;
}

html:not(.theme_dark) .glass {
  --glass-tint: rgba(255, 255, 255, .28);
  --glass-rim: rgba(255, 255, 255, .95);
  --glass-rim-soft: rgba(255, 255, 255, .35);
  --glass-shine: rgba(255, 255, 255, .6);
  --glass-shadow: rgba(30, 50, 80, .2);
}