:root {
  --ink: #4c3033;
  --wine: #8d3f4b;
  --rose: #c8817f;
  --gold: #c5a36c;
  --paper: #f8f2ec;
}
[data-theme="rose-evening"] { --ink:#f4e9e6; --wine:#d99ca0; --rose:#a44656; --gold:#d8b77c; --paper:#3b2029; }
[data-theme="rose-evening"] .basic-story { background:radial-gradient(circle at 18% 14%,rgba(145,65,82,.52),transparent 32%),radial-gradient(circle at 86% 78%,rgba(211,161,149,.2),transparent 38%),linear-gradient(145deg,#421f2b,#24141d); }
[data-theme="pearl-champagne"] { --ink:#53473d; --wine:#8e6658; --rose:#c29b86; --gold:#b79258; --paper:#f7f2e8; }

body { color: var(--ink); background: #efe5df; font-family: "Noto Serif SC", "Songti SC", STSong, Georgia, serif; }

.basic-story {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.95), transparent 32%),
    radial-gradient(circle at 86% 78%, rgba(211,161,149,.3), transparent 38%),
    linear-gradient(145deg, #f8f4ef 0%, #f2e6e2 48%, #e8d5d1 100%);
}

.ambient-canvas, .film-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient-canvas { z-index: 2; }
.film-grain { z-index: 5; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.orb { position: absolute; z-index: 1; border-radius: 50%; filter: blur(8px); opacity: .52; pointer-events: none; }
.orb-one { width: min(78vw, 680px); aspect-ratio: 1; top: -40%; right: -30%; background: radial-gradient(circle at 40% 42%, rgba(255,255,255,.9), rgba(218,163,156,.16) 52%, transparent 68%); animation: drift 16s ease-in-out infinite alternate; }
.orb-two { width: min(62vw, 520px); aspect-ratio: 1; bottom: -34%; left: -22%; background: radial-gradient(circle, rgba(245,212,194,.62), transparent 68%); animation: drift 19s ease-in-out -8s infinite alternate-reverse; }

.story-frame {
  position: relative;
  z-index: 8;
  width: min(88vw, 620px);
  min-height: min(82svh, 760px);
  padding: clamp(72px, 10svh, 100px) clamp(24px, 8vw, 62px) clamp(66px, 8svh, 84px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.story-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  border: 1px solid rgba(137,79,79,.12);
  border-radius: 999px 999px 34px 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06));
  box-shadow: 0 30px 90px rgba(87,49,49,.08), inset 0 1px rgba(255,255,255,.7);
  backdrop-filter: blur(3px);
}

.eyebrow { margin: 0; font: 600 10px/1.4 system-ui, sans-serif; letter-spacing: .3em; color: var(--wine); }
.hairline { width: 42px; height: 1px; margin: 16px auto 20px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.names { display: flex; align-items: baseline; justify-content: center; gap: clamp(10px, 3vw, 22px); max-width: 100%; }
.name { white-space: nowrap; font-weight: 400; letter-spacing: .12em; text-shadow: 0 8px 24px rgba(120,64,67,.12); }
.ampersand { color: var(--gold); font: italic 24px/1 Georgia, serif; }

.heart-stage { position: relative; width: clamp(148px, 36vw, 216px); margin: 18px 0 2px; }
.heart-stage svg { display: block; width: 100%; overflow: visible; }
.heart-shadow { fill: rgba(255,255,255,.15); stroke: rgba(152,79,85,.12); stroke-width: 10; filter: blur(12px); }
.heart-ribbon { fill: rgba(255,255,255,.08); stroke: url(#basicRibbon); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: url(#softGlow); stroke-dasharray: 1; stroke-dashoffset: 1; }
.heart-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff7e4; box-shadow: 0 0 14px 4px rgba(211,165,106,.48); opacity: 0; }
.spark-one { top: 24%; left: 24%; }.spark-two { top: 34%; right: 20%; }.spark-three { bottom: 16%; left: 49%; }

.message { max-width: 30em; margin: 10px 0 0; color: #5a3d40; font-size: clamp(15px, 4vw, 20px); line-height: 1.95; letter-spacing: .08em; }
.closing { display: grid; gap: 5px; margin-top: 22px; }
.closing-label { color: var(--gold); font: 600 9px/1.3 system-ui, sans-serif; letter-spacing: .32em; }
.closing time { color: var(--wine); font: 400 clamp(18px, 5vw, 28px)/1.2 Georgia, serif; letter-spacing: .16em; }
.closing-note { margin-top: 4px; font-size: 11px; letter-spacing: .12em; opacity: .68; }
.replay { margin-top: 20px; color: #fffaf4; background: var(--wine); box-shadow: 0 12px 28px rgba(113,51,60,.2); font: 600 12px/1 system-ui, sans-serif; letter-spacing: .12em; }

.scene { opacity: 0; }
.is-playing .opening { animation: reveal .9s var(--ease-cinematic) .5s both; }
.is-playing .names-scene { animation: reveal-up 1.3s var(--ease-cinematic) 2.1s both; }
.is-playing .heart-ribbon { animation: draw-heart 2.9s var(--ease-cinematic) 4.1s forwards; }
.is-playing .heart-scene { animation: reveal .8s ease 3.9s both; }
.is-playing .heart-spark { animation: spark 2.4s ease-in-out 6.5s infinite; }
.is-playing .spark-two { animation-delay: 7.1s; }.is-playing .spark-three { animation-delay: 7.7s; }
.is-playing .message-scene { animation: reveal-up 1.2s var(--ease-cinematic) 7.1s both; }
.is-playing .closing-scene { animation: reveal-up 1s var(--ease-cinematic) 9s both; }
.is-playing .replay-scene { animation: reveal .8s ease 10.4s both; }

@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes draw-heart { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes spark { 0%,100% { opacity: 0; transform: scale(.5); } 48% { opacity: .9; transform: scale(1.2); } }
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(.98); } to { transform: translate3d(4%, 3%, 0) scale(1.05); } }

@media (max-height: 720px) {
  .story-frame { min-height: 96svh; padding-top: 66px; padding-bottom: 48px; }
  .heart-stage { width: 132px; margin-top: 8px; }
  .message { line-height: 1.65; }
  .closing { margin-top: 12px; }
  .replay { margin-top: 12px; min-height: 40px; }
}

@media (max-width: 380px) {
  .story-frame { width: 94vw; padding-inline: 20px; }
  .names { gap: 8px; }
  .ampersand { font-size: 18px; }
}