:root {
  color-scheme: only light;
  background: #19aee6;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  background: #19aee6;
}

.duck-page {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.duck-page picture,
.duck-poster,
.play-button img {
  display: block;
}

.duck-poster {
  width: 100%;
  height: auto;
}

.play-button {
  --button-lift: 0px;
  --button-scale: 1;
  --button-tilt: 0deg;
  position: fixed;
  z-index: 10;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%;
  width: min(31.62vw, 607px);
  transform: translateX(-50%) translateY(var(--button-lift)) rotate(var(--button-tilt)) scale(var(--button-scale));
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.play-button img {
  width: 100%;
  height: auto;
}

.play-button:hover {
  --button-scale: 1.02;
  filter: brightness(1.06);
}

.play-button:active {
  --button-scale: .98;
}

.play-button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

.play-button.is-idle img {
  animation: playful-invite 3.2s ease-in-out infinite;
  transform-origin: 50% 70%;
}

.play-button.is-scrolling img {
  animation: none;
}

@keyframes playful-invite {
  0%, 60%, 100% { transform: translateY(0) rotate(0) scale(1); }
  66% { transform: translateY(-3px) rotate(-1.8deg) scale(1.01); }
  71% { transform: translateY(-9px) rotate(2.2deg) scale(1.035); }
  76% { transform: translateY(-2px) rotate(-1.3deg) scale(1.01); }
  81% { transform: translateY(-5px) rotate(1deg) scale(1.02); }
  87% { transform: translateY(0) rotate(0) scale(1); }
}

@media (max-width: 768px) {
  .play-button {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
    width: min(56.2vw, 360px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-button {
    transition: none;
  }

  .play-button.is-idle img {
    animation: none;
  }
}