.liquid-surface {
  --liquid-plane-skew-x: 0deg;
  --liquid-plane-tilt-x: 0deg;
  --liquid-plane-rotate-z: 0deg;
  --liquid-plane-y: 0px;
  --liquid-plane-scale-x: 1;
  --liquid-plane-scale-y: 1;
  --liquid-content-x: 0px;
  --liquid-content-y: 0px;
  --liquid-content-rotate-z: 0deg;
  --liquid-pointer-x: 50%;
  --liquid-pointer-y: 50%;
  --liquid-sheen-x: 0%;
  --liquid-lens-x: 0px;
  --liquid-lens-width: 68px;
  --liquid-lens-scale-x: 1;
  --liquid-lens-scale-y: 1;
  --liquid-lens-y: 0px;
  --liquid-lens-pointer-x: 50%;
  --liquid-lens-pointer-y: 50%;
  --liquid-lens-tail-x: 34px;
  --liquid-performance-blur: 12px;
  position: relative;
  isolation: isolate;
  perspective: 1400px;
}

.liquid-surface__plane {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transform:
    translate3d(0, var(--liquid-plane-y), 0)
    rotateX(var(--liquid-plane-tilt-x))
    rotateZ(var(--liquid-plane-rotate-z))
    skewX(var(--liquid-plane-skew-x))
    scaleX(var(--liquid-plane-scale-x))
    scaleY(var(--liquid-plane-scale-y));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.liquid-surface__material {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.13) 48%, rgba(226, 238, 237, 0.15)),
    rgba(246, 249, 248, 0.14);
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 0.96) inset,
    0 -1px 0 rgba(70, 89, 87, 0.15) inset,
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 20px 54px rgba(55, 73, 71, 0.14);
}

.liquid-surface__content {
  position: relative;
  z-index: 4;
  transform: none;
}

.liquid-surface__content [data-liquid-visual] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform:
    translate3d(var(--liquid-content-x), var(--liquid-content-y), 18px)
    rotateZ(var(--liquid-content-rotate-z));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.liquid-surface__content .brand-visual,
.liquid-surface__content .utility-visual {
  gap: inherit;
}

.liquid-surface__rim,
.liquid-surface__sheen,
.liquid-surface__pressure,
.liquid-surface__lens,
.liquid-surface__lens-tail {
  position: absolute;
  pointer-events: none;
}

.liquid-surface__rim {
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background:
    radial-gradient(112px 76px at var(--liquid-pointer-x) var(--liquid-pointer-y), rgba(255, 255, 255, 0.92), rgba(178, 222, 219, 0.28) 38%, transparent 74%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.06) 44%, rgba(126, 180, 177, 0.17));
  opacity: 0.62;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.liquid-surface__sheen {
  inset: -68%;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.9) 49%, transparent 61%);
  filter: blur(4px);
  opacity: 0.54;
  transform: translate3d(var(--liquid-sheen-x), 0, 0) rotate(var(--liquid-plane-skew-x));
  mix-blend-mode: screen;
}

.liquid-surface__pressure {
  z-index: 3;
  width: 12px;
  height: 12px;
  left: var(--liquid-pointer-x);
  top: var(--liquid-pointer-y);
  margin: -6px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  opacity: 0;
}

.liquid-surface__pressure.is-active {
  animation: liquid-pressure-wave 580ms cubic-bezier(0.15, 0.74, 0.16, 1);
}

@keyframes liquid-pressure-wave {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(18); }
}

.liquid-surface__lens {
  z-index: 2;
  top: 12px;
  left: 0;
  width: var(--liquid-lens-width);
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.97);
  border-radius: 17px;
  background:
    radial-gradient(circle at var(--liquid-lens-pointer-x) var(--liquid-lens-pointer-y), rgba(255, 255, 255, 0.98), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(181, 220, 208, 0.28));
  box-shadow:
    0 9px 20px rgba(43, 64, 57, 0.16),
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 -1px 0 rgba(71, 111, 98, 0.1) inset;
  backdrop-filter: blur(2px) saturate(1.36);
  -webkit-backdrop-filter: blur(2px) saturate(1.36);
  opacity: 1;
  transform:
    translate3d(var(--liquid-lens-x), var(--liquid-lens-y), 12px)
    scaleX(var(--liquid-lens-scale-x))
    scaleY(var(--liquid-lens-scale-y));
  transform-origin: center;
  will-change: transform, width;
}

.liquid-surface__lens::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: inherit;
}

.liquid-surface__lens-tail {
  z-index: 1;
  top: 25px;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(243, 250, 247, 0.8);
  box-shadow: 0 4px 9px rgba(61, 91, 80, 0.1);
  opacity: 0.48;
  transform: translate3d(calc(var(--liquid-lens-tail-x) - 8px), 0, 5px);
  will-change: transform;
}

.liquid-surface[data-liquid-lens-visible="false"] .liquid-surface__lens,
.liquid-surface[data-liquid-lens-visible="false"] .liquid-surface__lens-tail {
  opacity: 0;
}

.liquid-surface .nav-links {
  background: rgba(255, 255, 255, 0.18);
}

.liquid-surface .nav-links a:hover,
.liquid-surface .nav-links a:focus-visible {
  color: var(--ink);
  background: transparent;
  transform: none;
}

.liquid-surface[data-liquid-variant="subtle"] .liquid-surface__material {
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 12px 32px rgba(55, 73, 71, 0.09);
}

.liquid-surface[data-liquid-variant="strong"] .liquid-surface__material {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16)), rgba(241, 247, 246, 0.18);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.98) inset, 0 -1px 0 rgba(70, 89, 87, 0.18) inset, 0 24px 64px rgba(55, 73, 71, 0.17);
}

.liquid-surface[data-liquid-mode="performance"] .liquid-surface__material {
  border-color: rgba(255, 255, 255, 0.76);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.44)), rgba(241, 245, 244, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 -1px 0 rgba(46, 62, 60, 0.1) inset, 0 18px 50px rgba(57, 73, 72, 0.12);
  backdrop-filter: blur(var(--liquid-performance-blur)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--liquid-performance-blur)) saturate(1.12);
}

.liquid-surface[data-liquid-mode="performance"] .liquid-surface__lens,
.liquid-surface[data-liquid-mode="performance"] .liquid-surface__lens-tail,
.liquid-surface[data-liquid-mode="performance"] .liquid-surface__pressure {
  display: none;
}

.liquid-surface[data-liquid-mode="performance"] .liquid-surface__sheen {
  opacity: 0;
}

.liquid-surface[data-liquid-mode="performance"] .liquid-surface__plane,
.liquid-surface[data-liquid-mode="performance"] .liquid-surface__content [data-liquid-visual] {
  transform: none !important;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-surface__plane,
  .liquid-surface__content [data-liquid-visual] {
    transform: none !important;
    will-change: auto;
  }

  .liquid-surface__pressure,
  .liquid-surface__lens-tail {
    display: none;
  }

  .liquid-surface__lens {
    transition: none;
  }
}