.glass-panel {
  position: relative;
  --lg-tr: 15%;
  --lg-inner-gap: 4.5px;
  overflow: visible;
  border: 1px double rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.58),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.28),
    inset 6px -6px 1px -6px rgba(255, 255, 255, 0.46),
    inset -6px 6px 1px -6px rgba(255, 255, 255, 0.24),
    inset 0 0 2px rgba(0, 0, 0, 0.72),
    0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px) saturate(132%) contrast(112%) brightness(0.96);
  -webkit-backdrop-filter: blur(2px) saturate(132%) contrast(112%) brightness(0.96);
  filter: none;
  isolation: isolate;
}

.glass-panel[data-liquid-distort] {
  --liquid-x: 50%;
  --liquid-y: 50%;
  --liquid-px-x: 50%;
  --liquid-px-y: 50%;
  --press-range: 72px;
  --press-half: 36px;
  --press-half-x: var(--press-half);
  --press-half-y: var(--press-half);
  --press-soft: 10px;
  --press-radius: 12px;
  --liquid-depth: 18;
  --liquid-strength: 52;
  --liquid-chromatic-aberration: 0.28;
  --liquid-center-warp: 0.045;
  --liquid-blur: 0.25;
  --liquid-brightness: 1;
  --liquid-saturate: 1.06;
  --liquid-opacity: 0.22;
  --liquid-press-strength: 66;
  --liquid-press-center-warp: 0.07;
  --liquid-press-opacity: 0.16;
  touch-action: manipulation;
}

.glass-panel[data-liquid-distort].profile-panel {
  --liquid-strength: 34;
  --liquid-center-warp: 0.025;
  --liquid-opacity: 0.12;
  --liquid-press-strength: 48;
  --liquid-press-center-warp: 0.045;
  --liquid-press-opacity: 0.14;
  --press-half: 34px;
  --press-soft: 8px;
}

.glass-panel[data-liquid-distort].video-tile {
  --liquid-strength: 52;
  --liquid-center-warp: 0.045;
  --liquid-opacity: 0.22;
  --liquid-press-strength: 68;
  --liquid-press-center-warp: 0.07;
  --liquid-press-opacity: 0.14;
}

.glass-panel[data-liquid-distort].app-grid {
  --liquid-strength: 60;
  --liquid-center-warp: 0.052;
  --liquid-opacity: 0.27;
  --liquid-press-strength: 74;
  --liquid-press-center-warp: 0.078;
  --liquid-press-opacity: 0.14;
}

.glass-panel[data-liquid-distort].works-panel {
  --liquid-strength: 32;
  --liquid-center-warp: 0.022;
  --liquid-opacity: 0.1;
  --liquid-press-strength: 44;
  --liquid-press-center-warp: 0.04;
  --liquid-press-opacity: 0.16;
  --press-half: 34px;
  --press-soft: 8px;
}

.glass-panel[data-liquid-distort].profile-panel,
.glass-panel[data-liquid-distort].video-tile,
.glass-panel[data-liquid-distort].app-grid,
.glass-panel[data-liquid-distort].tools-panel,
.glass-panel[data-liquid-distort].works-panel {
  --liquid-depth: 16;
  --liquid-strength: 46;
  --liquid-chromatic-aberration: 0.28;
  --liquid-center-warp: 0.036;
  --liquid-blur: 0.25;
  --liquid-brightness: 1;
  --liquid-saturate: 1.06;
  --liquid-opacity: 0.2;
  --liquid-press-strength: 56;
  --liquid-press-center-warp: 0.052;
  --liquid-press-opacity: 0.22;
  --press-half: 34px;
  --press-soft: 8px;
}

.glass-panel::before {
  position: absolute;
  top: 35%;
  left: 50%;
  z-index: 1;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border: 1px solid rgba(0, 0, 0, 0.86);
  border-radius: inherit;
  content: "";
  filter: blur(8px) contrast(3);
  opacity: 0.58;
  pointer-events: none;
  transform: translateX(-50%);
}

.glass-panel::after {
  position: absolute;
  inset: 0;
  z-index: 4;
  content: "";
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.72) 0%,
    transparent var(--lg-tr),
    transparent calc(100% - var(--lg-tr)),
    rgba(255, 255, 255, 0.62) 100%
  );
  filter: blur(3px) contrast(3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  mix-blend-mode: screen;
  opacity: 0.34;
  pointer-events: none;
  transition: opacity 180ms ease, filter 180ms ease;
}

.lg-overlay-bg,
.lg-filter-layer,
.lg-filter-box,
.lg-content {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lg-overlay-bg {
  pointer-events: none;
}

.lg-overlay-bg {
  inset: var(--lg-inner-gap, 7px);
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  box-shadow:
    inset 1px -1px 1px rgba(255, 255, 255, 0.08),
    inset -1px 1px 1px rgba(255, 255, 255, 0.04);
  filter: blur(1px);
}

.lg-overlay-bg::after {
  position: absolute;
  inset: 3px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: inherit;
  filter: blur(0.8px) contrast(2);
  opacity: 0;
  pointer-events: none;
}

.lg-filter-layer {
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.lg-filter-layer[hidden] {
  display: none;
}

.lg-filter-box {
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

.lg-filter-bg {
  position: absolute;
  pointer-events: none;
}

.glass-panel[data-liquid-distort] .lg-filter-box {
  overflow: hidden;
  mix-blend-mode: screen;
  transition: opacity 180ms ease;
  -webkit-mask-image: radial-gradient(
    ellipse 66% 60% at var(--liquid-x, 50%) var(--liquid-y, 50%),
    rgba(0, 0, 0, 0.13) 0 52%,
    rgba(0, 0, 0, 0.44) 68%,
    rgba(0, 0, 0, 0.82) 84%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 66% 60% at var(--liquid-x, 50%) var(--liquid-y, 50%),
    rgba(0, 0, 0, 0.13) 0 52%,
    rgba(0, 0, 0, 0.44) 68%,
    rgba(0, 0, 0, 0.82) 84%,
    #000 100%
  );
}

.glass-panel[data-liquid-distort].is-liquid-pressing .lg-filter-box {
  opacity: var(--liquid-press-opacity, var(--liquid-opacity, 0.18)) !important;
  transition: opacity 90ms ease;
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-mask-image: radial-gradient(
    ellipse var(--press-half-x, var(--press-half)) var(--press-half-y, var(--press-half)) at var(--liquid-px-x, 50%) var(--liquid-px-y, 50%),
    #000 0 58%,
    rgba(0, 0, 0, 0.68) 74%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse var(--press-half-x, var(--press-half)) var(--press-half-y, var(--press-half)) at var(--liquid-px-x, 50%) var(--liquid-px-y, 50%),
    #000 0 58%,
    rgba(0, 0, 0, 0.68) 74%,
    transparent 100%
  );
}

.lg-content {
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
}