body.public-success-overlay-open{
  overflow:hidden;
}

.public-success-overlay{
  position:fixed;
  z-index:460;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(8,9,10,.70);
  backdrop-filter:blur(5px) saturate(88%);
  -webkit-backdrop-filter:blur(5px) saturate(88%);
  opacity:0;
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1);
  cursor:pointer;
}

.public-success-overlay.is-visible{
  opacity:1;
}

.public-success-overlay.is-leaving{
  opacity:0;
  transition-duration:900ms;
  pointer-events:none;
}

.public-success-card{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(560px,88vw);
  padding:18px 24px 18px 20px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(246,243,237,.94);
  color:#111214;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  opacity:0;
  transform:translate3d(0,10px,0) scale(.975);
  transition:
    opacity 560ms cubic-bezier(.22,.61,.36,1),
    transform 720ms cubic-bezier(.16,.72,.2,1);
}

.public-success-overlay.is-visible .public-success-card{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

.public-success-overlay.is-leaving .public-success-card{
  opacity:0;
  transform:translate3d(0,-5px,0) scale(.99);
  transition-duration:700ms;
}

.public-success-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid rgba(17,18,20,.22);
  border-radius:50%;
  font-size:11px;
}

.public-success-text{
  font-family:var(--display-font);
  font-size:clamp(19px,1.35vw,25px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.025em;
}

@media(max-width:560px){
  .public-success-card{
    gap:12px;
    padding:15px 20px 15px 16px;
  }
  .public-success-icon{
    width:29px;
    height:29px;
  }
}

@media(prefers-reduced-motion:reduce){
  .public-success-overlay,
  .public-success-card{
    transition:none!important;
    transform:none!important;
  }
}