/* Liquid Glass for the demo's card and panel, switched on by liquid-glass.js (html.lg-on), every browser.
   The glass itself draws nothing: under its content sit a bent, lightly blurred copy of the scene behind it
   (.lg-clip > .lg-mirror > .lg-scene), a light veil (.lg-tint) and a hairline highlight (.lg-rim). The Glass
   slider (--frost) still thickens it toward solid. Without the script, demo.css's frosted glass stays. */

/* Tuned against macOS 27's own Liquid Glass (the real AirPane panel, side by side with the demo): a light veil
   over a moderately blurred, vivid background, and only a hairline highlight. */
:root {
  --lg-veil: rgba(255, 255, 255, .42);
  --lg-spec: rgba(255, 255, 255, .7);
  --lg-edge: rgba(0, 0, 0, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-veil: rgba(255, 255, 255, .075);
    --lg-spec: rgba(255, 255, 255, .28);
    --lg-edge: rgba(255, 255, 255, .1);
  }
}
:root[data-theme="dark"] {
  --lg-veil: rgba(255, 255, 255, .075);
  --lg-spec: rgba(255, 255, 255, .28);
  --lg-edge: rgba(255, 255, 255, .1);
}

/* The glass layers stop drawing their own frosted look; only the drop shadow stays on them. */
.lg-on .md-card.md-glass {
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
}
.lg-on .mp-glass {
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 24px 54px -18px rgba(0, 0, 0, .42);
}

.lg-layer {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* The card is its own stacking context (z-index 3): below zero keeps these under its content. */
.md-card > .lg-layer { z-index: -1; }

.lg-clip { overflow: hidden; }
.lg-mirror {
  position: absolute; inset: 0;
  filter: var(--lg-filter, none) blur(calc(9px + var(--frost) * 22px)) saturate(calc(1.7 - var(--frost) * .3)) brightness(1.02);
}
/* The copy of the pretend Mac's wallpaper, window and Dock, at the Mac's own size; the script lines it up. */
.lg-scene {
  position: absolute; left: 0; top: 0;
  width: 1280px; height: 780px;
  transform-origin: 0 0;
}
.lg-scene > * { pointer-events: none; }

.md-card > .lg-tint,
.mp-glass > .lg-tint {
  background-color: var(--lg-veil);
  background-image: linear-gradient(var(--md-frost-layer), var(--md-frost-layer));
}

.lg-rim {
  box-shadow:
    inset 0 1px 0 -.25px var(--lg-spec),
    inset 0 0 0 .5px var(--lg-edge);
}