:root {
  --night-1: #0d1a15;
  --night-2: #1c3a2d;
  --ivory: #fbf6e6;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 226, 160, .2), rgba(255, 226, 160, 0) 34%),
    radial-gradient(ellipse at 50% 40%, var(--night-2), var(--night-1) 70%);
  overflow: hidden;
}

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.scene {
  --h: min(80vh, 125vw);
  --h: min(80dvh, 125vw);
  display: block;
  height: var(--h);
  width: calc(var(--h) * 400 / 560);
  max-width: 100%;
  overflow: visible;
  flex: none;
}

.note {
  margin: 0;
  font: italic 500 18px / 1 "Cormorant Garamond", Georgia, serif;
  font-size: clamp(14px, 4.5vw, 22px);
  letter-spacing: .04em;
  text-align: center;
  color: var(--ivory);
}

/* Everything below starts hidden; script.js (inline in index.html)
   drives the animation frame by frame, which behaves the same on
   every mobile browser (no CSS transforms on SVG elements needed). */
.p, .l, .fall, .heart, .motes circle, .note { opacity: 0; }
.motes circle { fill: #ffe9b8; }

.stem {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}