.liquid-glass { --lg-radius: 24px;  --lg-blur: 8px; --lg-saturation: 160%; --lg-bg-opacity: 0.10; --lg-border-opacity: 0.28; --lg-shadow-opacity: 0.20; position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; border-radius: var(--lg-radius);  background: color-mix( in oklab, white calc( var(--lg-bg-opacity) * 100% ), transparent ); backdrop-filter: blur( var(--lg-blur) ) saturate( var(--lg-saturation) ); -webkit-backdrop-filter: blur( var(--lg-blur) ) saturate( var(--lg-saturation) );  border: 1px solid rgba( 255, 255, 255, var(--lg-border-opacity) );  box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.42 ), 0 20px 50px -30px rgba( 0, 0, 0, var(--lg-shadow-opacity) ); }  .liquid-glass::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( 135deg, rgba( 255, 255, 255, 0.10 ), transparent 35%, transparent 70%, rgba( 255, 255, 255, 0.035 ) ); opacity: 0.8; }  .liquid-glass > * { position: relative; z-index: 1; }  .liquid-glass--dark { --lg-bg-opacity: 0.10; --lg-border-opacity: 0.25; --lg-shadow-opacity: 0.30; background: rgba( 10, 15, 12, 0.10 ); color: white; }  .liquid-glass--light { --lg-bg-opacity: 0.16; --lg-border-opacity: 0.32; --lg-shadow-opacity: 0.12; background: rgba( 255, 255, 255, 0.16 ); color: #111; }  .liquid-glass--subtle { --lg-blur: 6px; --lg-saturation: 145%; --lg-bg-opacity: 0.07; --lg-border-opacity: 0.20; --lg-shadow-opacity: 0.15; }  .liquid-glass--strong { --lg-blur: 12px; --lg-saturation: 175%; --lg-bg-opacity: 0.12; --lg-border-opacity: 0.30; --lg-shadow-opacity: 0.25; }  .liquid-glass-navbar { --lg-radius: 18px; --lg-blur: 8px; --lg-saturation: 160%; --lg-bg-opacity: 0.08; --lg-border-opacity: 0.22; --lg-shadow-opacity: 0.20; }  .liquid-glass { transition: border-color 250ms ease; } .liquid-glass:hover { border-color: rgba( 255, 255, 255, 0.34 ); }  .liquid-glass:focus-within { border-color: rgba( 255, 255, 255, 0.38 ); }  @media ( max-width: 767px ) { .liquid-glass { --lg-radius: 18px; --lg-blur: 6px; } }  @media ( pointer: coarse ) { .liquid-glass { --lg-blur: 6px; --lg-saturation: 140%; } }  @media ( prefers-reduced-motion: reduce ) { .liquid-glass { transition: none; } }  @supports not ( backdrop-filter: blur(1px) ) { .liquid-glass { background: rgba( 20, 25, 22, 0.78 ); } .liquid-glass--light { background: rgba( 255, 255, 255, 0.82 ); } }