/* A decorative sibling below controls. The owner sets the geometry and stacking. */
.ui-glass-surface {
  --glass-glaze: rgba(249, 249, 243, .72);
  --glass-blur: 3.6px;
  --glass-opaque: #f6f5f0;
  --glass-rim: rgba(31, 35, 37, .42);
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: var(--glass-opaque);
  box-shadow:
    0 0 0 1px var(--glass-rim),
    0 4px 9px -5px rgba(22, 22, 22, .44),
    inset 0 0 0 1px rgba(255, 255, 255, .84);
}
.ui-glass-surface--ink {
  --glass-glaze: rgba(13, 16, 17, .73);
  --glass-opaque: #161616;
  --glass-rim: rgba(12, 14, 16, .63);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-glass-surface {
    background: var(--glass-glaze);
    -webkit-backdrop-filter: saturate(1.4) blur(var(--glass-blur));
    backdrop-filter: saturate(1.4) blur(var(--glass-blur));
  }
  /* Only this opt-in adds the measured rounded lens. Basic blur survives when
     the engine accepts filter URLs syntactically but cannot render them. */
  .ui-glass-surface[data-refraction="live"] {
    backdrop-filter: var(--glass-lens) saturate(1.4) blur(var(--glass-blur));
  }
}
/* A narrow pair of highlights gives the material a polished bevel on flat
   paper as well as the colorful edge that moves with a photo underneath. */
.ui-glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(159deg, rgba(255,255,255,.13), transparent 22%, transparent 78%, rgba(255,255,255,.07));
  box-shadow:
    inset 1px 1.6px 1px rgba(255,255,255,.91),
    inset -1px -1.7px 1px rgba(255,255,255,.46),
    inset 2px 4px 3px -3px rgba(255,255,255,.85),
    inset -2px -3px 4px -3px rgba(28,35,42,.56);
}
.ui-glass-surface--grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.91' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h80v80H0z'/%3E%3C/svg%3E");
  opacity: .1;
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .ui-glass-surface, .ui-glass-surface[data-refraction="live"] {
    background: var(--glass-opaque);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .ui-glass-surface::before, .ui-glass-surface::after { display: none; }
}
@media (forced-colors: active) {
  .ui-glass-surface, .ui-glass-surface[data-refraction="live"] {
    background: Canvas;
    border: 1px solid CanvasText;
  }
}