/* A decorative skin: the original buttons, links, labels and layout stay intact. */
.liquid-metal-button {
  --metal-face:linear-gradient(180deg, #202020 0%, #000 100%);
  --metal-ink:#ededf0;
  --metal-ripple:255,255,255;
  --metal-text-shadow:0 1px 2px rgba(0,0,0,.22);
  --metal-rim:linear-gradient(125deg, #55565b 0%, #d6d7de 17%, #777b86 31%, #f6f7fb 45%, #41434b 59%, #bfc1cd 78%, #70737c 100%);
}
html :is(#ei-enter, #joinContinue, #joinNext, #sendEmail).liquid-metal-button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:transparent;
  border-radius:100px;
  background:var(--metal-rim);
  color:var(--metal-ink)!important;
  text-shadow:var(--metal-text-shadow);
  box-shadow:0 0 0 1px rgba(0,0,0,.3), 0 18px 14px rgba(0,0,0,.035), 0 9px 9px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.14);
  transform:translateY(0) scale(1);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
html[data-theme=light] .liquid-metal-button {
  --metal-face:linear-gradient(180deg, #fff 0%, #e5e7eb 100%);
  --metal-ink:#252931;
  --metal-ripple:87,107,144;
  --metal-text-shadow:0 1px 1px rgba(255,255,255,.8);
}
/* The 1px native border plus 1px inset leaves a 2px liquid-metal rim. */
.liquid-metal-button::before {
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:inherit;
  background:var(--metal-face);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  pointer-events:none;
}
.liquid-metal-button > .liquid-metal-surface {
  position:absolute;
  inset:-1px;
  z-index:-2;
  display:block;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
.liquid-metal-surface canvas {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  border-radius:inherit;
  pointer-events:none;
}
@media(hover:hover) {
  html :is(#ei-enter, #joinContinue, #joinNext, #sendEmail).liquid-metal-button:hover:not(:disabled) {
    background:var(--metal-rim);
    border-color:transparent;
    transform:translateY(-1px);
    box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 12px 6px rgba(0,0,0,.05), 0 8px 5px rgba(0,0,0,.1), 0 4px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
  }
}
html :is(#ei-enter, #joinContinue, #joinNext, #sendEmail).liquid-metal-button:active:not(:disabled) {
  transform:translateY(1px) scale(.98);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
}
.liquid-metal-button:active::before {
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4), inset 0 1px 2px rgba(0,0,0,.3);
}
.liquid-metal-button:focus-visible {
  outline:2px solid var(--site-accent, #d9e8ff);
  outline-offset:5px;
}
#ei-intro .liquid-metal-button:focus-visible {outline-color:#d9e8ff}
.liquid-metal-button > .liquid-metal-ripple {
  position:absolute;
  z-index:2;
  display:block;
  width:80px;
  height:80px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(var(--metal-ripple),.4), rgba(var(--metal-ripple),0) 70%);
  animation:liquidMetalRipple .6s ease-out both;
}
@keyframes liquidMetalRipple {
  from {transform:translate(-50%,-50%) scale(0);opacity:.6}
  to {transform:translate(-50%,-50%) scale(4);opacity:0}
}
@media(prefers-reduced-motion:reduce) {
  html :is(#ei-enter, #joinContinue, #joinNext, #sendEmail).liquid-metal-button {transition:none!important;transform:none!important}
  .liquid-metal-button > .liquid-metal-ripple {display:none;animation:none}
}