.high-five {
  position: relative;
  overflow: hidden;
  margin: 0 0 3rem;
  padding: 2.5rem 1.5rem 1.5rem;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fbfbfb;
  text-align: center;
}
.high-five h4 {
  margin-bottom: .5rem;
}
.high-five p {
  margin-bottom: 1rem;
}
.high-five__button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 4.4rem;
  padding: 0 1.8rem;
  border: 1px solid #2789a8;
  border-radius: 999px;
  background: #fff;
  color: #17657f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.high-five__button:hover,
.high-five__button:focus-visible {
  background: #eaf8fc;
  color: #124e62;
}
.high-five__button:focus-visible {
  outline: 3px solid #72c9e3;
  outline-offset: 3px;
}
.high-five__button:active {
  transform: scale(.96);
}
.high-five__emoji {
  display: inline-block;
  font-size: 2rem;
  transform-origin: 70% 80%;
}
.high-five__button.is-celebrating .high-five__emoji {
  animation: high-five-slap .55s ease-in-out;
}
.high-five__status {
  min-height: 1.6rem;
  margin: 1rem 0 0;
  color: #555;
}
.high-five__count {
  margin: .25rem 0 0;
  color: #666;
  font-size: 1.3rem;
}
.high-five__burst {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  pointer-events: none;
  font-size: 2rem;
  animation: high-five-pop .9s ease-out forwards;
}
@keyframes high-five-slap {
  0%, 100% { transform: rotate(0) scale(1); }
  35% { transform: rotate(-25deg) scale(1.25); }
  65% { transform: rotate(18deg) scale(1.15); }
}
@keyframes high-five-pop {
  from { opacity: 1; transform: translate(-50%, 0) scale(.5); }
  to { opacity: 0; transform: translate(calc(-50% + var(--drift)), -100px) scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .high-five__button { transition: none; }
  .high-five__button.is-celebrating .high-five__emoji,
  .high-five__burst { animation: none; }
}