.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 82%), color-mix(in oklch, white, transparent 62%))
      inset,
    0 0 12px 5px light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 80%))
      inset,
    0px 6px 20px rgba(17, 17, 26, 0.06),
    0px 10px 28px rgba(17, 17, 26, 0.05),
    0px 18px 60px rgba(17, 17, 26, 0.04),
    0px 4px 12px rgba(17, 17, 26, 0.08) inset,
    0px 8px 20px rgba(17, 17, 26, 0.06) inset,
    0px 14px 50px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--webgl {
  box-shadow:
    0px 6px 20px rgba(17, 17, 26, 0.06),
    0px 10px 28px rgba(17, 17, 26, 0.05),
    0px 18px 60px rgba(17, 17, 26, 0.04);
}

.glass-surface__canvas,
.glass-surface__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

.glass-surface__frame {
  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
  box-shadow:
    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 82%), color-mix(in oklch, white, transparent 62%))
      inset,
    0 0 12px 5px light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 80%))
      inset,
    0px 4px 12px rgba(17, 17, 26, 0.08) inset,
    0px 8px 20px rgba(17, 17, 26, 0.06) inset,
    0px 14px 50px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--fallback {
  background: light-dark(
    hsl(0 0% 100% / calc(0.14 + var(--glass-frost, 0) * 0.5)),
    hsl(0 0% 100% / calc(0.05 + var(--glass-frost, 0) * 0.3))
  );
  -webkit-backdrop-filter: blur(14px) saturate(calc(var(--glass-saturation, 1) * 1.5)) brightness(1.06);
  backdrop-filter: blur(14px) saturate(calc(var(--glass-saturation, 1) * 1.5)) brightness(1.06);
  box-shadow:
    inset 0 1px 0 0 light-dark(hsl(0 0% 100% / 0.88), hsl(0 0% 100% / 0.35)),
    inset 0 -1px 0 0 light-dark(hsl(0 0% 100% / 0.4), hsl(0 0% 100% / 0.1)),
    inset 1px 0 0 0 light-dark(hsl(0 0% 100% / 0.25), hsl(0 0% 100% / 0.08)),
    inset -1px 0 0 0 light-dark(hsl(0 0% 100% / 0.25), hsl(0 0% 100% / 0.08)),
    0 0 3px 1px light-dark(color-mix(in oklch, black, transparent 86%), color-mix(in oklch, white, transparent 70%))
      inset,
    0 0 14px 4px light-dark(color-mix(in oklch, white, transparent 68%), color-mix(in oklch, white, transparent 88%))
      inset,
    0px 5px 18px rgba(17, 17, 26, 0.07),
    0px 9px 26px rgba(17, 17, 26, 0.06),
    0px 16px 55px rgba(17, 17, 26, 0.05);
  border: 0.5px solid light-dark(hsl(0 0% 100% / 0.4), hsl(0 0% 100% / 0.12));
}

.glass-surface__sheen,
.glass-surface__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glass-surface__sheen {
  background: linear-gradient(
    135deg,
    light-dark(hsl(0 0% 100% / 0.42), hsl(0 0% 100% / 0.14)) 0%,
    transparent 42%,
    transparent 64%,
    light-dark(hsl(0 0% 100% / 0.18), hsl(0 0% 100% / 0.05)) 100%
  );
}

.glass-surface__rim {
  padding: 3px;
  background: linear-gradient(
    150deg,
    light-dark(hsl(0 0% 100% / 0.7), hsl(0 0% 100% / 0.34)),
    light-dark(hsl(0 0% 100% / 0.1), hsl(0 0% 100% / 0.03)) 45%,
    light-dark(hsl(0 0% 100% / 0.08), hsl(0 0% 100% / 0.02)) 60%,
    light-dark(hsl(0 0% 100% / 0.42), hsl(0 0% 100% / 0.18))
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
}

.glass-surface__line,
.glass-surface__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.glass-surface--svg .glass-surface__line,
.glass-surface--webgl .glass-surface__line {
  background: light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%));
}

.glass-surface--svg .glass-surface__glow,
.glass-surface--webgl .glass-surface__glow {
  background: light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%));
}

.glass-surface--fallback .glass-surface__line {
  background: light-dark(color-mix(in oklch, black, transparent 88%), color-mix(in oklch, white, transparent 72%));
}

.glass-surface--fallback .glass-surface__glow {
  background: light-dark(color-mix(in oklch, white, transparent 72%), color-mix(in oklch, white, transparent 90%));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface--fallback {
    background: light-dark(hsl(0 0% 100% / 0.72), hsl(0 0% 12% / 0.72));
  }
}

.glass-surface:focus-visible {
  outline: 2px solid light-dark(#007aff, #0a84ff);
  outline-offset: 2px;
}