:root {
  color-scheme: dark;
  --ink: #fdfaff;
  --muted: rgba(247, 239, 255, .68);
  --pink: #ff3ca5;
  --hot-pink: #ef168d;
  --rose: #ff8cd2;
  --gold: #ffd37b;
  --night: #02030b;
}

body[data-theme="blue"] {
  --pink: #69b9ff;
  --hot-pink: #3978e7;
  --rose: #b8dcff;
  --gold: #d9efff;
}

body[data-theme="gold"] {
  --pink: #ffc65d;
  --hot-pink: #e68b27;
  --rose: #ffe2a2;
  --gold: #fff0b6;
}

body[data-theme="midnight"] {
  --ink: #f4f8ff;
  --muted: rgba(221, 234, 250, .68);
  --pink: #4f95ff;
  --hot-pink: #2367d7;
  --rose: #9ccfff;
  --gold: #8ceaff;
  --night: #010611;
}

body[data-theme="forest"] {
  --ink: #f4fff9;
  --muted: rgba(221, 241, 232, .67);
  --pink: #43bd9a;
  --hot-pink: #14725f;
  --rose: #a0e5d1;
  --gold: #e2c36f;
  --night: #020d0c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

button { font: inherit; }

.app {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  transition: opacity .9s ease, transform .9s ease, visibility .9s;
}

.scene.active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--rose);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .72rem;
  letter-spacing: .42em;
}

.eyebrow.dark { color: rgba(24, 58, 85, .62); }

.cover-scene {
  padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(151, 62, 177, .18), transparent 25rem),
    radial-gradient(circle at 14% 8%, rgba(54, 94, 190, .17), transparent 27rem),
    linear-gradient(155deg, #04050e 0%, #090719 54%, #04040c 100%);
}

.cover-scene::before,
.cover-scene::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(5rem);
  opacity: .32;
  pointer-events: none;
}

.cover-scene::before {
  width: 28rem;
  height: 28rem;
  left: -18rem;
  top: 40%;
  background: #4055c8;
}

.cover-scene::after {
  width: 24rem;
  height: 24rem;
  right: -15rem;
  top: 18%;
  background: #af297d;
}

.cover-stars,
.cover-stars::before,
.cover-stars::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(178,201,255,.75) 0 1px, transparent 1.4px);
  background-position: 3% 12%, 87% 24%;
  background-size: 89px 83px, 137px 121px;
  opacity: .35;
}

.cover-stars::before { transform: translate(27px, 41px) scale(.72); opacity: .62; }
.cover-stars::after { transform: translate(-14px, -31px) scale(1.2); opacity: .22; }

.cover-content {
  position: relative;
  z-index: 1;
  width: min(100%, 43rem);
  animation: arrive 1.25s ease both;
}

.cover-content h1 {
  display: flex;
  flex-direction: column;
  gap: .12em;
  margin: 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: clamp(3.05rem, 13vw, 6.7rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: .04em;
  color: transparent;
  background: linear-gradient(135deg, #fff 8%, #f6dbff 45%, #ffd9ec 72%, #ffdca7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 1rem 3rem rgba(230, 104, 189, .18));
}

.cover-recipient {
  margin: -.35rem 0 1.25rem;
  color: rgba(255,255,255,.38);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.cover-recipient #coverRecipient { display: inline-block; }

.cover-note {
  margin: 1.6rem auto 2.35rem;
  color: rgba(251, 244, 255, .62);
  font-size: clamp(.9rem, 3.7vw, 1.02rem);
  letter-spacing: .08em;
}

.glow-button,
.scene-button,
.day-button,
.next-blessing-button,
.photo-control-button {
  width: max-content;
  max-width: min(92vw, 38rem);
  min-height: 3.35rem;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, filter .2s ease, opacity .55s ease, visibility .55s;
}

.glow-button {
  position: relative;
  padding: .9rem 1.75rem;
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  letter-spacing: .09em;
  background: linear-gradient(120deg, rgba(103, 84, 199, .68), rgba(233, 49, 145, .68));
  box-shadow: 0 .8rem 3rem rgba(230, 49, 154, .23), inset 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glow-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, #907fff, #ff4fad, #ffd37b);
  filter: blur(.38rem);
  opacity: .22;
}

.button-spark {
  display: inline-block;
  margin-right: .55rem;
  color: #ffe6a8;
  animation: spark 1.8s ease-in-out infinite;
}

.glow-button.compact {
  min-height: 3rem;
  padding: .72rem 1.35rem;
  font-size: .92rem;
}

.glow-button:hover,
.scene-button:hover,
.day-button:hover { filter: brightness(1.14); }

.glow-button:active,
.scene-button:active,
.day-button:active { transform: scale(.96); }

.tiny-tip {
  position: absolute;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255,255,255,.3);
  font-size: .68rem;
  letter-spacing: .08em;
  white-space: nowrap;
}

.fireworks-scene {
  background: #010209;
}

.night-sky,
.fallback-fireworks,
.night-sky > canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.night-sky {
  background:
    radial-gradient(ellipse at 50% 112%, rgba(38, 51, 95, .5), transparent 52%),
    radial-gradient(circle at 20% 12%, rgba(23, 34, 79, .34), transparent 28rem),
    linear-gradient(#010209, #050716 70%, #0b1024);
}

.particle-message {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.skyline {
  position: absolute;
  z-index: 3;
  right: -2%;
  bottom: 0;
  left: -2%;
  height: 14vh;
  min-height: 4.5rem;
  opacity: .9;
  background: linear-gradient(to top, #010107 0 52%, transparent 52%);
  pointer-events: none;
}

.skyline::before,
.skyline::after {
  content: "";
  position: absolute;
  bottom: 48%;
  width: 35%;
  height: 70%;
  background: #010107;
  clip-path: polygon(0 100%, 0 72%, 12% 62%, 27% 72%, 39% 45%, 56% 68%, 69% 38%, 82% 71%, 100% 57%, 100% 100%);
}

.skyline::before { left: 0; }
.skyline::after { right: 0; transform: scaleX(-1); }

.skyline i {
  position: relative;
  bottom: -15%;
  display: inline-block;
  width: 5%;
  height: calc(45% + var(--h, 20px));
  margin-right: 2.5%;
  background: #010107;
  box-shadow: inset 0 1px rgba(120, 154, 223, .08);
}

.skyline i:nth-child(2n) { --h: 36px; }
.skyline i:nth-child(3n) { --h: 56px; width: 7%; }
.skyline i:nth-child(5n) { --h: 18px; width: 4%; }

.opening-copy {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(96vw, 68rem);
  transform: translate(-50%, -48%);
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.opening-copy.revealed { opacity: 1; }
.opening-copy.revealed .opening-title {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.opening-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2em;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: clamp(3.25rem, 17vw, 8rem);
  font-weight: 900;
  line-height: .88;
  color: #fff;
  opacity: 0;
  transform: translateY(1.1rem) scale(.96);
  filter: blur(10px);
  text-shadow: 0 0 1.4rem rgba(255,255,255,.2), 0 0 3rem color-mix(in srgb, var(--pink) 20%, transparent);
  transition: opacity 1.2s ease, transform 1.35s cubic-bezier(.2,.75,.2,1), filter 1.1s ease;
}

.opening-title span {
  display: block;
  padding-left: .18em;
  letter-spacing: .22em;
  white-space: nowrap;
}

.opening-copy .opening-date {
  display: block;
  margin-top: 1.25rem;
  color: rgba(255,255,255,.6);
  font-family: Georgia, serif;
  font-size: clamp(.8rem, 2vw, 1.1rem);
  letter-spacing: .72em;
}

.scene-button {
  position: absolute;
  z-index: 7;
  bottom: max(2.2rem, calc(env(safe-area-inset-bottom) + 1.2rem));
  left: 50%;
  min-height: 2.9rem;
  padding: .7rem 1.35rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.88);
  background: rgba(5, 6, 18, .52);
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: normal;
}

.scene-button:active { transform: translateX(-50%) scale(.96); }

.corner-caption {
  position: absolute;
  z-index: 4;
  top: max(1.2rem, env(safe-area-inset-top));
  left: 1.25rem;
  margin: 0;
  color: rgba(255,255,255,.35);
  font-family: Georgia, serif;
  font-size: .66rem;
  letter-spacing: .13em;
}

.cake-scene {
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(202, 26, 127, .17), transparent 25rem),
    radial-gradient(ellipse at 50% 105%, rgba(50, 28, 98, .42), transparent 35rem),
    linear-gradient(155deg, #05040d, #0a0715 55%, #05040d);
}

.cake-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px);
  background-size: 78px 73px;
  pointer-events: none;
}

.cake-haze {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(66vw, 27rem);
  height: min(66vw, 27rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 78, 177, .16), rgba(123, 56, 193, .05) 45%, transparent 70%);
  filter: blur(1.1rem);
  pointer-events: none;
}

.cake-content {
  position: relative;
  z-index: 2;
  width: min(100%, 38rem);
  margin-top: min(1vh, .5rem);
}

.cake-content h2,
.blessing-card h2,
.final-copy h2 {
  margin: 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-weight: 500;
}

.cake-content h2 { font-size: clamp(1.55rem, 6.5vw, 2.45rem); letter-spacing: .07em; }

.cake-note {
  min-height: 1.5rem;
  margin: .55rem 0 0;
  color: var(--muted);
  font-size: .84rem;
  letter-spacing: .05em;
}

.cake-stage {
  position: relative;
  width: min(82vw, 23rem);
  height: min(73vw, 20.5rem);
  margin: .2rem auto -.3rem;
  filter: drop-shadow(0 1.4rem 2.5rem rgba(0,0,0,.48));
}

.cake-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 25%;
  right: 25%;
  bottom: 4%;
  height: 15%;
  border-radius: 50%;
  background: rgba(255, 37, 158, .35);
  filter: blur(1rem);
  opacity: .34;
}

.cake-tier {
  position: absolute;
  left: 50%;
  border-radius: 50% / 18%;
  background:
    linear-gradient(90deg, rgba(139,0,75,.45), transparent 18%, rgba(255,255,255,.16) 46%, transparent 62%, rgba(98,0,61,.36)),
    linear-gradient(#ff62bf 0%, #ed168c 54%, #b70768 100%);
  box-shadow:
    inset 0 .45rem .5rem rgba(255,255,255,.14),
    inset 0 -1rem 1.1rem rgba(91,0,58,.28),
    0 .5rem 1.5rem rgba(166, 0, 96, .22);
  transform: translateX(-50%);
  transition: transform 1s cubic-bezier(.18,.8,.18,1), filter .8s ease;
}

.cake-tier::before {
  content: "";
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, #ff9bd4 0%, #ff52b6 50%, #ce0a79 100%);
  box-shadow: inset 0 .15rem .38rem rgba(255,255,255,.38), 0 .2rem .4rem rgba(109,0,64,.28);
}

.cake-tier::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 7%;
  height: 7%;
  border-radius: 999px;
  background: rgba(255, 170, 220, .7);
  box-shadow: 0 0 .7rem rgba(255, 115, 199, .5);
}

.cake-tier-top {
  z-index: 3;
  top: 36%;
  width: 49%;
  height: 25%;
}

.cake-tier-bottom {
  z-index: 2;
  top: 56%;
  width: 72%;
  height: 30%;
}

.cake-shine {
  position: absolute;
  z-index: 3;
  top: 29%;
  left: 13%;
  width: 7%;
  height: 35%;
  border-radius: 999px;
  background: linear-gradient(rgba(255,255,255,.52), transparent);
  filter: blur(1px);
  opacity: .6;
}

.icing {
  position: absolute;
  z-index: 5;
  top: 11%;
  left: 0;
  width: 100%;
  height: 25%;
  pointer-events: none;
}

.icing::before {
  content: "";
  position: absolute;
  inset: 0 2%;
  border-radius: 50%;
  border-bottom: .45rem solid rgba(255, 176, 222, .9);
}

.icing i {
  position: absolute;
  top: 56%;
  width: 8%;
  height: 115%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #ffb7df, #ff6bbe 68%, #dc1782);
  box-shadow: inset .12rem 0 rgba(255,255,255,.22);
}

.icing i:nth-child(1) { left: 9%; height: 75%; }
.icing i:nth-child(2) { left: 25%; height: 130%; }
.icing i:nth-child(3) { left: 43%; height: 85%; }
.icing i:nth-child(4) { left: 62%; height: 145%; }
.icing i:nth-child(5) { left: 80%; height: 90%; }
.icing i:nth-child(6) { left: 91%; height: 60%; }

.cake-plate {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 7%;
  width: 88%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #f7c6e7, #ec78be 50%, #a92579 54%, #5d174c);
  box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.5), 0 0 1.6rem rgba(246, 69, 167, .27);
}

.candle-field {
  position: absolute;
  z-index: 8;
  top: 13%;
  left: 50%;
  width: 52%;
  height: 40%;
  transform: translateX(-50%);
  transition: transform .55s ease;
}

.candle {
  --candle-color: #ffe6f5;
  position: absolute;
  width: .38rem;
  height: 2.65rem;
  border-radius: .2rem .2rem .08rem .08rem;
  transform: translate(-50%, -100%) scale(var(--scale, 1));
  transform-origin: bottom center;
  background: repeating-linear-gradient(135deg, var(--candle-color) 0 5px, #ff579f 5px 8px);
  box-shadow: inset -.08rem 0 rgba(124, 0, 55, .2), 0 .15rem .35rem rgba(0,0,0,.25);
}

.candle::after {
  content: "";
  position: absolute;
  top: -.13rem;
  left: 50%;
  width: 1px;
  height: .23rem;
  transform: translateX(-50%);
  background: #2f1825;
}

.flame {
  position: absolute;
  z-index: 2;
  top: -1.38rem;
  left: 50%;
  width: .78rem;
  height: 1.35rem;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 70% 42% 62% 38% / 78% 70% 36% 30%;
  background: radial-gradient(ellipse at 50% 78%, #fff 0 9%, #fff4aa 18%, #ffb229 48%, #ff671f 72%, rgba(255,64,0,0) 74%);
  filter: drop-shadow(0 0 .35rem #ffb62d) drop-shadow(0 0 .75rem rgba(255, 102, 26, .82));
  animation: flame-dance .105s infinite alternate ease-in-out;
}

.flame::before {
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 157, 41, .26), transparent 62%);
}

.candle.out .flame {
  animation: flame-out .48s ease both;
}

.candle.out::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -1.1rem;
  left: 42%;
  width: .45rem;
  height: 1.2rem;
  border-radius: 50%;
  border-left: 2px solid rgba(214, 218, 231, .35);
  filter: blur(1px);
  animation: smoke 1.5s ease-out both;
}

.wish-controls {
  position: relative;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  min-height: 5.5rem;
  transition: opacity .55s ease, visibility .55s;
}

.text-button {
  padding: .2rem .4rem;
  border: 0;
  color: rgba(255,255,255,.48);
  background: transparent;
  cursor: pointer;
  font-size: .76rem;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.17);
  text-underline-offset: .25rem;
}

.mic-status {
  min-height: 1rem;
  margin: 0;
  color: rgba(255,255,255,.46);
  font-size: .7rem;
}

.next-slot {
  position: relative;
  z-index: 30;
  display: grid;
  place-items: center;
  min-height: 3.4rem;
  margin-top: .1rem;
}

.next-blessing-button {
  min-height: 3rem;
  padding: .72rem 1.45rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(12, 7, 24, .62);
  box-shadow: 0 .8rem 2.4rem rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  transition: opacity .45s ease, visibility .45s, transform .2s ease, border-color .2s ease;
}

.next-blessing-button:hover { border-color: rgba(255,255,255,.42); }
.next-blessing-button:active { transform: scale(.96); }

.photos-scene {
  padding: max(.9rem, env(safe-area-inset-top)) .8rem max(.9rem, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(circle at 20% 8%, rgba(66, 99, 194, .28), transparent 26rem),
    radial-gradient(circle at 82% 76%, rgba(225, 62, 158, .24), transparent 28rem),
    linear-gradient(155deg, #050713, #10091a 58%, #05050d);
}

.photo-aurora {
  position: absolute;
  inset: -20%;
  opacity: .45;
  background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(117, 110, 244, .24), transparent, rgba(255, 76, 169, .18), transparent);
  filter: blur(3rem);
  animation: aurora-drift 16s linear infinite;
  pointer-events: none;
}

.photos-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 64rem);
  height: min(96svh, 54rem);
  max-height: calc(100svh - 1rem);
}

.photos-content h2 {
  margin: 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: clamp(1.45rem, 6vw, 3.1rem);
  font-weight: 500;
  letter-spacing: .06em;
  transform: scale(var(--title-scale, 1));
  transform-origin: center;
}

.photos-content[data-align="left"] > .eyebrow,
.photos-content[data-align="left"] > h2,
.photos-content[data-align="left"] > .photos-note { align-self: flex-start; max-width: 78%; text-align: left; }
.photos-content[data-align="right"] > .eyebrow,
.photos-content[data-align="right"] > h2,
.photos-content[data-align="right"] > .photos-note { align-self: flex-end; max-width: 78%; text-align: right; }

.photos-note {
  margin: .42rem 0 .55rem;
  color: var(--muted);
  font-family: "Songti SC", STSong, serif;
  font-size: clamp(.78rem, 3.1vw, 1rem);
  line-height: 1.7;
}

.photo-stage-shell {
  position: relative;
  flex: 1 1 auto;
  width: min(96vw, 58rem);
  min-height: 16rem;
  margin: 0 auto .35rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: clamp(1.25rem, 4vw, 2.1rem);
  background:
    radial-gradient(circle at 50% 45%, rgba(198,74,255,.12), transparent 42%),
    linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1.6rem 4rem rgba(0,0,0,.28);
  perspective: 650px;
  touch-action: none;
}

.photo-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
}

.memory-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(3.2rem, 13vw, 6.3rem);
  aspect-ratio: .82;
  margin: 0;
  padding: clamp(.18rem, .55vw, .34rem);
  overflow: hidden;
  border-radius: .35rem;
  background: #fff9fc;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.5);
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.memory-photo[data-frame="landscape"] { aspect-ratio: 1.35; }
.memory-photo[data-frame="square"] { aspect-ratio: 1; }

.memory-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .16rem;
  background: rgba(18,12,29,.9);
}

.memory-placeholder { padding: .24rem; background: rgba(255,255,255,.92); }
.placeholder-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .16rem;
  color: rgba(255,255,255,.76);
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(145deg, #2d1a4c, #7b286d 58%, #d5568e);
}
.memory-placeholder[data-variant="1"] .placeholder-surface { background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.24), transparent 28%), linear-gradient(150deg, #172756, #394c9b 58%, #b35f9d); }
.memory-placeholder[data-variant="2"] .placeholder-surface { background: radial-gradient(circle at 28% 78%, rgba(255,255,255,.22), transparent 28%), linear-gradient(145deg, #54224f, #a63f75 58%, #ee8aac); }
.memory-placeholder[data-variant="3"] .placeholder-surface { background: radial-gradient(circle at 68% 72%, rgba(255,255,255,.24), transparent 28%), linear-gradient(150deg, #182e4c, #35698c 56%, #8b6dab); }
.memory-placeholder[data-variant="4"] .placeholder-surface { background: radial-gradient(circle at 32% 18%, rgba(255,255,255,.25), transparent 30%), linear-gradient(145deg, #38204f, #684699 54%, #c14f91); }
.memory-placeholder[data-variant="5"] .placeholder-surface { background: radial-gradient(circle at 72% 76%, rgba(255,255,255,.22), transparent 28%), linear-gradient(145deg, #4b1e48, #8b365f 55%, #ca776f); }
.placeholder-surface::before,
.placeholder-surface::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); }
.placeholder-surface::before { width: 72%; aspect-ratio: 1; top: -28%; right: -24%; }
.placeholder-surface::after { width: 48%; aspect-ratio: 1; bottom: -25%; left: -18%; }
.placeholder-surface i { font: 500 clamp(.72rem, 2.6vw, 1rem)/1 Georgia, serif; letter-spacing: .08em; }
.placeholder-surface b { margin-top: .38rem; font: 600 clamp(.38rem, 1.4vw, .54rem)/1 Arial, sans-serif; letter-spacing: .22em; opacity: .62; }

.memory-photo::after {
  content: "";
  position: absolute;
  inset: .2rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: .18rem;
  pointer-events: none;
}

.memory-order {
  position: absolute;
  top: .38rem;
  left: .38rem;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.2rem;
  padding: 0 .28rem;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(13,9,24,.48);
  font: .5rem Georgia, serif;
  letter-spacing: .08em;
  backdrop-filter: blur(5px);
  transition: opacity .45s ease;
}
.photos-scene.morphed .memory-order { opacity: .42; }

.gesture-video {
  position: absolute;
  z-index: 7;
  right: .65rem;
  bottom: .65rem;
  width: 4.5rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scaleX(-1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .75rem;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.32);
  opacity: 0;
  transition: opacity .35s ease;
}

.gesture-video.active { opacity: .58; }

.gesture-meter {
  position: absolute;
  z-index: 8;
  right: 5.65rem;
  bottom: .8rem;
  width: .25rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  opacity: 0;
  transition: opacity .35s ease;
}

.gesture-meter.active { opacity: 1; }
.gesture-meter i { display: block; width: 100%; height: 100%; transform: translateY(var(--gesture-offset, 100%)); background: linear-gradient(var(--gold), var(--pink)); transition: transform .12s linear; }

.gesture-status {
  min-height: 1.1rem;
  margin: .15rem 0 .45rem;
  color: rgba(255,255,255,.48);
  font-size: .7rem;
  letter-spacing: .05em;
}

.photo-actions { display: flex; align-items: center; justify-content: center; gap: .48rem; flex-wrap: wrap; }
.photo-control-button {
  min-height: 2.7rem;
  padding: .62rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(5,7,20,.44);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  touch-action: manipulation;
}
.photo-control-button.primary { color: #fff; border-color: rgba(255,119,196,.45); background: linear-gradient(125deg, rgba(111,70,212,.7), rgba(225,45,143,.68)); }
.photo-control-button:active { transform: scale(.96); }
.photo-actions .day-button { min-height: 2.7rem; padding: .62rem 1rem; }

.sound-control { position: fixed; z-index: 80; top: max(.8rem, env(safe-area-inset-top)); right: .8rem; }
.sound-toggle { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: #fff; background: rgba(4,5,14,.52); box-shadow: 0 .55rem 1.5rem rgba(0,0,0,.24); backdrop-filter: blur(12px); cursor: pointer; }
.sound-toggle.muted { color: rgba(255,255,255,.38); }
.journey-nav {
  position: fixed;
  z-index: 70;
  right: max(.7rem, env(safe-area-inset-right));
  bottom: max(.72rem, calc(env(safe-area-inset-bottom) + .35rem));
  left: max(.7rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.journey-step {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 5.6rem;
  min-height: 2.55rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(5,6,17,.58);
  box-shadow: 0 .7rem 2rem rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  pointer-events: auto;
}
.journey-step#journeyPrev {
  position: fixed;
  top: max(.8rem, env(safe-area-inset-top));
  left: max(.8rem, env(safe-area-inset-left));
  justify-content: center;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  padding: 0;
  border-radius: 50%;
}
.journey-step#journeyPrev small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.journey-step#journeyPrev span { font-size: 1.15rem; }
.journey-step:last-child { justify-content: flex-end; margin-left: auto; }
.journey-step span { font-size: 1rem; line-height: 1; }
.journey-step small { font-size: .7rem; letter-spacing: .08em; }
.journey-step:disabled { visibility: hidden; pointer-events: none; }
.journey-progress {
  position: absolute;
  left: 50%;
  padding: .3rem .58rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: rgba(255,255,255,.42);
  background: rgba(5,6,17,.34);
  font: .6rem Georgia, serif;
  letter-spacing: .12em;
  backdrop-filter: blur(8px);
}
.sound-panel { position: absolute; top: 3.15rem; right: 0; width: 13.5rem; padding: .85rem; border: 1px solid rgba(255,255,255,.13); border-radius: 1rem; color: #fff; background: rgba(8,8,20,.84); box-shadow: 0 1rem 3rem rgba(0,0,0,.35); backdrop-filter: blur(18px); }
.sound-panel > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.sound-panel button { padding: .28rem .55rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); }
.sound-panel label { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: .5rem; margin-top: .55rem; color: rgba(255,255,255,.7); font-size: .72rem; }
.sound-panel input { width: 100%; accent-color: #f04aa3; }
.sound-panel small { display: block; margin-top: .65rem; color: rgba(255,255,255,.36); font-size: .62rem; line-height: 1.45; }

.blessing-scene {
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
  background: #4e86b5;
  transition: background-color 1.1s ease;
}

.sunrise-backdrop,
.sunrise-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sunrise-backdrop {
  background: url("./sunrise-blessing.webp") center 58% / cover no-repeat;
  transform: scale(1.07) translateY(2.5%);
  filter: brightness(.54) saturate(.76) contrast(1.03);
  transition: transform 1.25s cubic-bezier(.2,.72,.2,1), filter 1.25s ease, background-position 1.25s ease;
}

.sunrise-wash {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(7,25,55,.46), rgba(16,43,71,.16) 50%, rgba(7,18,36,.4));
  transition: background 1.15s ease, opacity 1.15s ease;
}

.blessing-scene.phase-1 .sunrise-backdrop {
  background-position: center 54%;
  transform: scale(1.045) translateY(1%);
  filter: brightness(.7) saturate(.86);
}

.blessing-scene.phase-2 .sunrise-backdrop {
  background-position: center 50%;
  transform: scale(1.025) translateY(0);
  filter: brightness(.86) saturate(.94);
}

.blessing-scene.phase-3 .sunrise-backdrop {
  background-position: center 46%;
  transform: scale(1.01) translateY(-1%);
  filter: brightness(1) saturate(1.02);
}

.blessing-scene.phase-1 .sunrise-wash {
  background: linear-gradient(to bottom, rgba(15,43,75,.34), rgba(255,181,132,.05) 56%, rgba(14,28,45,.3));
}

.blessing-scene.phase-2 .sunrise-wash {
  background: linear-gradient(to bottom, rgba(24,67,105,.24), rgba(255,205,159,.04) 56%, rgba(13,26,43,.25));
}

.blessing-scene.phase-3 .sunrise-wash {
  background: linear-gradient(to bottom, rgba(27,72,111,.17), rgba(255,222,183,.02) 58%, rgba(15,28,43,.22));
}

.blessing-pages {
  position: relative;
  z-index: 3;
  width: min(100%, 47rem);
  min-height: min(62vh, 31rem);
}

.blessing-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(1.5rem, 7vw, 3.8rem);
  color: #f8fbff;
  text-shadow: 0 .16rem 1.1rem rgba(4,18,33,.5);
  opacity: 0;
  visibility: hidden;
  transform: translateX(2rem);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.74,.2,1), visibility .7s;
  pointer-events: none;
}

.blessing-card.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.blessing-card.leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(-2rem);
  pointer-events: none;
}

.blessing-card .eyebrow {
  color: rgba(255,255,255,.72);
  text-shadow: 0 .1rem .7rem rgba(7,20,35,.45);
}

.blessing-card[data-blessing-page="1"] {
  align-items: flex-start;
  padding-left: clamp(1.7rem, 9vw, 5rem);
  text-align: left;
}

.blessing-card[data-blessing-page="2"] {
  align-items: flex-end;
  padding-right: clamp(1.7rem, 9vw, 5rem);
  text-align: right;
}

.blessing-card[data-blessing-page="1"] > p,
.blessing-card[data-blessing-page="2"] > p {
  margin-right: 0;
  margin-left: 0;
}

.blessing-card h2 {
  max-width: 42rem;
  font-size: clamp(1.8rem, 6.7vw, 3.65rem);
  line-height: 1.55;
  letter-spacing: .06em;
}

.blessing-card > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 1.35rem auto 2.15rem;
  color: rgba(250,253,255,.82);
  font-family: "Songti SC", STSong, serif;
  font-size: clamp(1rem, 3.8vw, 1.17rem);
  line-height: 1.95;
  letter-spacing: .045em;
}

.day-button {
  min-height: 3.05rem;
  padding: .75rem 1.4rem;
  border: 1px solid rgba(255,255,255,.33);
  color: #fff;
  background: rgba(15,35,54,.24);
  box-shadow: 0 .8rem 2.2rem rgba(15, 34, 52, .16), inset 0 1px rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: manipulation;
}

.blessing-progress {
  position: absolute;
  z-index: 4;
  bottom: max(1.8rem, calc(env(safe-area-inset-bottom) + .8rem));
  left: 50%;
  display: flex;
  gap: .55rem;
  transform: translateX(-50%);
}

.blessing-progress i {
  width: .36rem;
  height: .36rem;
  border-radius: 50%;
  background: rgba(255,255,255,.34);
  box-shadow: 0 .1rem .5rem rgba(10,27,43,.24);
  transition: width .45s ease, background .45s ease;
}

.blessing-progress i.active {
  width: 1.45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
}

.final-copy {
  position: relative;
  z-index: 6;
  width: min(88vw, 38rem);
  padding: 2rem 1rem;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 .2rem 1.2rem #000;
}

.final-date {
  margin: 0 0 .65rem;
  color: #ffd88c;
  font-family: Georgia, serif;
  font-size: .78rem;
  letter-spacing: .72em;
}

.final-copy h2 {
  font-size: clamp(3.2rem, 15vw, 7.8rem);
  letter-spacing: .12em;
  background: linear-gradient(120deg, #fff 10%, #ffd6ef 52%, #ffe09d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.final-copy > p:not(.final-date) {
  margin: 1.25rem 0 1.7rem;
  color: rgba(255,255,255,.75);
  font-family: "Songti SC", STSong, serif;
  line-height: 1.8;
  letter-spacing: .05em;
}

.final-copy span {
  color: rgba(255,255,255,.36);
  font-size: .72rem;
  letter-spacing: .1em;
}

.final-skyline { opacity: .84; }

.story-scene {
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--pink) 18%, transparent), transparent 24rem),
    radial-gradient(circle at 88% 84%, rgba(77, 93, 208, .2), transparent 25rem),
    linear-gradient(155deg, #050510, #0d0920 55%, #070511);
}

.story-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.3px);
  background-size: 83px 79px;
  pointer-events: none;
}

.story-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(85vw, 46rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hot-pink) 18%, transparent), transparent 68%);
  filter: blur(2rem);
  pointer-events: none;
}

.story-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(94vw, 48rem);
  max-height: calc(100svh - 1.5rem);
  padding: clamp(1.15rem, 4vw, 2rem);
  overflow-y: auto;
  text-align: center;
  scrollbar-width: none;
}

.story-shell::-webkit-scrollbar { display: none; }
.story-shell > h2 {
  max-width: 40rem;
  margin: 0;
  font-family: "Songti SC", STSong, Georgia, serif;
  font-size: clamp(1.65rem, 6.6vw, 3.3rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.story-note {
  max-width: 35rem;
  margin: .65rem auto 1.15rem;
  color: var(--muted);
  font-size: clamp(.88rem, 3.2vw, 1rem);
  line-height: 1.75;
}
.story-next {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  margin-top: 1rem;
  border-radius: 999px;
  white-space: normal;
}

.timeline-window {
  width: min(100%, 38rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.4rem;
  background: rgba(255,255,255,.045);
  box-shadow: 0 1.7rem 4rem rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.timeline-track { display: flex; transition: transform .72s cubic-bezier(.2,.78,.2,1); }
.timeline-card {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  min-height: clamp(17rem, 46vh, 25rem);
  text-align: left;
}
.timeline-visual {
  position: relative;
  min-height: 13rem;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(65,49,122,.7), rgba(222,53,145,.38));
}
.timeline-visual img { width: 100%; height: 100%; object-fit: cover; }
.timeline-visual.no-image { display: grid; place-items: center; }
.timeline-visual.no-image::before { content: "✦"; color: rgba(255,255,255,.2); font-size: clamp(5rem, 16vw, 8rem); }
.timeline-visual span {
  position: absolute;
  right: .8rem;
  bottom: .75rem;
  left: .8rem;
  color: rgba(255,255,255,.82);
  font-family: Georgia, serif;
  font-size: .72rem;
  letter-spacing: .17em;
}
.timeline-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.15rem, 4vw, 2rem); }
.timeline-copy small { color: var(--rose); font-family: Georgia, serif; letter-spacing: .16em; }
.timeline-copy h3 { margin: .8rem 0 .7rem; font-family: "Songti SC", STSong, serif; font-size: clamp(1.28rem, 4.7vw, 2rem); font-weight: 500; line-height: 1.45; }
.timeline-copy p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.8; }
.story-stepper { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .75rem; }
.story-stepper span { min-width: 4rem; color: rgba(255,255,255,.52); font: .72rem Georgia, serif; letter-spacing: .1em; }
.round-step { width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; background: rgba(255,255,255,.055); cursor: pointer; }
.round-step:disabled { opacity: .25; }

.map-shell { width: min(96vw, 47rem); }
.memory-map-board {
  position: relative;
  width: min(100%, 39rem);
  min-height: clamp(18rem, 44vh, 26rem);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.6rem;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(86,97,200,.22), transparent 60%),
    rgba(8,9,25,.72);
  background-size: 2.7rem 2.7rem, 2.7rem 2.7rem, auto, auto;
  box-shadow: inset 0 0 4rem rgba(0,0,0,.35), 0 1.5rem 4rem rgba(0,0,0,.22);
}
.memory-map-board::after { content: "回忆坐标"; position: absolute; right: 1rem; bottom: .8rem; color: rgba(255,255,255,.15); font: .62rem "Songti SC", STSong, serif; letter-spacing: .24em; }
.map-route {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.map-route-shadow,
.map-route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-route-shadow { stroke: rgba(0,0,0,.42); stroke-width: 7; }
.map-route-line { stroke: url(#memoryRouteGradient); stroke-width: 2.25; stroke-dasharray: 1 7; animation: route-flow 11s linear infinite; }
.map-route.route-reveal { animation: map-route-reveal .7s ease-out both; }
.map-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 .28rem rgba(255,255,255,.035);
  cursor: pointer;
  color: rgba(255,255,255,.56);
  font: 700 .55rem/1 Arial, sans-serif;
}
.map-pin::after { content: attr(data-label); position: absolute; top: 1.35rem; width: max-content; max-width: 7.5rem; overflow: hidden; color: rgba(255,255,255,.68); font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity .35s ease; }
.map-pin.unlocked, .map-pin.next { border-color: rgba(255,255,255,.82); background: var(--pink); box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--pink) 16%, transparent), 0 0 1.4rem var(--pink); color: #16101f; }
.map-pin.next { animation: map-pulse 2.4s ease-in-out infinite; }
.map-pin.unlocked::after, .map-pin.next::after { opacity: 1; }
.map-pin.active { background: #fff; box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--pink) 24%, transparent), 0 0 2rem var(--pink); }
.map-pin.attention { animation: map-attention .72s ease; }
.map-pin.blocked { animation: map-blocked .36s ease 2; }
.map-progress-hint { width: min(100%, 34rem); margin: -.45rem 0 .1rem; color: rgba(255,255,255,.58); font-size: .76rem; letter-spacing: .04em; text-align: center; }
.map-memory-card {
  display: block;
  align-items: center;
  width: min(100%, 34rem);
  min-height: 4.8rem;
  margin-top: -.75rem;
  padding: .85rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.1rem;
  text-align: left;
  background: rgba(19,14,40,.9);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}
.map-memory-card span { color: var(--rose); font: .66rem Georgia, serif; letter-spacing: .17em; }
.map-memory-card h3 { margin: .28rem 0; font-family: "Songti SC", STSong, serif; font-size: 1.1rem; font-weight: 500; }
.map-memory-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.map-photo-dialog { width: min(calc(100vw - 1.5rem), 58rem); max-width: none; max-height: calc(100svh - 1.5rem); padding: .55rem; overflow: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 1.2rem; color: #fff; background: rgba(7,6,15,.94); box-shadow: 0 2rem 6rem rgba(0,0,0,.7); }
.map-photo-dialog::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(8px); }
.map-dialog-visual { display: grid; place-items: center; width: 100%; min-height: min(62svh, 34rem); overflow: hidden; border-radius: .8rem; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.16), transparent 24%), linear-gradient(145deg, #1c2554, #703267 58%, #c55785); }
.map-photo-dialog img { display: block; width: auto; max-width: 100%; height: min(68svh, 38rem); border-radius: .8rem; object-fit: contain; background: #090812; transform-origin: center; animation: map-photo-reveal .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes map-photo-reveal { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes map-route-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes map-attention { 50% { transform: translate(-50%, -50%) scale(1.42); filter: brightness(1.55); } }
@keyframes map-blocked { 25% { transform: translate(calc(-50% - .2rem), -50%); } 75% { transform: translate(calc(-50% + .2rem), -50%); } }
.map-dialog-placeholder { display: grid; place-items: center; width: min(56vw, 18rem); aspect-ratio: .82; border: .55rem solid rgba(255,255,255,.9); border-radius: .35rem; color: rgba(255,255,255,.82); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.02)); box-shadow: 0 2rem 5rem rgba(0,0,0,.4); font: 500 clamp(3.6rem, 18vw, 8rem)/1 Georgia, serif; }
.map-dialog-copy { padding: 1rem 1rem .75rem; text-align: left; }
.map-dialog-copy span { color: var(--rose); font: .7rem Georgia, serif; letter-spacing: .18em; }
.map-dialog-copy h3 { margin: .35rem 0; font-family: "Songti SC", STSong, serif; font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 500; }
.map-dialog-copy p { margin: 0; color: rgba(255,255,255,.62); line-height: 1.75; }
.map-dialog-close { position: absolute; z-index: 2; top: .9rem; right: .9rem; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; background: rgba(0,0,0,.58); cursor: pointer; font-size: 1.35rem; }

.yearbook-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; width: min(100%, 37rem); }
.yearbook-stat {
  min-height: clamp(8.8rem, 19vh, 11rem);
  padding: 1.15rem .8rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1rem 2.8rem rgba(0,0,0,.18);
  animation: report-rise .7s both;
}
.yearbook-stat strong { display: block; color: transparent; background: linear-gradient(135deg, #fff, var(--rose), var(--gold)); background-clip: text; -webkit-background-clip: text; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 500; }
.yearbook-stat span { display: block; margin-top: .28rem; font-size: .86rem; letter-spacing: .08em; }
.yearbook-stat small { display: block; margin-top: .5rem; color: rgba(255,255,255,.42); font-size: .68rem; line-height: 1.5; }

.quiz-card {
  width: min(100%, 35rem);
  padding: clamp(1.2rem, 4.5vw, 2.2rem);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 1.5rem;
  text-align: left;
  background: rgba(255,255,255,.055);
  box-shadow: 0 1.6rem 4rem rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
}
.quiz-progress { color: var(--rose); font: .66rem Georgia, serif; letter-spacing: .2em; }
.quiz-card h3 { min-height: 3rem; margin: .65rem 0 .75rem; font-family: "Songti SC", STSong, serif; font-size: clamp(1.2rem, 4.5vw, 1.85rem); font-weight: 500; line-height: 1.4; }
.quiz-options { display: grid; gap: .48rem; }
.quiz-option { width: 100%; min-height: 2.8rem; padding: .58rem .85rem; border: 1px solid rgba(255,255,255,.14); border-radius: .9rem; color: rgba(255,255,255,.88); text-align: left; background: rgba(255,255,255,.045); cursor: pointer; }
.quiz-option::before { content: attr(data-letter); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .65rem; border-radius: 50%; color: var(--rose); background: rgba(255,255,255,.08); font: .7rem Georgia, serif; }
.quiz-option.selected { border-color: color-mix(in srgb, var(--pink) 70%, white); background: color-mix(in srgb, var(--pink) 18%, transparent); }
.quiz-feedback { min-height: 1.8rem; margin: .6rem 0 0; color: rgba(255,255,255,.62); font-size: .78rem; line-height: 1.55; }
.quiz-next-question { display: block; margin: 0 0 0 auto; color: var(--rose); }

.capsule-shell { justify-content: center; }
.voice-message {
  display: grid;
  grid-template-columns: 3.3rem minmax(7rem, 1fr);
  grid-template-areas: "play wave" "play label";
  align-items: center;
  gap: .55rem 1rem;
  width: min(92vw, 34rem);
  min-height: 8.5rem;
  margin: .8rem auto .25rem;
  padding: 1.25rem 1.45rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1.6rem;
  color: #fff;
  text-align: left;
  background: linear-gradient(135deg, rgba(104,77,176,.72), rgba(185,48,128,.48));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1.6rem 4rem rgba(0,0,0,.34), 0 0 3rem color-mix(in srgb, var(--pink) 14%, transparent);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.voice-message:hover { transform: translateY(-.18rem); border-color: rgba(255,255,255,.34); }
.voice-play { grid-area: play; display: grid; place-items: center; width: 3.3rem; aspect-ratio: 1; padding-left: .2rem; border-radius: 50%; color: #24152f; background: #fff; box-shadow: 0 0 1.8rem rgba(255,255,255,.28); font-size: 1.15rem; }
.voice-wave { grid-area: wave; display: flex; align-items: center; gap: .28rem; height: 2.4rem; }
.voice-wave i { width: .22rem; height: var(--bar, 45%); border-radius: 1rem; background: rgba(255,255,255,.62); transform-origin: center; }
.voice-wave i:nth-child(2), .voice-wave i:nth-child(6) { --bar: 72%; }
.voice-wave i:nth-child(3), .voice-wave i:nth-child(5) { --bar: 100%; }
.voice-wave i:nth-child(4) { --bar: 62%; }
.voice-message strong { grid-area: label; font-size: .95rem; letter-spacing: .08em; }
.voice-message.playing .voice-play { padding-left: 0; font-size: 0; }
.voice-message.playing .voice-play::after { content: "Ⅱ"; font-size: 1rem; }
.voice-message.playing .voice-wave i { animation: voice-wave .75s ease-in-out infinite alternate; }
.voice-message.playing .voice-wave i:nth-child(2n) { animation-delay: -.35s; }
.capsule-reveal {
  display: grid;
  gap: .7rem;
  width: min(100%, 34rem);
  max-height: 0;
  margin-top: 0;
  padding: 0 1.1rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1.1rem;
  opacity: 0;
  background: rgba(255,255,255,.06);
  transition: max-height .8s ease, opacity .6s ease, padding .6s ease, margin .6s ease;
}
.capsule-reveal.open { max-height: 8rem; margin-top: .65rem; padding: 1rem 1.1rem; overflow: visible; border-color: rgba(255,255,255,.12); opacity: 1; }
.capsule-reveal audio { width: 100%; }
.capsule-reveal p { margin: 0; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.7; }

.future-shell { justify-content: center; }
.future-envelope {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(80vw, 24rem);
  aspect-ratio: 1.55;
  margin: 1rem auto;
  border: 1px solid rgba(124,87,51,.18);
  border-radius: .8rem;
  color: #4b2f3a;
  background: linear-gradient(145deg, #fff8e8, #eecfa9);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.future-envelope > span { font-size: clamp(2.5rem, 12vw, 4.5rem); color: #a85069; }
.future-envelope strong { margin-top: .55rem; font-family: "Songti SC", STSong, serif; font-size: 1.15rem; letter-spacing: .12em; }
.future-envelope small { margin-top: .35rem; color: rgba(75,47,58,.55); }
.future-envelope.open { transform: translateY(-.35rem) rotate(-2deg) scale(.95); opacity: .72; }
.future-letter-dialog {
  width: min(calc(100vw - 1.5rem), 58rem);
  height: min(calc(100svh - 1.5rem), 46rem);
  max-width: none;
  max-height: calc(100svh - 1.5rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 1.35rem;
  color: #392f34;
  background: #f7e8d2;
  box-shadow: 0 2.5rem 7rem rgba(0,0,0,.72);
}
.future-letter-dialog[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  animation: letter-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.future-letter-dialog::backdrop { background: rgba(3,2,9,.82); backdrop-filter: blur(10px); }
.future-dialog-close { position: absolute; z-index: 3; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2.65rem; height: 2.65rem; padding: 0; border: 1px solid rgba(70,48,58,.18); border-radius: 50%; color: #5f4852; background: #fffaf1; box-shadow: 0 .35rem 1.2rem rgba(80,50,42,.12); cursor: pointer; font-size: 1.35rem; }
.future-paper {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(3.8rem, 7vw, 5rem) clamp(1rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  color: #392f34;
  text-align: left;
  opacity: 1;
  background: #fffaf1;
  box-shadow: inset 0 0 0 1px rgba(104,72,55,.08);
}
.future-paper.open { opacity: 1; }
.future-paper img { display: block; width: 100%; height: auto; margin: auto; border-radius: .45rem; object-fit: contain; }
.future-paper h3 { max-width: 36rem; margin: 0 auto 1.4rem; font-family: "Songti SC", STSong, serif; font-size: clamp(1.35rem, 3.5vw, 2.1rem); font-weight: 600; line-height: 1.55; }
.future-paper p { max-width: 36rem; margin: 0 auto; font-family: "Songti SC", STSong, serif; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 2.05; white-space: pre-wrap; }
.future-dialog-actions {
  display: flex;
  justify-content: center;
  padding: .9rem 1rem max(.9rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(92,58,71,.12);
  background: #f7e8d2;
  box-shadow: 0 -.75rem 1.8rem rgba(80,50,42,.08);
}
.future-dialog-done { min-height: 2.8rem; padding: .65rem 1.25rem; border: 1px solid rgba(92,58,71,.18); border-radius: 999px; color: #533744; background: #fffaf1; box-shadow: 0 .55rem 1.5rem rgba(80,50,42,.12); cursor: pointer; }

.configurable-text { position: relative; white-space: pre-line; }
body.studio-preview [data-edit-key] { z-index: 65; min-width: 1.5em; border-radius: .2rem; outline: 1px dashed transparent; outline-offset: .2rem; cursor: text; transition: outline-color .18s ease, background .18s ease; }
body.studio-preview button[data-edit-key] { border-radius: 999px; }
body.studio-preview [data-edit-key]:hover { outline-color: rgba(255,255,255,.72); background: rgba(255,255,255,.055); }
body.studio-preview [data-edit-key]:focus { outline: 2px solid var(--gold); background: rgba(3,5,15,.22); box-shadow: 0 0 0 .32rem color-mix(in srgb, var(--gold) 18%, transparent); }
body.studio-preview .journey-nav,
body.studio-preview .sound-control { display: none; }
body.studio-preview .hidden[data-edit-key] { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
body.studio-preview .opening-copy,
body.studio-preview .final-copy { opacity: 1; pointer-events: auto; }
body.studio-preview .opening-copy .opening-title { opacity: 1 !important; transform: none !important; filter: none !important; }

/* Deep sea blue and warm sunrise are complete themes, not rose with a new accent. */
body[data-theme="blue"] .cover-scene { background: radial-gradient(circle at 50% 42%, rgba(45,132,224,.25), transparent 27rem), radial-gradient(circle at 12% 8%, rgba(47,196,235,.15), transparent 25rem), linear-gradient(155deg, #020712, #07162a 56%, #020610); }
body[data-theme="blue"] .cover-scene::before { background: #275fc5; }
body[data-theme="blue"] .cover-scene::after { background: #25a9d1; }
body[data-theme="blue"] .cover-content h1 { background-image: linear-gradient(135deg, #fff, #c9e6ff 52%, #82cff7 78%, #dff7ff); filter: drop-shadow(0 1rem 3rem rgba(48,145,225,.2)); }
body[data-theme="blue"] .glow-button { background: linear-gradient(120deg, rgba(43,101,199,.8), rgba(40,170,215,.7)); box-shadow: 0 .8rem 3rem rgba(45,137,222,.24), inset 0 1px rgba(255,255,255,.22); }
body[data-theme="blue"] .glow-button::after { background: linear-gradient(115deg, #477de5, #58c9ee, #c6efff); }
body[data-theme="blue"] .night-sky { background: radial-gradient(ellipse at 50% 112%, rgba(35,111,174,.55), transparent 52%), radial-gradient(circle at 20% 12%, rgba(28,89,171,.38), transparent 28rem), linear-gradient(#010611, #06152b 70%, #09213c); }
body[data-theme="blue"] .cake-scene { background: radial-gradient(ellipse at 50% 55%, rgba(52,146,224,.2), transparent 25rem), radial-gradient(ellipse at 50% 105%, rgba(17,68,132,.5), transparent 35rem), linear-gradient(155deg, #020711, #08172a 55%, #020611); }
body[data-theme="blue"] .cake-haze { background: radial-gradient(circle, rgba(70,174,234,.2), rgba(42,103,190,.07) 45%, transparent 70%); }
body[data-theme="blue"] .cake-stage::before { background: rgba(46,143,224,.38); }
body[data-theme="blue"] .cake-tier { background: linear-gradient(90deg, rgba(7,60,113,.46), transparent 18%, rgba(255,255,255,.18) 46%, transparent 62%, rgba(4,43,87,.4)), linear-gradient(#7ad1f6 0%, #3b91d0 54%, #12568f 100%); }
body[data-theme="blue"] .cake-tier::before { background: radial-gradient(ellipse at 50% 42%, #d0f2ff 0%, #80d1f4 50%, #3185bd 100%); }
body[data-theme="blue"] .cake-tier::after { background: rgba(196,238,255,.78); box-shadow: 0 0 .7rem rgba(92,196,240,.55); }
body[data-theme="blue"] .icing::before { border-bottom-color: rgba(214,244,255,.94); }
body[data-theme="blue"] .icing i { background: linear-gradient(90deg, #e2f7ff, #91d9f4 68%, #3d8fbe); }
body[data-theme="blue"] .cake-plate { background: linear-gradient(180deg, #d4f0fb, #82bfdc 50%, #397da8 54%, #164c72); }
body[data-theme="blue"] .candle { --candle-color: #eefaff; background: repeating-linear-gradient(135deg, var(--candle-color) 0 5px, #55a7d8 5px 8px); }
body[data-theme="blue"] .photos-scene { background: radial-gradient(circle at 18% 10%, rgba(52,121,213,.34), transparent 26rem), radial-gradient(circle at 84% 78%, rgba(49,187,220,.2), transparent 28rem), linear-gradient(155deg, #020713, #071729 58%, #02060e); }
body[data-theme="blue"] .photo-aurora { background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(63,119,220,.28), transparent, rgba(59,201,229,.2), transparent); }
body[data-theme="blue"] .story-scene { background: radial-gradient(circle at 12% 12%, rgba(51,130,222,.22), transparent 24rem), radial-gradient(circle at 88% 84%, rgba(45,177,210,.17), transparent 25rem), linear-gradient(155deg, #020712, #08182c 55%, #030711); }
body[data-theme="blue"] .photo-control-button.primary { border-color: rgba(111,207,255,.48); background: linear-gradient(125deg, rgba(48,105,201,.82), rgba(43,171,211,.72)); }
body[data-theme="blue"] .memory-placeholder .placeholder-surface { background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.2), transparent 30%), linear-gradient(145deg, #092043, #286fa9 58%, #56b8d8); }
body[data-theme="blue"] .final-copy h2 { background-image: linear-gradient(120deg, #fff 10%, #c6e7ff 55%, #8bdcf3); }

body[data-theme="gold"] .cover-scene { background: radial-gradient(circle at 50% 42%, rgba(227,157,52,.25), transparent 27rem), radial-gradient(circle at 12% 8%, rgba(194,89,35,.14), transparent 25rem), linear-gradient(155deg, #0d0702, #211205 56%, #0b0602); }
body[data-theme="gold"] .cover-scene::before { background: #a65022; }
body[data-theme="gold"] .cover-scene::after { background: #d79b35; }
body[data-theme="gold"] .cover-content h1 { background-image: linear-gradient(135deg, #fff9e8, #ffe2a0 48%, #f5b94d 76%, #fff4ce); filter: drop-shadow(0 1rem 3rem rgba(221,147,38,.2)); }
body[data-theme="gold"] .glow-button { background: linear-gradient(120deg, rgba(157,75,27,.82), rgba(218,151,43,.74)); box-shadow: 0 .8rem 3rem rgba(208,129,34,.25), inset 0 1px rgba(255,255,255,.22); }
body[data-theme="gold"] .glow-button::after { background: linear-gradient(115deg, #b86828, #f1ad3f, #ffe5a5); }
body[data-theme="gold"] .night-sky { background: radial-gradient(ellipse at 50% 112%, rgba(128,64,20,.55), transparent 52%), radial-gradient(circle at 20% 12%, rgba(120,58,18,.35), transparent 28rem), linear-gradient(#0a0501, #1d1005 70%, #351b08); }
body[data-theme="gold"] .cake-scene { background: radial-gradient(ellipse at 50% 55%, rgba(225,150,43,.2), transparent 25rem), radial-gradient(ellipse at 50% 105%, rgba(104,48,17,.5), transparent 35rem), linear-gradient(155deg, #0c0702, #211205 55%, #0b0602); }
body[data-theme="gold"] .cake-haze { background: radial-gradient(circle, rgba(242,174,65,.2), rgba(156,74,25,.07) 45%, transparent 70%); }
body[data-theme="gold"] .cake-stage::before { background: rgba(220,137,35,.4); }
body[data-theme="gold"] .cake-tier { background: linear-gradient(90deg, rgba(112,48,8,.43), transparent 18%, rgba(255,255,255,.19) 46%, transparent 62%, rgba(82,33,4,.38)), linear-gradient(#ffd67c 0%, #e9a43a 54%, #a95d16 100%); }
body[data-theme="gold"] .cake-tier::before { background: radial-gradient(ellipse at 50% 42%, #fff0bd 0%, #ffd075 50%, #c9812b 100%); }
body[data-theme="gold"] .cake-tier::after { background: rgba(255,239,182,.78); box-shadow: 0 0 .7rem rgba(244,184,74,.5); }
body[data-theme="gold"] .icing::before { border-bottom-color: rgba(255,241,196,.95); }
body[data-theme="gold"] .icing i { background: linear-gradient(90deg, #fff5d5, #ffd685 68%, #c6832d); }
body[data-theme="gold"] .cake-plate { background: linear-gradient(180deg, #f9e6bd, #d9ab62 50%, #95612a 54%, #563316); }
body[data-theme="gold"] .candle { --candle-color: #fff8df; background: repeating-linear-gradient(135deg, var(--candle-color) 0 5px, #dd9a3b 5px 8px); }
body[data-theme="gold"] .photos-scene { background: radial-gradient(circle at 18% 10%, rgba(188,92,31,.3), transparent 26rem), radial-gradient(circle at 84% 78%, rgba(226,166,54,.2), transparent 28rem), linear-gradient(155deg, #0d0702, #211207 58%, #0b0602); }
body[data-theme="gold"] .photo-aurora { background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(190,90,31,.26), transparent, rgba(239,178,67,.2), transparent); }
body[data-theme="gold"] .story-scene { background: radial-gradient(circle at 12% 12%, rgba(199,104,35,.2), transparent 24rem), radial-gradient(circle at 88% 84%, rgba(229,167,52,.16), transparent 25rem), linear-gradient(155deg, #0c0702, #211307 55%, #0b0602); }
body[data-theme="gold"] .photo-control-button.primary { border-color: rgba(255,202,106,.5); background: linear-gradient(125deg, rgba(161,77,25,.84), rgba(216,149,42,.72)); }
body[data-theme="gold"] .memory-placeholder .placeholder-surface { background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.2), transparent 30%), linear-gradient(145deg, #35180a, #98501d 58%, #dca23f); }
body[data-theme="gold"] .final-copy h2 { background-image: linear-gradient(120deg, #fff8e7 10%, #ffd98a 55%, #f1a83e); }

/* Cool, neutral palettes keep the same story rhythm without inheriting the rose styling. */
body[data-theme="midnight"] .cover-scene {
  background: radial-gradient(circle at 50% 42%, rgba(46,112,205,.24), transparent 27rem), radial-gradient(circle at 12% 8%, rgba(55,185,230,.12), transparent 24rem), linear-gradient(155deg, #01040b, #071327 56%, #02050c);
}
body[data-theme="midnight"] .cover-content h1 { background-image: linear-gradient(135deg, #fff, #c9e1ff 55%, #75dfff); filter: drop-shadow(0 1rem 3rem rgba(54,140,232,.2)); }
body[data-theme="midnight"] .glow-button { background: linear-gradient(120deg, rgba(25,72,151,.82), rgba(40,154,205,.72)); box-shadow: 0 .8rem 3rem rgba(36,125,215,.24), inset 0 1px rgba(255,255,255,.2); }
body[data-theme="midnight"] .glow-button::after { background: linear-gradient(115deg, #376ed6, #53c6eb, #a8d8ff); }
body[data-theme="midnight"] .cake-scene { background: radial-gradient(ellipse at 50% 55%, rgba(41,119,205,.2), transparent 25rem), radial-gradient(ellipse at 50% 105%, rgba(12,42,85,.58), transparent 35rem), linear-gradient(155deg, #02050d, #071324 55%, #01040a); }
body[data-theme="midnight"] .cake-haze { background: radial-gradient(circle, rgba(57,151,230,.2), rgba(31,75,150,.07) 45%, transparent 70%); }
body[data-theme="midnight"] .cake-stage::before { background: rgba(40,132,219,.38); }
body[data-theme="midnight"] .cake-tier { background: linear-gradient(90deg, rgba(5,43,87,.48), transparent 18%, rgba(255,255,255,.18) 46%, transparent 62%, rgba(2,28,61,.42)), linear-gradient(#68bff1 0%, #2d79bd 54%, #0b3b73 100%); box-shadow: inset 0 .45rem .5rem rgba(255,255,255,.14), inset 0 -1rem 1.1rem rgba(2,26,59,.3), 0 .5rem 1.5rem rgba(16,82,154,.24); }
body[data-theme="midnight"] .cake-tier::before { background: radial-gradient(ellipse at 50% 42%, #b8e7ff 0%, #65baf0 50%, #23689f 100%); box-shadow: inset 0 .15rem .38rem rgba(255,255,255,.42), 0 .2rem .4rem rgba(4,40,78,.3); }
body[data-theme="midnight"] .cake-tier::after { background: rgba(170,224,255,.76); box-shadow: 0 0 .7rem rgba(80,181,245,.55); }
body[data-theme="midnight"] .icing::before { border-bottom-color: rgba(190,232,255,.94); }
body[data-theme="midnight"] .icing i { background: linear-gradient(90deg, #d9f2ff, #79c9f3 68%, #327ab5); }
body[data-theme="midnight"] .cake-plate { background: linear-gradient(180deg, #c4e8fb, #67abd5 50%, #245f91 54%, #0b294c); box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.5), 0 0 1.6rem rgba(62,156,219,.25); }
body[data-theme="midnight"] .candle { --candle-color: #eaf8ff; background: repeating-linear-gradient(135deg, var(--candle-color) 0 5px, #3c91d1 5px 8px); }
body[data-theme="midnight"] .photos-scene { background: radial-gradient(circle at 18% 10%, rgba(49,105,197,.34), transparent 26rem), radial-gradient(circle at 84% 78%, rgba(33,153,194,.19), transparent 28rem), linear-gradient(155deg, #020713, #061323 58%, #02050c); }
body[data-theme="midnight"] .photo-aurora { background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(57,99,203,.28), transparent, rgba(49,190,220,.2), transparent); }
body[data-theme="midnight"] .story-scene { background: radial-gradient(circle at 12% 12%, rgba(41,116,215,.21), transparent 24rem), radial-gradient(circle at 88% 84%, rgba(33,148,185,.17), transparent 25rem), linear-gradient(155deg, #020611, #071426 55%, #02060d); }
body[data-theme="midnight"] .photo-control-button.primary { border-color: rgba(104,194,255,.48); background: linear-gradient(125deg, rgba(31,84,173,.82), rgba(38,154,199,.72)); }
body[data-theme="midnight"] .memory-placeholder .placeholder-surface { background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.2), transparent 30%), linear-gradient(145deg, #07162b, #1c568c 58%, #3d9cc0); }
body[data-theme="midnight"] .final-copy h2 { background-image: linear-gradient(120deg, #fff 10%, #b9d9ff 55%, #79e6ff); }
body[data-theme="midnight"] #memoryRouteGradient stop:nth-child(1) { stop-color: #4e91ff; }
body[data-theme="midnight"] #memoryRouteGradient stop:nth-child(2) { stop-color: #8deaff; }
body[data-theme="midnight"] #memoryRouteGradient stop:nth-child(3) { stop-color: #d6eaff; }

body[data-theme="forest"] .cover-scene { background: radial-gradient(circle at 50% 42%, rgba(35,129,105,.24), transparent 27rem), radial-gradient(circle at 12% 8%, rgba(196,164,73,.11), transparent 24rem), linear-gradient(155deg, #010807, #08201c 56%, #020a09); }
body[data-theme="forest"] .cover-content h1 { background-image: linear-gradient(135deg, #fff, #c9f0e2 55%, #e8ce80); filter: drop-shadow(0 1rem 3rem rgba(35,145,115,.2)); }
body[data-theme="forest"] .glow-button { background: linear-gradient(120deg, rgba(15,91,74,.84), rgba(176,139,47,.68)); box-shadow: 0 .8rem 3rem rgba(18,112,88,.24), inset 0 1px rgba(255,255,255,.2); }
body[data-theme="forest"] .glow-button::after { background: linear-gradient(115deg, #19745f, #55c5a2, #e0bc62); }
body[data-theme="forest"] .cake-scene { background: radial-gradient(ellipse at 50% 55%, rgba(36,145,110,.19), transparent 25rem), radial-gradient(ellipse at 50% 105%, rgba(8,58,49,.58), transparent 35rem), linear-gradient(155deg, #010908, #071c18 55%, #010706); }
body[data-theme="forest"] .cake-haze { background: radial-gradient(circle, rgba(59,171,133,.19), rgba(177,139,48,.055) 45%, transparent 70%); }
body[data-theme="forest"] .cake-stage::before { background: rgba(43,151,115,.36); }
body[data-theme="forest"] .cake-tier { background: linear-gradient(90deg, rgba(4,70,57,.48), transparent 18%, rgba(255,255,255,.17) 46%, transparent 62%, rgba(3,44,37,.42)), linear-gradient(#66c6a5 0%, #23876c 54%, #0a4b3e 100%); box-shadow: inset 0 .45rem .5rem rgba(255,255,255,.14), inset 0 -1rem 1.1rem rgba(2,44,36,.3), 0 .5rem 1.5rem rgba(15,102,80,.24); }
body[data-theme="forest"] .cake-tier::before { background: radial-gradient(ellipse at 50% 42%, #d6f3e7 0%, #72cbae 50%, #247c66 100%); box-shadow: inset 0 .15rem .38rem rgba(255,255,255,.42), 0 .2rem .4rem rgba(4,58,47,.3); }
body[data-theme="forest"] .cake-tier::after { background: rgba(231,210,145,.78); box-shadow: 0 0 .7rem rgba(222,185,91,.45); }
body[data-theme="forest"] .icing::before { border-bottom-color: rgba(239,221,166,.95); }
body[data-theme="forest"] .icing i { background: linear-gradient(90deg, #fff2c8, #dfbf69 68%, #94752e); }
body[data-theme="forest"] .cake-plate { background: linear-gradient(180deg, #d9ede3, #6da995 50%, #2d6757 54%, #0d352e); box-shadow: 0 .7rem 1.6rem rgba(0,0,0,.5), 0 0 1.6rem rgba(45,142,110,.24); }
body[data-theme="forest"] .candle { --candle-color: #fff6d9; background: repeating-linear-gradient(135deg, var(--candle-color) 0 5px, #2e8f74 5px 8px); }
body[data-theme="forest"] .photos-scene { background: radial-gradient(circle at 18% 10%, rgba(30,112,94,.33), transparent 26rem), radial-gradient(circle at 84% 78%, rgba(184,143,52,.16), transparent 28rem), linear-gradient(155deg, #02100e, #08201a 58%, #020b09); }
body[data-theme="forest"] .photo-aurora { background: conic-gradient(from 120deg at 50% 50%, transparent, rgba(33,131,103,.28), transparent, rgba(203,167,69,.17), transparent); }
body[data-theme="forest"] .story-scene { background: radial-gradient(circle at 12% 12%, rgba(34,137,106,.21), transparent 24rem), radial-gradient(circle at 88% 84%, rgba(187,148,51,.15), transparent 25rem), linear-gradient(155deg, #020d0b, #09201b 55%, #020a08); }
body[data-theme="forest"] .photo-control-button.primary { border-color: rgba(114,213,181,.48); background: linear-gradient(125deg, rgba(22,108,86,.84), rgba(165,128,42,.68)); }
body[data-theme="forest"] .memory-placeholder .placeholder-surface { background: radial-gradient(circle at 28% 24%, rgba(255,255,255,.2), transparent 30%), linear-gradient(145deg, #071c18, #176e5a 58%, #9a7b31); }
body[data-theme="forest"] .final-copy h2 { background-image: linear-gradient(120deg, #fff 10%, #bfe9d9 55%, #ead183); }
body[data-theme="forest"] #memoryRouteGradient stop:nth-child(1) { stop-color: #3fc29c; }
body[data-theme="forest"] #memoryRouteGradient stop:nth-child(2) { stop-color: #e1c16a; }
body[data-theme="forest"] #memoryRouteGradient stop:nth-child(3) { stop-color: #b9ebdb; }

body[data-theme="blue"] .voice-message { background: linear-gradient(135deg, rgba(30,86,169,.82), rgba(34,157,194,.58)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1.6rem 4rem rgba(0,0,0,.34), 0 0 2rem rgba(66,174,226,.14); }
body[data-theme="gold"] .voice-message { background: linear-gradient(135deg, rgba(125,58,21,.88), rgba(205,139,39,.62)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1.6rem 4rem rgba(0,0,0,.34), 0 0 2rem rgba(224,155,46,.14); }
body[data-theme="midnight"] .voice-message { background: linear-gradient(135deg, rgba(18,57,124,.9), rgba(28,130,177,.6)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1.6rem 4rem rgba(0,0,0,.34), 0 0 2rem rgba(48,143,215,.14); }
body[data-theme="forest"] .voice-message { background: linear-gradient(135deg, rgba(11,77,62,.9), rgba(143,112,37,.58)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 1.6rem 4rem rgba(0,0,0,.34), 0 0 2rem rgba(54,157,123,.13); }
body[data-theme="blue"] .day-button, body[data-theme="blue"] .scene-button, body[data-theme="blue"] .next-blessing-button { border-color: rgba(120,205,245,.34); background: rgba(17,74,126,.46); }
body[data-theme="gold"] .day-button, body[data-theme="gold"] .scene-button, body[data-theme="gold"] .next-blessing-button { border-color: rgba(246,195,103,.36); background: rgba(112,55,20,.5); }
body[data-theme="midnight"] .day-button, body[data-theme="midnight"] .scene-button, body[data-theme="midnight"] .next-blessing-button { border-color: rgba(105,187,239,.34); background: rgba(11,51,105,.5); }
body[data-theme="forest"] .day-button, body[data-theme="forest"] .scene-button, body[data-theme="forest"] .next-blessing-button { border-color: rgba(125,210,180,.34); background: rgba(11,72,59,.5); }

.story-next,
.photo-actions .day-button {
  border-color: color-mix(in srgb, var(--pink) 45%, rgba(255,255,255,.28));
  background: linear-gradient(125deg, color-mix(in srgb, var(--hot-pink) 62%, #171126), color-mix(in srgb, var(--pink) 52%, #25152c));
  box-shadow: 0 .8rem 2.2rem rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.2);
}

@keyframes map-pulse { 50% { filter: brightness(1.35); } }
@keyframes route-flow { to { stroke-dashoffset: -80; } }
@keyframes report-rise { from { opacity: 0; transform: translateY(1rem); } }
@keyframes music-spin { to { transform: rotate(1turn); } }
@keyframes voice-wave { from { transform: scaleY(.45); opacity: .45; } to { transform: scaleY(1.08); opacity: 1; } }
@keyframes letter-rise { from { opacity: 0; transform: translateY(1.5rem) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 520px) {
  .story-shell { width: 100%; padding-right: .35rem; padding-left: .35rem; }
  .story-shell > h2 { max-width: min(92vw, 21rem); font-size: clamp(1.35rem, 6.2vw, 1.8rem); line-height: 1.3; }
  .story-note { margin-bottom: .8rem; font-size: .82rem; }
  .timeline-card { grid-template-columns: 1fr; min-height: 0; padding-top: .7rem; }
  .timeline-visual { width: min(70vw, 16rem); min-height: 0; aspect-ratio: 4 / 5; margin: 0 auto; border-radius: 1rem; }
  .timeline-copy { justify-content: flex-start; padding: 1rem 1.1rem 1.2rem; }
  .timeline-copy h3 { margin: .5rem 0; font-size: 1.2rem; }
  .timeline-copy p { font-size: .8rem; line-height: 1.65; }
  .memory-map-board { min-height: 19rem; }
  .map-pin::after { max-width: 5.8rem; overflow: hidden; text-overflow: ellipsis; }
  .yearbook-stat { min-height: 8.1rem; padding: .9rem .45rem; }
  .yearbook-stat strong { font-size: 1.9rem; }
  .voice-message { width: min(94vw, 30rem); min-height: 7.5rem; padding: 1rem; }
  .capsule-reveal.open { max-height: 8rem; }
  .future-envelope { width: min(72vw, 20rem); }
  .future-envelope.open { margin-top: 0; }
  .future-letter-dialog { width: calc(100vw - 1rem); height: calc(100svh - 1rem); max-height: calc(100svh - 1rem); border-radius: 1rem; }
  .future-paper { padding: 3.8rem 1rem 1.8rem; }
  .future-dialog-actions { padding: .75rem .8rem max(.75rem, env(safe-area-inset-bottom)); }
  .future-paper h3 { font-size: 1.35rem; }
  .future-paper p { font-size: 1rem; line-height: 1.9; }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spark {
  0%, 100% { transform: scale(.72) rotate(0); opacity: .65; }
  50% { transform: scale(1.15) rotate(36deg); opacity: 1; }
}

@keyframes flame-dance {
  from { transform: translateX(-50%) rotate(-3deg) scale(.94, 1.04); }
  to { transform: translateX(-50%) rotate(4deg) scale(1.05, .95); }
}

@keyframes flame-out {
  0% { opacity: 1; transform: translateX(-50%) scale(1); }
  45% { opacity: .8; transform: translateX(-62%) scale(.4, 1.4) rotate(-18deg); }
  100% { opacity: 0; transform: translateX(-90%) translateY(-.6rem) scale(.05); }
}

@keyframes smoke {
  0% { opacity: 0; transform: translate(0, .25rem) scale(.5); }
  20% { opacity: .7; }
  100% { opacity: 0; transform: translate(.3rem, -1.5rem) scale(1.5); }
}

@keyframes aurora-drift {
  to { transform: rotate(1turn) scale(1.08); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .cake-content { transform: scale(.88); }
  .cake-stage { width: min(48vw, 21rem); height: min(43vw, 18.5rem); margin-top: -.4rem; }
  .cake-content .eyebrow { margin-bottom: .35rem; }
  .cake-note { margin-top: .25rem; }
  .wish-controls { min-height: 4.5rem; gap: .25rem; }
  .blessing-pages { min-height: 78vh; }
  .blessing-card { padding: 1rem; }
  .blessing-card > p:not(.eyebrow) { margin: .7rem auto 1rem; line-height: 1.7; }
  .photos-content { height: 96svh; }
  .photos-content .eyebrow { margin-bottom: .3rem; }
  .photos-note { display: none; }
  .photo-stage-shell { min-height: 11rem; }
}

@media (max-width: 420px) {
  .cake-content { transform: translateY(-.6rem); }
  .cake-stage { margin-top: -.2rem; }
  .cover-note { line-height: 1.75; }
  .photos-content .eyebrow { margin-bottom: .45rem; }
  .photo-stage-shell { width: 94vw; }
  .memory-photo { width: clamp(2.8rem, 14vw, 4rem); }
  .photo-actions { gap: .35rem; }
  .photo-control-button, .photo-actions .day-button { min-height: 2.5rem; padding: .55rem .76rem; font-size: .75rem; }
}

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