:root {
  color-scheme: light;
  --charcoal: #252321;
  --cream: #f8f0e4;
  --paper: #fffaf2;
  --blush: #e8aaa0;
  --coral: #c72f43;
  --muted: #80756c;
  --line: rgba(37, 35, 33, 0.14);
  --shadow: 0 18px 50px rgba(68, 43, 32, 0.12);
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
  background: var(--cream);
  color: var(--charcoal);
}

* { box-sizing: border-box; }

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

body {
  background: var(--cream);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.story-deck {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.story-deck img {
  -webkit-user-drag: none;
  user-drag: none;
}

.global-progress {
  position: absolute;
  z-index: 25;
  top: max(.65rem, env(safe-area-inset-top));
  right: .75rem;
  left: .75rem;
  display: flex;
  gap: .2rem;
  pointer-events: none;
}

.global-progress.is-hidden { display: none; }

.global-progress__segment {
  flex: 1 1 0;
  min-width: 0;
  height: .18rem;
  border-radius: 999px;
  background: rgba(37, 35, 33, .14);
  opacity: .65;
  transition: background-color .25s ease, opacity .25s ease;
}

.global-progress__segment.is-complete {
  background: rgba(199, 47, 67, .55);
  opacity: 1;
}

.global-progress__segment.is-current {
  background: var(--coral);
  opacity: 1;
}

.story-rail {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
}

.story-rail::-webkit-scrollbar { display: none; }

.story-rail.has-open-letter { touch-action: pan-y; }

.story-deck.has-open-letter .edge-target { pointer-events: none; }

.story-card {
  position: relative;
  display: grid;
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  padding: 2rem 1.5rem;
  place-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story-card--chapter-1 { background: #f8f0e4; }
.story-card--chapter-2 { background: #f5e5d9; }
.story-card--chapter-3 { background: #f4eee6; }
.story-card--chapter-4 { background: #f3e2e0; }
.story-card--chapter-5 { background: #eee5d7; }
.story-card--chapter-6 { background: #f8f0e4; }
.story-card--chapter-9 { background: #f5e5d9; }
.story-card--chapter-10 { background: #f8f0e4; }

.story-card--chapter-1 {
  align-items: start;
  padding-top: clamp(3.5rem, 10svh, 7rem);
}

.story-card--chapter-2 {
  align-items: start;
  padding-top: clamp(3.5rem, 10svh, 7rem);
  touch-action: pan-y;
}

.story-card--chapter-2 .chapter-two-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.story-card--chapter-2 .chapter-two-message {
  position: absolute;
  top: clamp(3.5rem, 10svh, 7rem);
  right: 1.5rem;
  left: 1.5rem;
  width: min(100%, 24rem);
  margin: 0 auto;
}

.story-card--chapter-4 {
  align-items: stretch;
  padding-top: clamp(3rem, 8svh, 5.5rem);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  overflow: hidden;
  touch-action: pan-y;
}

.story-card--chapter-3 {
  align-items: stretch;
  overflow: hidden;
  touch-action: pan-y;
}

.story-card--chapter-5 {
  padding: 0;
  overflow: hidden;
  background: #eee8df;
}

.chapter-one-content {
  width: min(100%, 24rem);
  text-align: center;
}

.chapter-one-content .polaroid {
  transform: translateY(-1.35rem) rotate(2deg);
}

.chapter-one-message {
  margin: 0 auto 6rem;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  line-height: 1.25;
  transform: rotate(-2deg);
}

.chapter-two-content {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  text-align: center;
}

.chapter-two-message {
  margin: 0 auto;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  line-height: 1.25;
  transform: rotate(-2deg);
}

.reasons-content {
  width: min(100%, 26rem);
}

.reasons-envelope-scene {
  position: relative;
  width: min(100%, 23rem);
  height: clamp(24rem, 82vw, 29rem);
  margin: 2.75rem auto 0;
  isolation: isolate;
}

.story-card--chapter-2 .reasons-envelope-scene {
  position: absolute;
  top: calc(50% + 2.25rem);
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.story-card--chapter-2::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(44, 27, 34, .13);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.story-card--chapter-2.is-reading-reasons::before { opacity: 1; }
.story-card--chapter-2.is-reading-reasons .chapter-two-message { opacity: .55; }

.reason-card-stack {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.reason-carousel {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
}

.reason-card {
  --fan-x: 0rem;
  --fan-y: -2rem;
  --fan-rotate: 0deg;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  left: 50%;
  top: 50%;
  width: min(74vw, 17rem);
  min-height: 13rem;
  padding: 1rem .95rem .9rem;
  border: 1px solid rgba(142, 39, 66, .2);
  border-radius: .28rem;
  background: linear-gradient(145deg, #fffdf8, #f8e9e5);
  box-shadow: 0 .7rem 1.3rem rgba(86, 42, 49, .15);
  color: #6e293a;
  cursor: pointer;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(1.35rem, 5.8vw, 1.6rem);
  line-height: 1.12;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 3rem) rotate(0deg) scale(.72);
  transition: opacity .5s ease, transform .85s cubic-bezier(.2, .85, .25, 1), box-shadow .25s ease;
}

.reason-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.reason-card-kicker {
  color: rgba(142, 39, 66, .62);
  font-family: inherit;
  font-size: .72rem;
  letter-spacing: 0;
  text-transform: lowercase;
}

.reason-card-number {
  color: rgba(142, 39, 66, .58);
  font-family: inherit;
  font-size: .72rem;
  letter-spacing: 0;
}

.reason-card--one { --fan-x: -6.6rem; --fan-y: -1rem; --fan-rotate: -14deg; }
.reason-card--two { --fan-x: -3.5rem; --fan-y: -1.7rem; --fan-rotate: -7deg; }
.reason-card--three { --fan-x: 0rem; --fan-y: -2.5rem; --fan-rotate: 1deg; }
.reason-card--four { --fan-x: 3.5rem; --fan-y: -1.7rem; --fan-rotate: 7deg; }
.reason-card--five { --fan-x: 6.6rem; --fan-y: -1rem; --fan-rotate: 14deg; }

.reasons-envelope-scene.is-open .reason-card {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3rem) rotate(0deg) scale(.72);
}

.reasons-envelope-scene.is-open .reason-card.is-active,
.reasons-envelope-scene.is-open .reason-card.is-previous,
.reasons-envelope-scene.is-open .reason-card.is-next {
  opacity: 1;
  pointer-events: auto;
}

.reasons-envelope-scene.is-open .reason-card.is-active {
  z-index: 8;
  box-shadow: 0 1.1rem 2rem rgba(86, 42, 49, .24);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.reasons-envelope-scene.is-open .reason-card.is-previous {
  z-index: 1;
  transform: translate(calc(-50% - 7.6rem), -50%) rotate(-7deg) scale(.72);
}

.reasons-envelope-scene.is-open .reason-card.is-next {
  z-index: 1;
  transform: translate(calc(-50% + 7.6rem), -50%) rotate(7deg) scale(.72);
}

.reasons-envelope-scene.is-open .reason-card.is-exiting-left {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% - 7.6rem), -50%) rotate(-7deg) scale(.72);
}

.reasons-envelope-scene.is-open .reason-card.is-exiting-right {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + 7.6rem), -50%) rotate(7deg) scale(.72);
}

.reason-continue {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  z-index: 20;
  min-width: 6.5rem;
  padding: .6rem 1.15rem;
  border: 1px solid rgba(142, 39, 66, .3);
  border-radius: 999px;
  background: rgba(255, 250, 246, .86);
  box-shadow: 0 .4rem 1rem rgba(86, 42, 49, .12);
  color: #8e2742;
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(.4rem);
  transition: opacity .35s ease, transform .35s ease;
}

.story-card--chapter-2.is-reading-reasons .reason-continue {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.story-card.is-resetting .love-envelope,
.story-card.is-resetting .envelope-lid,
.story-card.is-resetting .envelope-seal,
.story-card.is-resetting .reason-card,
.story-card.is-resetting .reason-continue {
  transition: none !important;
}

.reason-continue:focus-visible {
  outline: 2px solid rgba(142, 39, 66, .5);
  outline-offset: 3px;
}

.reasons-envelope-scene.has-carousel .love-envelope {
  opacity: .48;
  filter: brightness(.72) saturate(.8);
  transform: translateY(calc(-50% + 3rem)) scale(.86);
  transition: opacity .6s ease, filter .6s ease, transform .8s cubic-bezier(.2, .8, .25, 1);
}

.love-envelope {
  position: absolute;
  right: 0;
  top: 50%;
  left: 0;
  z-index: 3;
  width: 100%;
  aspect-ratio: 360 / 250;
  transform: translateY(-50%);
}

.envelope-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.envelope-body,
.envelope-pocket,
.envelope-lid {
  stroke: rgba(142, 39, 66, .3);
  stroke-width: 1.5;
}

.envelope-pocket-line {
  stroke: rgba(142, 39, 66, .18);
  stroke-width: 1.5;
}

.envelope-lid {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform .85s cubic-bezier(.2, .8, .25, 1), filter .85s ease;
}

.envelope-seal {
  position: absolute;
  top: 52%;
  left: 50%;
  display: grid;
  width: 3.8rem;
  height: 3.8rem;
  place-items: center;
  border: 3px solid rgba(255, 244, 244, .76);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #d94f6d, #aa173f 68%, #821332);
  box-shadow: 0 .7rem 1rem rgba(112, 26, 53, .28), inset 0 2px 4px rgba(255, 255, 255, .28);
  color: #fff8f4;
  font-family: Georgia, serif;
  font-size: 1.75rem;
  transform: translate(-50%, -50%);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2, .9, .25, 1);
}

.envelope-trigger {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.envelope-trigger:focus-visible {
  outline: 3px solid rgba(142, 39, 66, .5);
  outline-offset: .35rem;
}

.reasons-envelope-scene.is-open .envelope-lid {
  filter: brightness(.92);
  transform: rotateX(180deg);
}

.reasons-envelope-scene.is-open .envelope-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7) rotate(12deg);
}

.envelope-prompt {
  position: absolute;
  right: 0;
  top: calc(100% + .65rem);
  left: 0;
  margin: 0;
  color: rgba(110, 41, 58, .68);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1rem;
  transform: rotate(-2deg);
  transition: opacity .3s ease;
}

.reasons-envelope-scene.is-open .envelope-prompt { opacity: 0; }

.polaroid {
  position: relative;
  width: min(82vw, 20rem);
  margin: 0 auto;
  padding: .7rem .7rem 2.6rem;
  background: #fffdf8;
  box-shadow: 0 1rem 2rem rgba(68, 43, 32, .17), 0 2px 4px rgba(68, 43, 32, .1);
  transform: rotate(2deg);
}

.polaroid-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background:
    linear-gradient(145deg, rgba(232, 170, 160, .55), rgba(238, 229, 215, .78)),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 7px);
  color: rgba(37, 35, 33, .52);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1rem;
}

.polaroid--placeholder { color: var(--muted); }

.gummy-bear-magnet {
  position: absolute;
  top: -1.44rem;
  left: 50%;
  z-index: 2;
  width: 2.88rem;
  height: auto;
  pointer-events: none;
  transform: translateX(-50%) rotate(8deg);
  filter: drop-shadow(0 .25rem .2rem rgba(68, 43, 32, .2));
}

.chapter-placeholder { width: min(100%, 24rem); text-align: center; }
.chapter-label { color: var(--coral); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.chapter-placeholder h1 { margin: 1rem 0; font-size: clamp(2.6rem, 12vw, 4.5rem); line-height: .95; }
.chapter-placeholder p { max-width: 18rem; margin: 0 auto; color: var(--muted); font-size: 1.1rem; line-height: 1.45; }
.placeholder-note { display: block; margin-top: 2.5rem; color: rgba(128, 117, 108, .58); font-family: "Bradley Hand", "Comic Sans MS", cursive; font-size: 1.15rem; transform: rotate(-3deg); }

.vanilla-instagram-content {
  position: relative;
  width: min(100%, 25rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.vanilla-instagram-carousel {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  touch-action: pan-y;
}

.vanilla-instagram-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(112%);
  transition: opacity .35s ease, transform .65s cubic-bezier(.2, .85, .25, 1);
}

.vanilla-instagram-slide.is-active,
.vanilla-instagram-slide.is-previous,
.vanilla-instagram-slide.is-next {
  pointer-events: auto;
}

.vanilla-instagram-slide.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}

.vanilla-instagram-slide.is-previous,
.vanilla-instagram-slide.is-next {
  z-index: 1;
  opacity: .12;
}

.vanilla-instagram-slide.is-previous { transform: translateX(-112%); }

.story-card--instagram-page .vanilla-instagram-slide {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  flex: 1;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}

.story-card--instagram-page .vanilla-instagram-slide--intro {
  justify-content: flex-start;
  padding: clamp(2.5rem, 8svh, 5rem) .5rem 1rem;
}

.story-card--instagram-page .vanilla-instagram-title {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  margin: 0 auto 2.5rem;
}

.story-card--instagram-page .vanilla-first-messages {
  flex: 0 1 auto;
  height: min(54svh, 28rem);
  margin: 0 auto;
}

.story-card--instagram-page-1 .vanilla-instagram-slide--intro {
  padding-top: clamp(1.5rem, 4svh, 3rem);
}

.story-card--instagram-page-1 .vanilla-instagram-title {
  margin-bottom: 2.25rem;
  font-size: clamp(2.05rem, 9.2vw, 3.55rem);
}

.vanilla-instagram-slide--intro {
  padding-top: clamp(2.5rem, 8svh, 5rem);
}

.vanilla-instagram-slide--days {
  justify-content: center;
  padding: 1.5rem .5rem 3rem;
}

.vanilla-instagram-slide--miss-you {
  justify-content: center;
  padding: 1.5rem .5rem 3rem;
}

.vanilla-instagram-title {
  margin: 0 0 .6rem;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.7rem, 12vw, 4.5rem);
  font-weight: 400;
  line-height: .95;
  transform: rotate(-2deg);
}

.vanilla-instagram-intro {
  max-width: 18rem;
  margin: 0 auto 1.15rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

.vanilla-first-messages {
  width: min(100%, 20rem);
  height: min(60svh, 31rem);
  margin: .55rem auto 0;
  padding: .55rem .55rem .9rem;
  border: 1px solid rgba(37, 35, 33, .1);
  background: var(--paper);
  box-shadow: 0 1.25rem 2.5rem rgba(68, 43, 32, .16);
  transform: rotate(-1.5deg);
}

.vanilla-first-messages img {
  display: block;
  width: 100%;
  height: calc(100% - 1.15rem);
  border-radius: .12rem;
  object-fit: cover;
  object-position: top center;
}

.vanilla-first-messages figcaption {
  margin-top: .45rem;
  color: rgba(75, 56, 49, .72);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.05rem;
  transform: rotate(-1deg);
}

.vanilla-intro-note {
  margin-top: auto;
  margin-bottom: max(1.25rem, env(safe-area-inset-bottom));
  color: rgba(128, 117, 108, .78);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1rem;
  transform: rotate(-2deg);
}

.vanilla-stat-kicker {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
}

.vanilla-days-value {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(4rem, 19vw, 6rem);
  font-weight: 400;
  line-height: .85;
  transform: rotate(-3deg);
}

.vanilla-days-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vanilla-days-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

.vanilla-days-label {
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
}

.vanilla-stat-commentary {
  max-width: 17rem;
  margin: 0 auto 2rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

.vanilla-stat-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
  width: min(100%, 23rem);
  margin-top: 2.75rem;
}

.vanilla-stat-pair div {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: .75rem;
  padding: 0;
}

.vanilla-stat-pair strong {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(3.2rem, 15vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

.vanilla-stat-pair span {
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
  text-align: left;
}

.vanilla-days-note {
  position: absolute;
  right: .75rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: .75rem;
  margin: 0;
  color: rgba(128, 117, 108, .72);
  font-size: .75rem;
  line-height: 1.3;
  text-align: center;
}

.vanilla-miss-you-intro {
  margin: 0 0 .35rem;
  color: var(--muted);
  font-size: 1rem;
}

.vanilla-miss-you-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vanilla-miss-you-quote {
  margin: 0;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.2rem, 10vw, 3.5rem);
  line-height: 1;
  transform: rotate(-3deg);
}

.vanilla-miss-you-value {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(6.5rem, 30vw, 10rem);
  font-weight: 400;
  line-height: .75;
  transform: rotate(2deg);
}

.vanilla-miss-you-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
}

.vanilla-miss-you-label {
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
}

.vanilla-miss-you-sprinkles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vanilla-miss-you-sprinkles span {
  position: absolute;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: clamp(1rem, 4.5vw, 1.45rem);
  line-height: 1;
  opacity: 0;
}

.vanilla-miss-you-sprinkles.is-popping span {
  transform-origin: center;
  animation: miss-you-sprinkle-pop .28s cubic-bezier(.2, .9, .3, 1) var(--pop-delay) both;
}

@keyframes miss-you-sprinkle-pop {
  from {
    opacity: 0;
    filter: blur(3px);
    scale: .12;
  }
  to {
    opacity: .56;
    filter: blur(0);
    scale: 1;
  }
}

.vanilla-miss-you-sprinkles span:nth-child(1) { top: 5%; left: 10%; transform: rotate(-18deg) scale(.9); }
.vanilla-miss-you-sprinkles span:nth-child(2) { top: 9%; left: 37%; transform: rotate(11deg) scale(.75); }
.vanilla-miss-you-sprinkles span:nth-child(3) { top: 6%; right: 13%; transform: rotate(21deg) scale(1.05); }
.vanilla-miss-you-sprinkles span:nth-child(4) { top: 17%; left: 23%; transform: rotate(28deg) scale(.8); }
.vanilla-miss-you-sprinkles span:nth-child(5) { top: 14%; right: 34%; transform: rotate(-15deg) scale(.95); }
.vanilla-miss-you-sprinkles span:nth-child(6) { top: 22%; right: 8%; transform: rotate(17deg) scale(.85); }
.vanilla-miss-you-sprinkles span:nth-child(7) { top: 32%; left: 6%; transform: rotate(-13deg) scale(1); }
.vanilla-miss-you-sprinkles span:nth-child(8) { top: 39%; right: 5%; transform: rotate(24deg) scale(.8); }
.vanilla-miss-you-sprinkles span:nth-child(9) { top: 48%; left: 13%; transform: rotate(9deg) scale(.78); }
.vanilla-miss-you-sprinkles span:nth-child(10) { top: 55%; right: 11%; transform: rotate(-19deg) scale(1.05); }
.vanilla-miss-you-sprinkles span:nth-child(11) { top: 63%; left: 6%; transform: rotate(16deg) scale(.82); }
.vanilla-miss-you-sprinkles span:nth-child(12) { top: 66%; right: 4%; transform: rotate(-11deg) scale(.92); }
.vanilla-miss-you-sprinkles span:nth-child(13) { top: 72%; left: 18%; transform: rotate(-24deg) scale(1.02); }
.vanilla-miss-you-sprinkles span:nth-child(14) { top: 76%; left: 47%; transform: rotate(19deg) scale(.78); }
.vanilla-miss-you-sprinkles span:nth-child(15) { top: 73%; right: 24%; transform: rotate(-8deg) scale(1.08); }
.vanilla-miss-you-sprinkles span:nth-child(16) { top: 84%; left: 8%; transform: rotate(22deg) scale(.86); }
.vanilla-miss-you-sprinkles span:nth-child(17) { top: 88%; left: 34%; transform: rotate(-17deg) scale(1); }
.vanilla-miss-you-sprinkles span:nth-child(18) { top: 83%; right: 13%; transform: rotate(14deg) scale(.82); }
.vanilla-miss-you-sprinkles span:nth-child(19) { top: 94%; right: 35%; transform: rotate(-22deg) scale(.92); }
.vanilla-miss-you-sprinkles span:nth-child(20) { top: 91%; right: 6%; transform: rotate(13deg) scale(1.06); }
.vanilla-miss-you-sprinkles span:nth-child(21) { top: 3%; left: 54%; transform: rotate(-9deg) scale(.84); }
.vanilla-miss-you-sprinkles span:nth-child(22) { top: 13%; left: 5%; transform: rotate(24deg) scale(.96); }
.vanilla-miss-you-sprinkles span:nth-child(23) { top: 25%; left: 29%; transform: rotate(-27deg) scale(.78); }
.vanilla-miss-you-sprinkles span:nth-child(24) { top: 28%; right: 25%; transform: rotate(8deg) scale(.9); }
.vanilla-miss-you-sprinkles span:nth-child(25) { top: 36%; left: 25%; transform: rotate(18deg) scale(1.02); }
.vanilla-miss-you-sprinkles span:nth-child(26) { top: 42%; right: 24%; transform: rotate(-25deg) scale(.78); }
.vanilla-miss-you-sprinkles span:nth-child(27) { top: 53%; left: 27%; transform: rotate(7deg) scale(.9); }
.vanilla-miss-you-sprinkles span:nth-child(28) { top: 59%; right: 27%; transform: rotate(23deg) scale(1.02); }
.vanilla-miss-you-sprinkles span:nth-child(29) { top: 69%; left: 31%; transform: rotate(-14deg) scale(.82); }
.vanilla-miss-you-sprinkles span:nth-child(30) { top: 79%; right: 39%; transform: rotate(19deg) scale(.94); }
}

.vanilla-instagram-slide--voice-notes {
  justify-content: center;
  padding: 1rem .5rem 2rem;
}

.story-card--instagram-page .vanilla-instagram-slide--voice-notes {
  display: grid;
  align-content: center;
  justify-items: center;
}

.vanilla-voice-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vanilla-voice-intro {
  margin: 0 0 .35rem;
  color: var(--muted);
  font-size: 1rem;
}

.vanilla-voice-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.vanilla-voice-title {
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(3.8rem, 18vw, 5.8rem);
  font-weight: 400;
  line-height: .85;
  transform: rotate(-2deg);
}

.vanilla-voice-heading > span {
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
}

.vanilla-voice-chart {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 1.5rem;
  width: min(100%, 17rem);
  height: 11.5rem;
  margin: 4rem auto 1.5rem;
  padding: 0 1rem;
}

.vanilla-voice-column {
  display: grid;
  width: 5.4rem;
  justify-items: center;
  gap: .35rem;
}

.vanilla-voice-column > strong {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.35rem;
  font-weight: 400;
}

.vanilla-voice-bar {
  display: block;
  width: 3.4rem;
  border-radius: 1.2rem 1.2rem .2rem .2rem;
  background: linear-gradient(to top, #c7665f, #e8aaa0);
}

.vanilla-voice-column--dijane .vanilla-voice-bar { height: 9.5rem; }
.vanilla-voice-column--you .vanilla-voice-bar { height: 2.1rem; opacity: .66; }

.vanilla-voice-column small {
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
  white-space: nowrap;
}

.vanilla-voice-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  width: min(100%, 17rem);
  margin-top: 1.25rem;
}

.vanilla-voice-stats div {
  display: flex;
  min-width: 6.5rem;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

.vanilla-voice-stats strong {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: 2.9rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.vanilla-voice-stats span {
  max-width: 15rem;
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.25;
  text-align: center;
}

.vanilla-instagram-slide--i-love-you {
  justify-content: center;
  padding: 1.5rem .5rem 3rem;
}

.vanilla-love-you-intro {
  max-width: 18rem;
  margin: 0 auto 1rem;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  line-height: 1.05;
  transform: rotate(-2deg);
}

.vanilla-love-you-confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.vanilla-instagram-slide--i-love-you > :not(.vanilla-love-you-confetti):not(.vanilla-love-you-note) {
  position: relative;
  z-index: 2;
}

.vanilla-love-you-confetti span {
  position: absolute;
  bottom: -3rem;
  left: 50%;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--size);
  line-height: 1;
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scale(.35);
  will-change: transform, opacity;
}

.vanilla-love-you-confetti.is-bursting span {
  animation:
    love-you-heart-float var(--duration) cubic-bezier(.12, .8, .45, .85) var(--delay) both,
    love-you-heart-fade var(--fade-duration) linear var(--delay) both;
}

@keyframes love-you-heart-float {
  0% { transform: translate3d(-50%, 0, 0) scale(.35) rotate(-12deg); }
  100% { transform: translate3d(calc(-50% + var(--drift)), var(--rise), 0) scale(1.05) rotate(24deg); }
}

@keyframes love-you-heart-fade {
  0% { opacity: 0; }
  10% { opacity: .92; }
  68% { opacity: .78; }
  86% { opacity: .18; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vanilla-love-you-confetti { display: none; }
}

.vanilla-love-you-highlight {
  display: inline-block;
  color: var(--coral);
  font-size: clamp(2.7rem, 12vw, 4.2rem);
  line-height: .9;
}

.vanilla-love-you-date {
  max-width: 19rem;
  margin: 0 auto;
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.35;
  text-align: center;
}

.vanilla-love-you-followup {
  margin: 1.35rem 0 .25rem;
  color: var(--muted);
  font-size: 1rem;
}

.vanilla-love-you-count-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.1rem;
}

.vanilla-love-you-count {
  margin: 0;
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(5.5rem, 25vw, 8rem);
  font-weight: 400;
  line-height: .8;
  transform: rotate(-3deg);
}

.vanilla-love-you-count-heading > span {
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
}

.vanilla-love-you-note {
  position: absolute;
  z-index: 1;
  right: .75rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: .75rem;
  margin: 0;
  color: rgba(128, 117, 108, .72);
  font-size: .75rem;
  line-height: 1.3;
  text-align: center;
}

.vanilla-instagram-slide--fun-facts {
  justify-content: center;
  padding: 1.5rem .75rem 3rem;
}

.vanilla-fun-facts-content {
  display: flex;
  width: min(100%, 24rem);
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 10svh, 5rem);
}

.vanilla-fun-facts-title {
  width: min(100%, 21rem);
  margin: 0;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.2rem, 10vw, 3.8rem);
  font-weight: 400;
  line-height: .95;
  text-align: center;
  transform: rotate(-2deg);
}

.vanilla-fun-facts-list {
  display: grid;
  gap: clamp(2.5rem, 8svh, 4rem);
  width: 100%;
}

.vanilla-fun-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  text-align: center;
}

.vanilla-fun-fact strong {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.8rem, 13vw, 4.8rem);
  font-weight: 400;
  line-height: .9;
}

.vanilla-fun-fact--word strong { transform: rotate(-3deg); }

.vanilla-fun-fact span {
  max-width: 18rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
}

.vanilla-fun-fact--response {
  gap: .9rem;
}

.vanilla-response-copy {
  max-width: 18rem;
}

.vanilla-response-stat {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .15rem;
}

.vanilla-response-stat strong {
  color: var(--coral);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(5.5rem, 25vw, 8rem);
  font-weight: 400;
  line-height: .8;
  transform: rotate(-3deg);
}

.vanilla-response-stat span {
  max-width: none;
  font-family: inherit;
  font-size: .9rem;
}

.vanilla-instagram-controls {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  flex: 0 0 auto;
  margin: .7rem 0 max(1.25rem, env(safe-area-inset-bottom));
  color: rgba(110, 41, 58, .7);
  font-size: .72rem;
  letter-spacing: .08em;
}

.vanilla-instagram-controls button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(142, 39, 66, .24);
  border-radius: 50%;
  background: rgba(255, 250, 246, .62);
  color: #8e2742;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.vanilla-instagram-controls button[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}

.vanilla-instagram-placeholder {
  padding: 1rem;
  border: 1px solid rgba(37, 35, 33, .1);
  border-radius: 1.25rem;
  background: rgba(255, 250, 242, .62);
  box-shadow: 0 1rem 2.5rem rgba(68, 43, 32, .08);
}

.vanilla-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.vanilla-stat {
  display: flex;
  min-height: 6rem;
  flex-direction: column;
  justify-content: space-between;
  padding: .8rem;
  border: 1px solid rgba(199, 102, 95, .18);
  border-radius: .85rem;
  background: rgba(255, 253, 248, .76);
  text-align: left;
}

.vanilla-stat--wide { grid-column: 1 / -1; min-height: 5rem; }
.vanilla-stat span { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.vanilla-stat strong { color: var(--coral); font-family: "Nothing You Could Do", cursive; font-size: 1.7rem; font-weight: 400; }
.vanilla-placeholder-note { display: block; margin-top: 1rem; color: rgba(128, 117, 108, .7); font-family: "Nothing You Could Do", cursive; font-size: 1rem; transform: rotate(-2deg); }

.memories-content {
  position: relative;
  width: min(100%, 25rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.memory-skip-debug {
  position: absolute;
  top: max(.35rem, env(safe-area-inset-top));
  right: .25rem;
  z-index: 8;
  padding: .35rem .6rem;
  border: 1px solid rgba(142, 39, 66, .2);
  border-radius: 999px;
  background: rgba(255, 250, 246, .72);
  color: rgba(110, 41, 58, .72);
  cursor: pointer;
  font: inherit;
  font-size: .7rem;
}

.memories-title {
  margin: .9rem 0 .65rem;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.6rem, 11vw, 4.3rem);
  font-weight: 400;
  line-height: .96;
  transform: rotate(-2deg);
}

.memories-intro {
  margin: 0 auto;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.4;
}

.memory-scene {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  width: min(100%, 23rem);
  margin: 0 auto;
  place-items: center;
}

.memory-carousel {
  position: relative;
  width: 100%;
  height: min(58svh, 27rem);
  touch-action: pan-y;
}

.memory-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(112%, 0, 0) rotate(6deg);
  transition: opacity .45s ease, transform .7s cubic-bezier(.2, .85, .25, 1), z-index 0s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity, transform;
}

.memory-slide.is-active,
.memory-slide.is-previous,
.memory-slide.is-next {
  pointer-events: auto;
}

.memory-slide.is-active {
  z-index: 3;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.memory-slide.is-previous,
.memory-slide.is-next {
  z-index: 1;
  opacity: .18;
}

.memory-slide.is-previous { transform: translate3d(-112%, 0, 0) rotate(-7deg); }
.memory-slide.is-next { transform: translate3d(112%, 0, 0) rotate(7deg); }

.memory-polaroid {
  width: min(76vw, 18rem);
  padding: .7rem .7rem 2.6rem;
  transform: rotate(-3deg);
}

.memory-slide--2 .memory-polaroid { transform: rotate(3deg); }
.memory-slide--3 .memory-polaroid { transform: rotate(-1deg); }
.memory-slide--4 .memory-polaroid { transform: rotate(4deg); }
.memory-slide--5 .memory-polaroid { transform: rotate(-4deg); }
.memory-slide--6 .memory-polaroid { transform: rotate(2deg); }
.memory-slide--7 .memory-polaroid { transform: rotate(-2deg); }
.memory-slide--8 .memory-polaroid { transform: rotate(5deg); }
.memory-slide--9 .memory-polaroid { transform: rotate(-5deg); }
.memory-slide--10 .memory-polaroid { transform: rotate(1deg); }
.memory-slide--11 .memory-polaroid { transform: rotate(-3deg); }
.memory-slide--12 .memory-polaroid { transform: rotate(3deg); }
.memory-slide--13 .memory-polaroid { transform: rotate(-4deg); }
.memory-slide--14 .memory-polaroid { transform: rotate(2deg); }

.memory-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  background:
    linear-gradient(145deg, rgba(232, 170, 160, .62), rgba(238, 229, 215, .88)),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 7px);
  color: rgba(75, 56, 49, .64);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.35rem;
}

.memory-image-placeholder small {
  color: rgba(75, 56, 49, .5);
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.memory-image {
  display: block;
  object-fit: cover;
}

.memory-bear {
  position: absolute;
  z-index: 2;
  width: 2.88rem;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 .25rem .2rem rgba(68, 43, 32, .2));
}

.memory-bear--center { top: -1.44rem; left: 50%; transform: translateX(-50%) rotate(8deg); }
.memory-bear--left { top: -1.15rem; left: 14%; transform: rotate(-12deg); }
.memory-bear--right { top: -1.15rem; right: 14%; transform: rotate(12deg); }
.memory-bear--top-left { top: -1.25rem; left: 10%; transform: rotate(-7deg); }
.memory-bear--top-right { top: -1.25rem; right: 10%; transform: rotate(7deg); }

.memory-bear--orange { filter: saturate(1.2) drop-shadow(0 .25rem .2rem rgba(68, 43, 32, .2)); }
.memory-bear--blue { filter: hue-rotate(175deg) saturate(1.15) drop-shadow(0 .25rem .2rem rgba(68, 43, 32, .2)); }
.memory-bear--green { filter: hue-rotate(88deg) saturate(1.1) drop-shadow(0 .25rem .2rem rgba(68, 43, 32, .2)); }
.memory-bear--purple { filter: hue-rotate(245deg) saturate(1.15) drop-shadow(0 .25rem .2rem rgba(68, 43, 32, .2)); }

.memory-carousel-controls {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  flex: 0 0 auto;
  margin-top: 1rem;
  margin-bottom: 2.25rem;
  color: rgba(110, 41, 58, .7);
  font-size: .72rem;
  letter-spacing: .08em;
}

.memory-carousel-controls button {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(142, 39, 66, .24);
  border-radius: 50%;
  background: rgba(255, 250, 246, .62);
  color: #8e2742;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.memory-carousel-controls button[hidden] {
  display: grid;
  visibility: hidden;
  pointer-events: none;
}

.memory-scene.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.story-card--chapter-6 {
  align-items: stretch;
  padding-top: clamp(3rem, 8svh, 5.5rem);
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  overflow: hidden;
  background: #f8f0e4;
  touch-action: pan-y;
}

.story-card--chapter-7 {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #f8f0e4;
}

.story-card--chapter-8 {
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #f8f0e4;
}

.ring-page {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.75rem, 8svh, 5rem) 1.25rem max(2rem, env(safe-area-inset-bottom));
}

.ring-page-title {
  margin: 0;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  font-weight: 400;
  line-height: .95;
  text-align: center;
  transform: rotate(-2deg);
}

.ring-page-art {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.ring-page-art img {
  display: block;
  width: min(72vw, 21rem);
  max-height: 54svh;
  object-fit: contain;
  filter: drop-shadow(0 1.1rem 1rem rgba(68, 43, 32, .14));
}

.ring-page-wink {
  position: absolute;
  right: 0;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  left: 0;
  color: var(--muted);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
}

.flowers-page {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.75rem, 8svh, 5rem) 1.25rem max(1.1rem, env(safe-area-inset-bottom));
  text-align: center;
}

.flowers-title {
  margin: 0;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  font-weight: 400;
  line-height: .95;
  transform: rotate(-2deg);
}

.flowers-stage {
  display: flex;
  width: min(100%, 23rem);
  min-height: 0;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(1.5rem, 4svh, 3rem);
}

.flowers-bouquet {
  position: relative;
  width: min(90vw, 22rem);
  height: min(68svh, 33rem);
}

.flower-bloom {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: clamp(6rem, 27vw, 8.5rem);
  height: auto;
  overflow: visible;
  opacity: 1;
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--flower-rotation));
  transform-box: view-box;
  transform-origin: 50% 88.333%;
}

.flower-bloom--1 { --flower-rotation: -44deg; --flower-delay: .12s; z-index: 2; width: clamp(10.5rem, 54vw, 14.5rem); }
.flower-bloom--2 { --flower-rotation: -28deg; --flower-delay: .04s; z-index: 7; width: clamp(11.5rem, 60vw, 16rem); }
.flower-bloom--3 { --flower-rotation: -7deg; --flower-delay: 0s; z-index: 3; width: clamp(12.5rem, 66vw, 17.5rem); }
.flower-bloom--4 { --flower-rotation: 24deg; --flower-delay: .08s; z-index: 1; width: clamp(11.5rem, 60vw, 16rem); }
.flower-bloom--5 { --flower-rotation: 43deg; --flower-delay: .16s; z-index: 6; width: clamp(10.5rem, 54vw, 14.5rem); }

.flower-bloom--1 .sunflower-head { --head-scale: 1.08; }
.flower-bloom--2 .sunflower-head { --head-scale: .84; }
.flower-bloom--3 .sunflower-head { --head-scale: 1.12; }
.flower-bloom--4 .sunflower-head { --head-scale: 1.2; }
.flower-bloom--5 .sunflower-head { --head-scale: .9; }

.bouquet-ribbon {
  position: absolute;
  bottom: 6%;
  left: 50%;
  z-index: 20;
  display: block;
  width: clamp(5rem, 26vw, 8rem);
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.2) rotate(-5deg);
  transform-origin: 50% 50%;
}

.flowers-page.is-blooming .bouquet-ribbon {
  animation: bouquet-ribbon-pop .58s cubic-bezier(.16, .88, .25, 1.12) 1.28s both;
}

.sunflower-stem {
  opacity: 0;
}

.sunflower-stem path {
  fill: none;
  stroke: #5c8b48;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 270;
  stroke-dashoffset: 270;
}

.sunflower-head {
  opacity: 1;
  transform: scale(var(--head-scale, 1));
  transform-box: view-box;
  transform-origin: 80px var(--head-y);
}

.sunflower-petal {
  fill: #e9a92f;
  stroke: #c98225;
  stroke-width: 1.5;
  opacity: 0;
  transform: scale(.03);
  transform-box: fill-box;
  transform-origin: center;
}

.sunflower-petal--light {
  fill: #f5c34a;
}

.sunflower-center {
  fill: #754727;
  stroke: #5b351f;
  stroke-width: 1.5;
  opacity: 0;
  transform: scale(.08);
  transform-box: fill-box;
  transform-origin: center;
}

.sunflower-center-dot {
  fill: #b8752a;
  opacity: 0;
  transform: scale(.08);
  transform-box: fill-box;
  transform-origin: center;
}

.flowers-page.is-blooming .sunflower-stem {
  animation: sunflower-stem-in 1.42s cubic-bezier(.2, .76, .25, 1) calc(var(--flower-delay) + .12s) both;
}

.flowers-page.is-blooming .sunflower-stem path {
  animation: sunflower-stem-draw 1.42s cubic-bezier(.2, .76, .25, 1) calc(var(--flower-delay) + .12s) both;
}

.flowers-page.is-blooming .sunflower-petal {
  animation: sunflower-petal-open .42s cubic-bezier(.16, .88, .25, 1) calc(var(--flower-delay) + .78s + var(--petal-delay)) both;
}

.flowers-page.is-blooming .sunflower-center,
.flowers-page.is-blooming .sunflower-center-dot {
  animation: sunflower-center-in .42s cubic-bezier(.16, .88, .25, 1) calc(var(--flower-delay) + 1.06s) both;
}

@keyframes sunflower-stem-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sunflower-stem-draw {
  from { stroke-dashoffset: 270; }
  to { stroke-dashoffset: 0; }
}

@keyframes sunflower-petal-open {
  from { opacity: 0; transform: scale(.03); }
  78% { opacity: 1; transform: scale(1.11); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sunflower-center-in {
  from { opacity: 0; transform: scale(.08); }
  75% { opacity: 1; transform: scale(1.07); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bouquet-ribbon-pop {
  from { opacity: 0; transform: translateX(-50%) scale(.2) rotate(-5deg); }
  72% { opacity: 1; transform: translateX(-50%) scale(1.08) rotate(1deg); }
  to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
}

.reminder-page {
  display: flex;
  width: min(100%, 28rem);
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: clamp(3.75rem, 11svh, 6rem) 1.25rem max(2rem, env(safe-area-inset-bottom));
  text-align: center;
}

.reminder-page-title {
  width: min(100%, 24rem);
  margin: 0;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  font-weight: 400;
  line-height: .95;
  transform: rotate(-2deg);
}

.reminder-buttons {
  display: grid;
  width: min(100%, 24rem);
  gap: .9rem;
  margin-top: clamp(4.5rem, 16svh, 8rem);
}

.reminder-button {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 2.3rem 1fr 1.8rem;
  align-items: center;
  min-height: 5rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(199, 47, 67, .2);
  border-radius: 1.35rem;
  background: rgba(255, 250, 242, .78);
  box-shadow: 0 .8rem 1.8rem rgba(92, 48, 41, .08);
  color: var(--charcoal);
  cursor: pointer;
  touch-action: manipulation;
  text-align: left;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.reminder-button:active,
.reminder-button.is-playing {
  background: rgba(255, 240, 235, .95);
  box-shadow: 0 .5rem 1.2rem rgba(92, 48, 41, .12);
  transform: scale(.985);
}

.reminder-button-icon {
  color: var(--coral);
  font-size: 1.8rem;
  line-height: 1;
  text-align: center;
}

.reminder-button-copy {
  display: grid;
  gap: .2rem;
  padding: 0 .7rem;
}

.reminder-button-title {
  font-size: 1rem;
  line-height: 1.2;
}

.reminder-button-subtitle,
.reminder-page-status {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
}

.reminder-button-play {
  color: var(--coral);
  font-size: .9rem;
  text-align: center;
}

.reminder-button.is-playing .reminder-button-play { font-size: 0; }
.reminder-button.is-playing .reminder-button-play::after { content: "Ⅱ"; font-size: 1rem; }

.reminder-page-status {
  min-height: 1.2rem;
  margin: 1rem 0 0;
}

.letter-page {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 2rem 1.25rem;
}

.letter-closed {
  position: relative;
  display: grid;
  width: min(78vw, 23rem);
  aspect-ratio: .72;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: .12rem;
  background: linear-gradient(145deg, #fffdf8 0%, #f7e4df 100%);
  color: var(--charcoal);
  cursor: pointer;
  filter: drop-shadow(0 1.2rem 1.4rem rgba(93, 52, 45, .18));
  clip-path: polygon(0 0, 82% 0, 100% 17%, 100% 100%, 0 100%);
  transform: rotate(-2deg);
  transition: transform .2s ease, filter .2s ease;
}

.letter-closed::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 18%;
  height: 17%;
  content: "";
  background: #efd5d0;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  filter: drop-shadow(-1px 1px 0 rgba(168, 97, 101, .2));
  pointer-events: none;
}

.letter-closed:active {
  filter: drop-shadow(0 .7rem .8rem rgba(93, 52, 45, .16));
  transform: rotate(-2deg) scale(.985);
}

.letter-closed-label,
.letter-closed-prompt {
  position: relative;
  z-index: 2;
}

.letter-closed-label {
  margin-top: 2rem;
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(2rem, 9vw, 3.2rem);
  transform: rotate(-3deg);
}

.letter-closed-prompt {
  position: absolute;
  right: 0;
  bottom: 1.7rem;
  left: 0;
  color: var(--muted);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.1rem;
  transform: rotate(-3deg);
}

.letter-open {
  display: none;
  width: min(100%, 38rem);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
  touch-action: pan-y;
}

.letter-paper {
  min-height: 100%;
  padding: clamp(2rem, 7vw, 4rem) clamp(1.25rem, 6vw, 3.5rem);
  background: rgba(255, 250, 242, .86);
  box-shadow: 0 .8rem 2rem rgba(93, 52, 45, .08);
  color: var(--charcoal);
  text-align: left;
}

.letter-copy {
  color: var(--charcoal);
  font-size: 1rem;
  line-height: 1.7;
}

.letter-copy p {
  margin: 0 0 1.35rem;
}

.letter-copy p:first-child {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
}

.letter-copy p:last-child {
  margin-bottom: 0;
}

.letter-page.is-open {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 0;
  z-index: 30;
  touch-action: pan-y;
}

.letter-page.is-open .letter-closed { display: none; }
.letter-page.is-open .letter-open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 0;
  max-height: none;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.future-adventures-title {
  width: min(100%, 25rem);
  margin: .9rem 0 .65rem;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 400;
  line-height: .98;
  transform: rotate(-2deg);
}

.future-polaroid {
  width: min(76vw, 18rem);
  padding: .7rem .7rem 3.15rem;
}

.future-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.future-caption {
  position: absolute;
  right: .7rem;
  bottom: .72rem;
  left: .7rem;
  margin: 0;
  color: rgba(110, 41, 58, .72);
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.05rem;
  line-height: 1.05;
  text-align: center;
  transform: rotate(-1deg);
}


.story-card--chapter-5 {
  align-items: stretch;
}

.reminders-content {
  position: relative;
  display: flex;
  width: min(100%, 31rem);
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.75rem, 6svh, 4rem) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
}

.reminders-title {
  position: relative;
  z-index: 1;
  width: min(100%, 25rem);
  margin: 0;
  color: var(--charcoal);
  font-family: "Nothing You Could Do", cursive;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 400;
  line-height: .98;
  transform: rotate(-2deg);
}

.reminders-canvas {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  width: min(100%, 28rem);
  margin-top: .5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: .15rem .1rem;
  padding: .35rem 0 .5rem;
}

.reminder-sticker {
  position: relative;
  isolation: isolate;
  width: min(100%, 6rem);
  place-self: center;
  transform-origin: center;
  filter: drop-shadow(0 .7rem .8rem rgba(68, 43, 32, .2));
}

.sticker-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.reminder-sticker img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: url('#sticker-outline');
}

.reminder-sticker--beluga {
  grid-column: 3;
  grid-row: 5;
  width: min(100%, 7.6rem);
  transform: translate(-8%, 6%) rotate(-7deg);
}

.reminder-sticker--wave {
  grid-column: 3;
  grid-row: 1;
  width: min(100%, 7.4rem);
  transform: translate(10%, -6%) rotate(-6deg);
}

.reminder-sticker--sun {
  grid-column: 1;
  grid-row: 1;
  width: 4.6rem;
  transform: translate(-10%, 8%) rotate(-14deg);
}

.reminder-sticker--flag {
  grid-column: 2;
  grid-row: 1;
  width: min(100%, 6.4rem);
  transform: translate(8%, -5%) rotate(11deg);
}

.reminder-sticker--elephant {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 6.2rem);
  transform: translate(-10%, -6%) rotate(-11deg);
}

.reminder-sticker--sunglasses {
  grid-column: 3;
  grid-row: 3;
  width: min(100%, 7rem);
  transform: translate(10%, 7%) rotate(10deg);
}

.reminder-sticker--nutella {
  grid-column: 2;
  grid-row: 3;
  width: min(100%, 5.2rem);
  transform: translate(-8%, -7%) rotate(13deg);
}

.reminder-sticker--papaya {
  grid-column: 1;
  grid-row: 3;
  width: min(100%, 5.4rem);
  transform: translate(8%, 6%) rotate(-16deg);
}

.reminder-sticker--mango {
  grid-column: 3;
  grid-row: 2;
  width: min(100%, 5.4rem);
  transform: translate(-10%, 5%) rotate(15deg);
}

.reminder-sticker--beach {
  grid-column: 2;
  grid-row: 4;
  width: min(100%, 7rem);
  transform: translate(8%, -4%) rotate(-7deg);
}

.reminder-sticker--sunflower {
  grid-column: 1;
  grid-row: 4;
  width: min(100%, 5.7rem);
  transform: translate(-9%, -6%) rotate(-11deg);
}

.reminder-sticker--yochi {
  grid-column: 3;
  grid-row: 4;
  width: min(100%, 5.8rem);
  transform: translate(10%, 7%) rotate(11deg);
}

.reminder-sticker--mushroom {
  grid-column: 2;
  grid-row: 5;
  width: min(100%, 5.4rem);
  transform: translate(9%, -5%) rotate(-10deg);
}

.reminder-sticker--pistachio {
  grid-column: 1;
  grid-row: 5;
  width: min(100%, 5.4rem);
  transform: translate(-10%, 8%) rotate(14deg);
}

.reminder-sticker--bag {
  grid-column: 2;
  grid-row: 2;
  width: min(100%, 6.3rem);
  transform: translate(8%, -6%) rotate(15deg);
}

.memory-carousel-controls button:focus-visible {
  outline: 2px solid rgba(142, 39, 66, .5);
  outline-offset: 3px;
}

.edge-target {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 22%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.edge-target--previous { left: 0; }
.edge-target--next { right: 0; }
.edge-target:focus-visible { outline: 2px solid rgba(207, 79, 79, .7); outline-offset: -8px; }

.landing-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  overflow: hidden;
}

.landing-screen svg {
  display: block;
  width: min(76vw, 24rem, 40.6svh);
  height: auto;
  aspect-ratio: 9 / 19.5;
  overflow: visible;
}

.continue-edge-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(42%, 13rem);
  background: linear-gradient(90deg, rgba(248, 240, 228, 0), rgba(248, 240, 228, .22) 34%, rgba(207, 79, 79, .28));
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.landing-screen.has-navigation-hint .continue-edge-overlay {
  opacity: 1;
}

.continue-prompt {
  position: absolute;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(94%, 26rem);
  min-height: 4.25rem;
  border: 0;
  padding: .7rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(248, 240, 228, 0), rgba(248, 240, 228, .26));
  color: var(--charcoal);
  cursor: pointer;
  font-family: "Nothing You Could Do", cursive;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.02;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .75rem);
  transition: opacity .35s ease, transform .35s ease;
}

.continue-prompt.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.loading-error {
  color: var(--muted);
  text-align: center;
}

button { font: inherit; }

.screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  position: relative;
  overflow: hidden;
}

.screen--dark { background: var(--charcoal); color: var(--cream); }

.screen--paper {
  background:
    radial-gradient(circle at 10% 10%, rgba(232, 170, 160, .24), transparent 28%),
    var(--cream);
}

.content {
  width: min(100%, 31rem);
  text-align: center;
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.screen--dark .eyebrow { color: rgba(248, 240, 228, .58); }

h1, h2, p { margin-top: 0; }

h1, h2 {
  font-weight: 500;
  letter-spacing: -.045em;
}

h1 { font-size: clamp(2.6rem, 13vw, 5rem); line-height: .98; }
h2 { font-size: clamp(2.1rem, 10vw, 3.4rem); line-height: 1; }

.handwritten {
  font-family: "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(3.7rem, 19vw, 7rem);
  font-weight: 400;
  letter-spacing: -.1em;
  transform: rotate(-6deg);
  color: var(--blush);
  animation: write-in 1.8s cubic-bezier(.2, .75, .3, 1) both;
}

.opening-copy {
  margin: 3.5rem auto 2rem;
  max-width: 16rem;
  font-size: 1.3rem;
  line-height: 1.35;
  animation: rise-in .8s .9s both;
}

.opening-copy span { display: block; margin-top: .7rem; color: rgba(248, 240, 228, .62); }

.button {
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: .8rem 1.25rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.button:hover, .button:focus-visible { background: var(--charcoal); color: var(--cream); transform: translateY(-2px); }
.screen--dark .button:hover, .screen--dark .button:focus-visible { background: var(--cream); color: var(--charcoal); }

.button--quiet { border-color: var(--line); color: var(--muted); }

.chapter-kicker { margin-bottom: 1.5rem; }

.thought {
  min-height: 9rem;
  display: grid;
  place-items: center;
  margin: 0 auto 2rem;
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1.05;
  animation: rise-in .5s both;
}

.annotation {
  color: var(--coral);
  font-family: "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 1.25rem;
  transform: rotate(-3deg);
  margin: -1rem auto 2rem;
}

.progress { color: var(--muted); font-size: .78rem; margin-bottom: 1.2rem; }

.section-card {
  padding: 2.5rem 1.35rem;
  background: var(--paper);
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
  text-align: left;
}

.section-card .thought { text-align: center; }

.section-card p { color: var(--muted); line-height: 1.65; }

.memory-grid { display: grid; gap: .8rem; margin-top: 1.5rem; }

.memory {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(255, 250, 242, .7);
  padding: 1rem;
  cursor: pointer;
  text-align: left;
}

.memory strong { display: block; margin-bottom: .35rem; font-weight: 500; }
.memory small { color: var(--muted); line-height: 1.45; }

.floating-heart {
  position: fixed;
  z-index: 5;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 3.1rem;
  height: 3.1rem;
  border: 0;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--blush);
  box-shadow: 0 8px 24px rgba(37, 35, 33, .2);
  cursor: pointer;
  font-size: 1.25rem;
}

.chapter-menu { width: min(88vw, 24rem); padding: 0; border: 0; border-radius: 1.5rem; color: var(--charcoal); background: var(--paper); box-shadow: var(--shadow); }
.chapter-menu::backdrop { background: rgba(37, 35, 33, .48); backdrop-filter: blur(4px); }
.menu-inner { padding: 1.3rem; }
.menu-topline { display: flex; justify-content: space-between; align-items: center; }
.icon-button { border: 0; background: none; color: var(--muted); font-size: 1.7rem; cursor: pointer; }
.chapter-menu h2 { font-size: 2.3rem; margin: 1rem 0 1.25rem; }
.chapter-links { display: grid; gap: .55rem; }
.chapter-links button { border: 1px solid var(--line); border-radius: .8rem; background: transparent; color: inherit; cursor: pointer; padding: .9rem 1rem; text-align: left; }
.chapter-links button:hover, .chapter-links button:focus-visible { background: var(--cream); }

/* Keep every story page on the same opening-screen cream background. */
.story-card { background: var(--cream); }

@keyframes write-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}