/* Base liquid glass material. Each site sets --lg-tint, --lg-edge, --lg-shadow for its own palette. */
[data-glass]{
  position:relative; isolation:isolate;
  background: var(--lg-tint, rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.55),
    inset 0 -1px 0 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 1px 1px rgba(0,0,0,.05),
    var(--lg-shadow, 0 24px 60px -24px rgba(0,0,0,.35));
}
/* specular rim: a gradient hairline, brighter where the "light" (pointer) is */
[data-glass]::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(120% 80% at var(--mx,25%) var(--my,0%), rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.04) 40%, rgba(255,255,255,.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* soft inner glare */
[data-glass]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background: radial-gradient(90% 60% at var(--mx,30%) var(--my,-10%), rgba(255,255,255,.18), transparent 60%);
  mix-blend-mode: screen;
}
.lg-frost [data-glass]{ background: var(--lg-tint-frost, var(--lg-tint, rgba(255,255,255,.18))); }
@media (prefers-reduced-transparency: reduce){ [data-glass]{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background: var(--lg-solid, rgba(30,30,30,.92)); } }