:root { --glass-blur: 18px; --glass-saturate: 1; --glass-recede: .3; --glass-tint: rgba(140,121,108,.08); --glass-bg: linear-gradient(var(--glass-tint),var(--glass-tint)),rgba(255,255,255,.6); --glass-bg-strong: linear-gradient(var(--glass-tint),var(--glass-tint)),rgba(255,255,255,.66); --glass-bg-solid: linear-gradient(var(--glass-tint),var(--glass-tint)),rgba(255,255,255,.94); --glass-border: 0 solid transparent; --glass-shadow: none; }

.surface-glass { background: var(--glass-bg); border: var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); }

.surface-glass.glass-strong { background: var(--glass-bg-strong); }

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .surface-glass, .surface-glass.glass-strong { background: var(--glass-bg-solid); backdrop-filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .surface-glass, .surface-glass.glass-strong { background: var(--glass-bg-solid); backdrop-filter: none; }
}