:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff8f2;
  color: #352b32;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.page {
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 56px;
  text-align: center;
}
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -0.04em; }
.intro { margin: 8px 0 26px; color: #766875; }
.stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 22px;
  background: #e8dcd4;
  box-shadow: 0 18px 50px #59434a24;
  transform-origin: 50% 85%;
  animation: group-hop 1s ease-in-out infinite;
}
.stage img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes group-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  18% { transform: translateY(-13px) rotate(-0.35deg); }
  38% { transform: translateY(0) rotate(0deg); }
  58% { transform: translateY(-19px) rotate(0.35deg); }
  78% { transform: translateY(0) rotate(0deg); }
}
.sparkle {
  position: absolute;
  color: #fff5a8;
  font-size: clamp(22px, 4vw, 38px);
  text-shadow: 0 2px 8px #65465b80;
  pointer-events: none;
  animation: twinkle 1s ease-in-out infinite alternate;
}
.sparkle-one { top: 13%; left: 16%; }
.sparkle-two { top: 25%; right: 13%; animation-delay: .45s; }
@keyframes twinkle {
  from { opacity: .25; transform: scale(.75) rotate(-15deg); }
  to { opacity: 1; transform: scale(1.15) rotate(15deg); }
}
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 25px;
}
button {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: #9b5d89;
  color: white;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button:hover { background: #804a70; }
button:focus-visible, input:focus-visible { outline: 3px solid #e5a8d3; outline-offset: 3px; }
input { accent-color: #9b5d89; }
.hint { color: #766875; font-size: .9rem; margin-top: 14px; }
.stage.paused, .stage.paused .sparkle { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .stage, .sparkle { animation: none; }
}