:root {
  color-scheme: light;
  --stage-width: 640px;
  --stage-height: 1600px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  padding: 0;
}

body {
  display: grid;
  place-items: start center;
  overflow-x: hidden;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.page-preview {
  position: relative;
  width: min(100vw, var(--stage-width));
  min-height: 100vh;
}

.poster {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #211022;
  cursor: pointer;
}

.poster > img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-download {
  position: absolute;
  left: 50%;
  top: min(67.2vw, 430px);
  z-index: 10;
  width: min(100vw, var(--stage-width));
  pointer-events: none;
  transform: translateX(-50%);
}

.download-button {
  display: block;
  width: min(271px, 42.3vw);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.45));
  animation: buttonPulse 1.7s ease-in-out infinite;
}

.download-button img {
  display: block;
  width: 100%;
  height: auto;
}

.download-button:active { transform: scale(0.97); }

@keyframes buttonPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

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