.peach-slap {
  --slap-label-size: 12px;
  position: relative;
  display: block;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
}
.peach-slap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 54% 65%;
  pointer-events: none;
  user-select: none;
}
.hero-peach.peach-slap { position: absolute; pointer-events: auto; }
.peach-orbit .peach-slap { width: 230px; height: 230px; --slap-label-size: 19px; }
.demo-brand .peach-slap { width: 44px; height: 44px; padding: 8px; border-radius: 8px; --slap-label-size: 9px; }
.closing > .peach-slap { --slap-label-size: 17px; }
.peach-hand, .peach-impact, .peach-smack {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.peach-hand {
  z-index: 3;
  width: 74%;
  min-width: 30px;
  max-width: 96px;
  right: -20%;
  top: 6%;
}
.peach-hand svg { display: block; width: 100%; fill: var(--paper); stroke: var(--clay); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peach-impact { z-index: 2; width: 27%; height: 28%; left: 61%; top: 57%; transform: rotate(-20deg); }
.peach-impact svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--clay); stroke-width: 3; stroke-linecap: round; }
.peach-smack {
  z-index: 4;
  top: -2%;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  color: var(--clay);
  background: var(--canvas);
  padding: 1px 7px;
  border-radius: 5px;
  font-size: var(--slap-label-size);
  line-height: 1.6;
  font-weight: 700;
  white-space: nowrap;
}
.peach-slap.is-slapped .peach-impact { opacity: .6; }
.peach-slap.is-slapped .peach-smack { opacity: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) { .peach-slap:hover { filter: brightness(1.04); } }
@media (max-width: 850px) {
  .peach-orbit .peach-slap { width: 175px; height: 175px; }
  .closing > .peach-slap .peach-hand { right: 40%; }
}
@media (max-width: 620px) {
  .peach-orbit .peach-slap { width: 180px; height: 180px; }
  .peach-orbit .peach-hand { right: 20%; }
  .hero-peach.peach-slap { right: 16px; }
  .hero-peach .peach-hand { right: 75%; }
  .hero-caption span:last-child { padding-right: 88px; }
}
@media (prefers-reduced-motion: reduce) { .peach-slap:hover { filter: none; } }