/* Liquid metal button: dark glass face, chrome rim drawn by WebGL.
   Without JS/WebGL the conic-gradient rim below is the complete design. */
.liquid-button {
  --lm-rim: 3px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 34px;
  border-radius: 999px;
  color: #f4f7fb;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  background: #14181f;
  box-shadow: 0 14px 28px -14px #0b1220a6, 0 2px 4px #0b122033;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.liquid-button::before { /* static rim / fallback */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  padding: var(--lm-rim);
  background: conic-gradient(from 210deg, #8995a6, #f4f8ff, #1a2130, #dbe6f5, #fff, #6f7f95, #0d131d, #eaf3ff, #8995a6);
  -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);
}
.liquid-button::after { /* glass sheen on the face */
  content: '';
  position: absolute;
  inset: var(--lm-rim);
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% -20%, #ffffff26, transparent 55%);
  pointer-events: none;
}
.liquid-button canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.liquid-button[data-webgl]::before { opacity: 0; }
.liquid-button:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px #0b1220bf, 0 2px 4px #0b122033; }
.liquid-button:active { transform: translateY(1px) scale(.988); }
.liquid-button:focus-visible { outline: 2px solid #749ee8; outline-offset: 5px; }
@media (max-width: 720px) { .liquid-button { padding: 17px 30px; font-size: 15px; } }