:root {
  color-scheme: light;
  --pink-0: #fffafb;
  --pink-1: #fff4f6;
  --pink-2: #ffe8ee;
  --pink-3: #f8b6c7;
  --pink-4: #ed6d91;
  --pink-5: #d94571;
  --mint: #fff5f8;
  --mint-deep: #ffeaf1;
  --ink: #51434a;
  --muted: #9a858e;
  --white: #fff;
  --display: 'Playfair Display', Georgia, serif;
  --body: 'Nunito', 'Trebuchet MS', Arial, sans-serif;
  --hand: 'Caveat', cursive;
  --shadow: 0 18px 55px rgba(214, 129, 153, .12);
}
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100svh; overflow-x: hidden; color: var(--ink);
  background: radial-gradient(ellipse at 50% 38%, #fff 0%, var(--pink-1) 57%, #fff0f4 100%);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
}
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #db6c8e; outline-offset: 4px; }
.ambient-hearts, .sparkles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient-heart { position: absolute; color: #ec9eb4; opacity: .48; animation: float-heart linear infinite; user-select: none; }
.sparkle { position: absolute; color: #e6a8b9; opacity: .34; animation: twinkle 3.8s ease-in-out infinite; }
@keyframes float-heart { 0% { transform: translate3d(0, 12vh, 0) rotate(-12deg); opacity: 0; } 12% { opacity: .42; } 85% { opacity: .32; } 100% { transform: translate3d(22px, -112vh, 0) rotate(18deg); opacity: 0; } }
@keyframes twinkle { 0%,100% { opacity: .12; transform: scale(.8) rotate(0); } 50% { opacity: .6; transform: scale(1.15) rotate(18deg); } }
.topbar, .site-footer { position: relative; z-index: 2; width: min(100% - 48px, 1120px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
.topbar { height: 72px; }
.wordmark { color: #946b79; font-weight: 900; font-size: 14px; letter-spacing: .04em; text-decoration: none; }
.wordmark span { color: var(--pink-5); font-size: 18px; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.sound-toggle { width: 34px; height: 34px; border: 1px solid #f4d6df; border-radius: 50%; background: rgba(255,255,255,.6); color: #c66b88; cursor: pointer; transition: .2s ease; }
.sound-toggle[aria-pressed="true"] { background: #f8dbe4; color: #b84c70; }
.sound-icon { font-size: 17px; line-height: 1; }
#app { min-height: calc(100svh - 118px); display: grid; place-items: center; position: relative; z-index: 1; padding: 18px 20px 42px; }
.page { display: none; width: 100%; min-height: 570px; align-items: center; justify-items: center; animation: page-in .55s cubic-bezier(.2,.75,.25,1) both; }
.page.is-active { display: grid; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.intro-content { min-height: 550px; width: min(100%, 520px); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; }
.intro-title { margin: 3px 0 4px; font-family: var(--body); font-size: clamp(20px, 4vw, 25px); line-height: 1.23; font-weight: 900; letter-spacing: -.025em; color: #a85d76; }
.intro-title span { color: #d65e84; }
.intro-copy { margin: 3px 0 5px; font-size: 13px; color: #b17e8f; font-weight: 800; }
.shooting-stage { position: relative; width: min(100%, 340px); height: 390px; margin: 0 auto; user-select: none; --bow-x: 0px; --bow-y: 0px; --aim-angle: 0deg; --flight-distance: 116px; --arrow-bottom: 69px; }
.shoot-button { position: absolute; z-index: 5; top: 15px; left: 50%; transform: translateX(-50%); min-height: 35px; padding: 7px 18px; border: 1px solid rgba(255,255,255,.95); border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(201,111,139,.13); color: #b94e72; font: 900 12px/1 var(--body); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; white-space: nowrap; animation: shoot-button-breathe 2.8s ease-in-out infinite; }
.shoot-button span { margin-left: 4px; font-size: 15px; }
.shoot-button:hover:not(:disabled) { transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 20px rgba(201,111,139,.2); }
.shoot-button:active:not(:disabled) { transform: translateX(-50%) scale(.97); }
.shoot-button:focus-visible, .bow-control:focus-visible { outline: 3px solid rgba(220,94,133,.35); outline-offset: 4px; }
.shoot-button:disabled { opacity: .55; cursor: default; animation: none; }
@keyframes shoot-button-breathe { 0%,100% { box-shadow: 0 5px 16px rgba(201,111,139,.13); } 50% { box-shadow: 0 7px 22px rgba(224,102,143,.24); } }
.envelope-wrap { position: absolute; z-index: 2; width: 180px; height: 126px; left: 50%; top: 74px; transform: translateX(-50%); border-radius: 17px; transition: filter .3s ease; }
.envelope-art { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 9px 12px rgba(194,105,132,.15)); transform-origin: 50% 50%; animation: envelope-float 3.15s ease-in-out infinite; }
@keyframes envelope-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-1deg); } }
.envelope-paper { transform-origin: 95px 27px; transition: transform .52s cubic-bezier(.2,.75,.25,1); }
.envelope-flap { transform-origin: 95px 38px; transition: transform .5s cubic-bezier(.2,.75,.25,1), opacity .24s ease; }
.envelope-glow { transition: opacity .38s ease; }
.envelope-wrap.is-hit { filter: drop-shadow(0 0 18px rgba(237,91,137,.42)); animation: envelope-hit .62s cubic-bezier(.25,.8,.25,1); }
.envelope-wrap.is-hit .envelope-art { animation: envelope-impact .62s ease; }
@keyframes envelope-impact { 0%,100% { transform: translateY(0) scale(1); } 24% { transform: translateY(-5px) scale(1.045); } 48% { transform: translateY(2px) scale(.97); } 70% { transform: translateY(-2px) scale(1.015); } }
.envelope-wrap.is-open .envelope-flap { transform: rotateX(180deg); opacity: .08; }
.envelope-wrap.is-open .envelope-paper { transform: translateY(-13px) scale(1.04); }
.envelope-wrap.is-open .envelope-glow { opacity: .78; }
@keyframes envelope-hit { 0%,100% { transform: translateX(-50%) rotate(0); } 18% { transform: translateX(calc(-50% + 5px)) rotate(2.5deg); } 38% { transform: translateX(calc(-50% - 5px)) rotate(-2.5deg); } 60% { transform: translateX(calc(-50% + 2px)) rotate(1deg); } }
.flight-arrow { position: absolute; z-index: 4; left: calc(50% + var(--bow-x)); top: calc(100% - var(--arrow-bottom) - 84px - var(--bow-y)); width: 27px; height: 84px; transform: translateX(-50%) rotate(var(--aim-angle)); transform-origin: center bottom; filter: drop-shadow(0 3px 3px rgba(170,103,125,.17)); opacity: 1; pointer-events: none; }
.flight-arrow.is-fired { animation: arrow-flight .64s cubic-bezier(.18,.75,.25,1) forwards; }
@keyframes arrow-flight { 0% { opacity: 1; transform: translateX(-50%) rotate(var(--shot-angle, var(--aim-angle))) translateY(0); } 18% { opacity: 1; transform: translateX(-50%) rotate(calc(var(--shot-angle, var(--aim-angle)) - 3deg)) translateY(8px); } 100% { opacity: .08; transform: translateX(-50%) rotate(var(--shot-angle, var(--aim-angle))) translateY(calc(-1 * var(--shot-distance, var(--flight-distance)))); } }
.bow-control { position: absolute; z-index: 3; left: calc(50% + var(--bow-x)); bottom: calc(38px + var(--bow-y)); width: 100px; height: 68px; padding: 0; border: 0; border-radius: 16px; background: transparent; transform: translateX(-50%) rotate(var(--aim-angle)); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; transition: left .18s ease, bottom .18s ease, transform .18s ease; }
.bow-control:active { cursor: grabbing; }
.bow-control:disabled { cursor: default; pointer-events: none; }
.bottom-bow { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 82%; animation: bow-idle 3s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(190,100,128,.15)); }
@keyframes bow-idle { 0%,100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-2px) scaleX(1.025); } }
.bow-string { transform-origin: 50% 54px; transition: transform .16s ease; }
.bow-control.is-releasing .bottom-bow { animation: bow-release .42s cubic-bezier(.18,.7,.25,1) both; }
.bow-control.is-releasing .bow-string { animation: string-release .34s ease-out both; }
@keyframes bow-release { 0% { transform: translateY(0) scaleX(1); } 22% { transform: translateY(8px) scaleX(.78); } 58% { transform: translateY(-3px) scaleX(1.08); } 100% { transform: translateY(0) scaleX(1); } }
@keyframes string-release { 0% { transform: scaleY(1); } 30% { transform: scaleY(2.1); } 65% { transform: scaleY(.65); } 100% { transform: scaleY(1); } }
.shooting-stage.is-aiming .bottom-bow { animation: none; }
.shooting-status { position: absolute; left: 0; right: 0; bottom: -4px; min-height: 18px; margin: 0; color: #b59aa4; font-size: 11px; font-weight: 800; letter-spacing: .015em; }
.shooting-stage.is-shooting .shooting-status { color: #cc6685; }
.shooting-stage.is-shooting .shoot-button { pointer-events: none; }
@media (max-width: 600px) {
  .intro-content { min-height: 520px; }
  .shooting-stage { width: min(100%, 320px); height: 380px; }
  .envelope-wrap { top: 70px; }
  .flight-arrow.is-fired { animation-duration: .64s; }
  .intro-title { font-size: 21px; }
}
@media (max-width: 360px) {
  .shooting-stage { width: min(100%, 290px); height: 365px; }
  .envelope-wrap { top: 67px; transform: translateX(-50%) scale(.92); }
  .shoot-button { top: 10px; }
  .shooting-stage { --arrow-bottom: 73px; }
  .flight-arrow { top: calc(100% - var(--arrow-bottom) - 84px - var(--bow-y)); }
  .bow-control { bottom: calc(42px + var(--bow-y)); width: 94px; height: 64px; }
}

.tiny-note { margin: 0; font-size: 12px; color: #c2a5af; letter-spacing: .08em; }
.mint-card { position: relative; width: min(100%, 390px); padding: 27px 29px 25px; border: 1px solid rgba(255,255,255,.95); border-radius: 23px; background: linear-gradient(145deg, #fff5f8, var(--mint) 65%, #ffeaf1); box-shadow: var(--shadow), inset 0 0 0 1px rgba(207,239,215,.3); text-align: center; overflow: hidden; }
.mint-card::before { content: ''; position: absolute; width: 230px; height: 160px; left: -130px; top: -110px; border-radius: 50%; background: rgba(255,255,255,.6); }
.card-topline { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; color: #b28c98; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.mini-heart { color: #e78aa5; font-size: 10px; }
.letter-stamp { width: 37px; height: 37px; display: grid; place-items: center; margin: 19px auto 10px; border-radius: 50%; background: #ffe4ec; color: #d86688; font-size: 21px; box-shadow: 0 4px 12px rgba(224,141,165,.13); }
.letter-greeting { margin: 4px 0 5px; color: #d16a89; font-size: 13px; font-weight: 900; }
.card-heading { margin: 0; font-family: var(--display); color: #55474c; font-size: 22px; font-weight: 600; line-height: 1.18; }
.letter-body { margin: 17px auto 13px; max-width: 294px; text-align: left; color: #76686e; font-size: 16px; line-height: 1.65; }
.letter-body p { margin: 0 0 10px; }
.card-footer { display: flex; flex-direction: column; align-items: flex-end; margin: 7px 5px 14px; }
.handwritten { font-family: var(--hand); font-size: 20px; line-height: 1.1; color: #a87a88; }
.signature { font-family: var(--hand); font-size: 25px; font-weight: 700; color: #d35e82; line-height: 1.1; }
.pill-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; padding: 10px 22px; border: 0; border-radius: 999px; background: linear-gradient(110deg, #e85f88, #d94673); box-shadow: 0 7px 17px rgba(222, 71, 116, .2); color: #fff; font-size: 15px; font-weight: 900; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.pill-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(222, 71, 116, .25); }
.pill-button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.pill-button:disabled { cursor: not-allowed; opacity: .42; box-shadow: none; }
.pill-button span { font-size: 17px; line-height: 1; }
.question-card { width: min(100%, 370px); padding: 26px 24px 24px; }
.flower-bloom { width: 94px; height: 104px; margin: 0 auto 7px; display: block; overflow: visible; }
.flower-bloom svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flower-stem { stroke-dasharray: 90; stroke-dashoffset: 90; opacity: .45; }
.flower-leaf { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.18); }
.flower-petal { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.08); }
.flower-center { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.1); }
.flower-bloom.is-blooming .flower-stem { animation: stem-grow .95s cubic-bezier(.2,.7,.2,1) .12s forwards; }
.flower-bloom.is-blooming .flower-leaf { animation: leaf-open .72s cubic-bezier(.18,.82,.25,1) .7s forwards; }
.flower-bloom.is-blooming .flower-leaf-right { animation-delay: .84s; }
.flower-bloom.is-blooming .flower-petal { animation: petal-open 1.05s cubic-bezier(.16,1,.3,1) var(--petal-delay, .1s) forwards; }
.flower-bloom.is-blooming .flower-center { animation: center-appear .65s cubic-bezier(.16,1,.3,1) .72s forwards; }
@keyframes stem-grow { to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes leaf-open { 65% { transform: scale(1.1) rotate(-7deg); } to { opacity: 1; transform: scale(1); } }
@keyframes petal-open { 65% { opacity: 1; transform: scale(1.13); } to { opacity: 1; transform: scale(1); } }
@keyframes center-appear { 70% { opacity: 1; transform: scale(1.16); } to { opacity: 1; transform: scale(1); } }
.question-title { margin: 9px 0 8px; font-family: var(--display); font-size: clamp(28px, 4vw, 34px); line-height: 1.12; font-weight: 700; letter-spacing: -.025em; color: #57464d; }
.question-title span { color: #dd5e83; }
.question-subtitle { margin: 0 auto 19px; max-width: 285px; color: #9b838c; font-size: 13px; line-height: 1.55; }
/* V16 — personalized accepted-day announcement copy. */
.question-title.announcement-title {
  max-width: 360px;
  margin: 10px auto 10px;
  font-size: clamp(27px, 3.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.question-subtitle.announcement-subtitle {
  max-width: 310px;
  margin: 0 auto 18px;
  font-size: 13px;
  line-height: 1.62;
  text-wrap: pretty;
}
@media (max-width: 390px) {
  .question-title.announcement-title { font-size: clamp(25px, 7.1vw, 29px); margin-top: 8px; }
  .question-subtitle.announcement-subtitle { max-width: 100%; font-size: 12.7px; line-height: 1.58; margin-bottom: 15px; }
}
@media (max-width: 350px) {
  .question-title.announcement-title { font-size: 25px; }
  .question-subtitle.announcement-subtitle { font-size: 12.4px; }
}

.choice-row { min-height: 58px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; position: relative; }
.yes-button { min-width: 156px; }
.yes-button.selected { animation: yes-pop .5s ease both; }
@keyframes yes-pop { 45% { transform: scale(1.08); } 100% { transform: scale(1.03); } }
.no-button { min-width: 76px; min-height: 42px; padding-inline: 19px; background: rgba(255,255,255,.78); color: #b46a83; border: 1px solid #f2cfda; box-shadow: none; transform: translate(var(--dodge-x, 0), var(--dodge-y, 0)) rotate(var(--dodge-rotate, 0deg)); transition: transform .38s cubic-bezier(.2,.85,.25,1), background .18s ease, box-shadow .18s ease; }
.no-button:hover { background: #fff; box-shadow: 0 5px 12px rgba(215, 125, 150, .1); }
.no-button.is-dodging { animation: no-wiggle .38s ease; }
@keyframes no-wiggle { 0%,100% { filter:none; } 35% { filter:brightness(1.04); } 60% { filter:brightness(.98); } }
.choice-feedback { min-height: 23px; margin: 13px 0 4px; color: #ad8994; font-size: 13px; line-height: 1.45; }
.text-next { border: 0; padding: 6px 8px; background: transparent; color: #c16b87; font-size: 13px; font-weight: 900; cursor: pointer; }
.text-next span { margin-left: 5px; }
.celebration-card { padding-top: 26px; }
.celebration-flower { width: 102px; height: 112px; margin-bottom: 5px; }
@media (max-width: 390px) {
  .question-card { padding: 22px 17px 21px; }
  .flower-bloom { width: 86px; height: 96px; }
  .celebration-flower { width: 94px; height: 104px; }
  .choice-row { gap: 7px; }
  .yes-button { min-width: 146px; padding-inline: 17px; }
  .no-button { min-width: 70px; padding-inline: 16px; }
}
.reduce-motion .flower-stem { stroke-dashoffset: 0; opacity: 1; animation: none !important; }
.reduce-motion .flower-leaf, .reduce-motion .flower-petal, .reduce-motion .flower-center { opacity: 1; transform: none; animation: none !important; }
.celebration-title { margin: 8px 0; color: #dd5e83; font-family: var(--display); font-size: 34px; line-height: 1.1; }
.celebration-copy { max-width: 280px; margin: 0 auto 17px; font-size: 15px; color: #897780; }
.featured-photo { width: min(100%, 220px); margin: 0 auto 17px; padding: 8px 8px 10px; background: #fff; border-radius: 8px; box-shadow: 0 8px 20px rgba(91,67,76,.12); transform: rotate(-2deg); }
.featured-photo img { display: block; width: 100%; height: 158px; object-fit: contain; background: #f7f1f3; }
.featured-photo figcaption { padding-top: 6px; color: #a68b95; font-family: var(--hand); font-size: 16px; line-height: 1.1; }
.celebration-confetti span { position: absolute; color: #ec9bb2; font-size: 18px; animation: twinkle 2.5s infinite; }
.celebration-confetti span:nth-child(1) { left: 23px; top: 57px; } .celebration-confetti span:nth-child(2) { right: 30px; top: 87px; } .celebration-confetti span:nth-child(3) { left: 37px; bottom: 95px; } .celebration-confetti span:nth-child(4) { right: 31px; bottom: 118px; } .celebration-confetti span:nth-child(5) { right: 57px; top: 40px; }
.wide-content { width: min(100%, 900px); text-align: center; padding: 4px 0 8px; }
.section-title { margin: 8px 0 4px; font-family: var(--display); font-size: clamp(30px, 4.5vw, 43px); line-height: 1.2; font-weight: 600; color: #57464d; }
.section-title span { color: #e27a99; }
.section-subtitle { margin: 0 auto 27px; font-size: 15px; color: #9b838d; }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 0 auto 16px; max-width: 690px; }
.gift-card { min-height: 205px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 18px 12px 15px; border: 1px solid #f5dfe6; border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: 0 9px 25px rgba(205,132,154,.08); cursor: pointer; color: #66525a; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.gift-card:hover { transform: translateY(-5px); border-color: #eeb5c7; background: #fff; }
.gift-card.is-opened { border-color: #efb8c9; background: #fff5f8; }
.gift-art { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 8px; border-radius: 50%; background: #fff0f4; font-size: 39px; }
.photo-art { background: #fff2f6; } .letter-art { background: #fff4e9; }
.gift-card strong { font-size: 15px; font-weight: 900; }
.gift-hint { margin-top: 2px; color: #a28a93; font-size: 13px; }
.gift-status { margin-top: 10px; color: #cc6d8a; font-size: 13px; font-weight: 900; }
.gift-card.is-opened .gift-status { color: #c16b87; }
.gift-progress { margin: 2px 0 13px; color: #b2949e; font-size: 13px; }
.memory-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0 auto 26px; }
.memory-item { min-width: 0; padding: 9px 9px 13px; border: 1px solid #f3e1e7; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(192,132,151,.09); cursor: zoom-in; transition: transform .22s ease, box-shadow .22s ease; }
.memory-item:nth-child(odd) { transform: rotate(-1.4deg); } .memory-item:nth-child(even) { transform: rotate(1.3deg); }
.memory-item:hover { transform: translateY(-5px) rotate(0); box-shadow: 0 15px 28px rgba(192,132,151,.15); }
.memory-image { display: grid; place-items: center; width: 100%; height: 190px; overflow: hidden; background: #f8f1f3; border-radius: 4px; }
.memory-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.memory-caption { display: block; padding-top: 9px; font-family: var(--hand); font-size: 17px; line-height: 1.1; color: #947481; }
.closing-card { padding: 33px 31px 29px; }
.closing-heart { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: #ffe5ec; color: #d85c82; font-size: 30px; }
.closing-title { margin: 12px 0; font-family: var(--display); font-size: 39px; line-height: 1.08; color: #56474d; }
.closing-title span { color: #db7291; font-style: italic; }
.closing-copy { margin: 0 auto 15px; max-width: 300px; color: #82727a; font-size: 16px; }
.closing-note { margin: 0 auto 12px; color: #ab8995; font-size: 13px; }
.closing-note strong { color: #d05e83; font-size: 13px; }
.closing-signature { margin: 4px 0 18px; font-size: 27px; }
.site-footer { min-height: 46px; color: #c1a7b0; font-size: 12px; letter-spacing: .04em; }
.gift-dialog { position: fixed; width: min(calc(100% - 34px), 370px); padding: 30px 28px 26px; border: 1px solid #fff; border-radius: 22px; background: var(--mint); color: var(--ink); text-align: center; box-shadow: 0 25px 90px rgba(108,70,83,.23); }
.gift-dialog::backdrop, .lightbox::backdrop { background: rgba(69,48,57,.36); backdrop-filter: blur(5px); }
.dialog-close, .lightbox-close { position: absolute; top: 9px; right: 13px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #b46d85; background: rgba(255,255,255,.8); font-size: 24px; cursor: pointer; }
.dialog-art { width: 74px; height: 74px; display: grid; place-items: center; margin: 4px auto 13px; border-radius: 50%; background: #fff1f4; font-size: 38px; }
.gift-dialog h2 { margin: 9px 0 7px; font-family: var(--display); color: #5a4850; font-size: 27px; }
.gift-dialog p:not(.question-kicker) { margin: 0 auto 19px; max-width: 260px; color: #87737b; font-size: 13px; }
.lightbox { position: fixed; width: min(calc(100% - 24px), 850px); height: min(90svh, 850px); padding: 52px 66px 44px; overflow: visible; border: 1px solid rgba(255,255,255,.7); border-radius: 18px; background: rgba(255,250,251,.97); text-align: center; }
.lightbox img { display: block; width: 100%; height: calc(100% - 25px); object-fit: contain; }
.lightbox-close { top: 10px; right: 12px; }
.lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 48px; border: 0; border-radius: 30px; background: #ffe7ee; color: #bf5d7c; font-size: 29px; cursor: pointer; }
.lightbox-arrow.prev { left: 12px; } .lightbox-arrow.next { right: 12px; }
.lightbox-caption { position: absolute; bottom: 11px; left: 0; width: 100%; margin: 0; color: #a1818d; font-family: var(--hand); font-size: 18px; }
@media (max-width: 680px) {
  .topbar, .site-footer { width: calc(100% - 34px); }
  .topbar { height: 58px; }
  #app { min-height: calc(100svh - 104px); padding: 8px 15px 25px; }
  .page { min-height: 540px; }
  .intro-content { min-height: 530px; }
  .intro-title { font-size: 21px; }
  .shooting-stage { width: min(100%, 320px); height: 380px; }
  .shooting-status { font-size: 11px; }
  .mint-card { padding: 24px 23px 22px; }
  .letter-body { font-size: 16px; }
  .gift-grid { gap: 9px; }
  .gift-card { min-height: 175px; padding: 13px 7px; }
  .gift-art { width: 60px; height: 60px; font-size: 32px; }
  .gift-card strong { font-size: 13px; }
  .gift-hint { font-size: 13px; }
  .memory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .memory-image { height: clamp(150px, 44vw, 210px); }
  .memory-caption { font-size: 16px; }
  .site-footer { gap: 10px; font-size: 11px; }
  .lightbox { padding: 48px 43px 42px; }
  .lightbox-arrow { width: 31px; height: 42px; }
  .lightbox-arrow.prev { left: 6px; } .lightbox-arrow.next { right: 6px; }
}
@media (max-width: 380px) {
  .page { min-height: 520px; }
  .mint-card { padding-inline: 18px; }
  .shooting-stage { width: min(100%, 290px); height: 365px; }
  .gift-card { min-height: 162px; }
  .gift-art { width: 53px; height: 53px; font-size: 29px; }
  .gift-card strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Cupid impact: a small heart-and-sparkle burst anchored to the envelope. */
.impact-particle {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: impact-pop 1.25s cubic-bezier(.16,.72,.25,1) forwards;
  filter: drop-shadow(0 2px 2px rgba(214,92,130,.12));
  will-change: transform, opacity;
}
@keyframes impact-pop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(var(--scale)) rotate(var(--rot)); }
}
.envelope-wrap.is-hit .envelope-glow { opacity: .8; }
.shooting-stage.is-shooting .shoot-button { transform: translateX(-50%) scale(.97); }

/* Wax-seal secret note. */
.letter-stamp {
  border: 0;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.letter-stamp:hover { transform: rotate(-9deg) scale(1.07); box-shadow: 0 7px 17px rgba(224,141,165,.22); }
.letter-stamp[aria-expanded="true"] { background: #f8cbd8; transform: rotate(12deg) scale(.96); }
.stamp-hint { margin: -4px 0 10px; color: #b4939e; font-size: 11px; font-weight: 800; }
.secret-message {
  max-width: 294px;
  margin: 12px auto 15px;
  padding: 13px 15px 12px;
  border: 1px dashed #e9a5b8;
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  color: #806b74;
  text-align: left;
  animation: secret-reveal .42s cubic-bezier(.2,.75,.25,1) both;
}
.secret-message[hidden] { display: none; }
.secret-message-kicker { display: block; margin-bottom: 5px; color: #d16a89; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.secret-message p { margin: 0; font-size: 14px; line-height: 1.55; }
.secret-message-sign { display: block; margin-top: 7px; color: #d16a89; font-family: var(--hand); font-size: 20px; text-align: right; }
@keyframes secret-reveal { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Interactive photo album navigation and page-turn feel. */
.lightbox { padding-bottom: 92px; }
.lightbox img { height: calc(100% - 10px); transition: opacity .18s ease, transform .22s ease; }
.lightbox img.photo-next { animation: album-next .28s ease both; }
.lightbox img.photo-prev { animation: album-prev .28s ease both; }
@keyframes album-next { from { opacity: .35; transform: translateX(18px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes album-prev { from { opacity: .35; transform: translateX(-18px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
.lightbox-meta { position: absolute; bottom: 10px; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.lightbox-counter { margin: 0; color: #c093a2; font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.lightbox-caption { position: static; width: auto; max-width: calc(100% - 24px); margin: 0; color: #a1818d; font-family: var(--hand); font-size: 19px; line-height: 1.05; }
.lightbox-dots { display: flex; align-items: center; gap: 8px; margin-top: 5px; pointer-events: auto; }
.lightbox-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #edc5d1; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.lightbox-dots button[aria-current="true"] { background: #d95f84; transform: scale(1.45); }
.memory-item:focus-visible { outline: 3px solid #df7e9b; outline-offset: 4px; }
@media (max-width: 680px) {
  .lightbox { padding: 48px 43px 88px; }
  .lightbox img { height: calc(100% - 2px); }
  .lightbox-meta { bottom: 9px; }
  .lightbox-caption { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-particle { animation: none; opacity: 0; }
  .secret-message, .lightbox img { animation: none !important; transition: none !important; }
}

/* SHINTAAA V4: gentle ambience, independent sound controls, and personal captions. */
.ambient-petals {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.ambient-petal {
  position: absolute;
  bottom: -12vh;
  color: #e9a8ba;
  opacity: .28;
  text-shadow: 0 2px 9px rgba(223, 145, 168, .12);
  animation: petal-drift linear infinite;
}
@keyframes petal-drift {
  0% { transform: translate3d(0, 0, 0) rotate(-24deg); opacity: 0; }
  12% { opacity: .28; }
  55% { transform: translate3d(28px, -55vh, 0) rotate(125deg); opacity: .23; }
  100% { transform: translate3d(-18px, -118vh, 0) rotate(255deg); opacity: 0; }
}
.top-actions { gap: 6px; }
.sound-toggle {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  flex: 0 0 auto;
  color: #c66b88;
  -webkit-tap-highlight-color: transparent;
}
.sound-toggle .sound-icon { display: block; font-size: 16px; }
.sound-toggle[aria-pressed="true"] { background: #f8dbe4; border-color: #edc2d0; color: #b84c70; box-shadow: 0 3px 10px rgba(210, 117, 145, .1); }
.replay-toggle .sound-icon { font-size: 20px; }
.memory-caption {
  min-height: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 9px;
}
.memory-caption-note {
  display: block;
  padding: 1px 2px 0;
  color: #b39aa3;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .025em;
}
.lightbox { padding-bottom: 105px; }
.lightbox-meta { gap: 3px; }
.lightbox-note {
  margin: 0;
  color: #b49ba4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.closing-copy {
  min-height: 7.8em;
  position: relative;
  line-height: 1.65;
}
.closing-signature {
  opacity: 1;
  transform: none;
  transition: none;
}
.reduce-motion .ambient-heart,
.reduce-motion .sparkle,
.reduce-motion .ambient-petal {
  animation: none !important;
}
.reduce-motion .ambient-heart,
.reduce-motion .sparkle,
.reduce-motion .ambient-petal { opacity: .12; }
.reduce-motion .page,
.reduce-motion .memory-item,
.reduce-motion .sound-toggle,
.reduce-motion .closing-signature,
.reduce-motion .lightbox img { animation: none !important; transition: none !important; }
@media (max-width: 680px) {
  .top-actions { gap: 5px; }
  .sound-toggle { width: 29px; height: 29px; }
  .memory-caption-note { font-size: 9px; }
  .lightbox { padding-bottom: 104px; }
  .lightbox-note { font-size: 9px; }
  .closing-copy { min-height: 10.2em; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 13px; }
  .top-actions { gap: 4px; }
  .sound-toggle { width: 27px; height: 27px; }
  .sound-toggle .sound-icon { font-size: 14px; }
  .replay-toggle .sound-icon { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-petal { animation: none !important; opacity: .12; }
  .closing-signature { transition: none !important; }
}

/* V5 photo stories: a featured first-conversation card and readable long captions. */
.memory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.memory-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
.memory-item.memory-origin {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(128px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: min(100%, 700px);
  margin: 4px auto 10px;
  padding: 12px 16px;
  text-align: left;
}
.memory-origin .memory-image {
  height: 248px;
}
.memory-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: 8px 8px 8px 0;
}
.memory-first-tag {
  display: inline-block;
  margin-bottom: 9px;
  padding: 5px 9px;
  border: 1px solid #f5d5df;
  border-radius: 999px;
  background: #fff4f7;
  color: #c66c89;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.memory-origin .memory-caption {
  padding-top: 0;
  font-size: 23px;
}
.memory-origin .memory-caption-note { font-size: 11px; }
.memory-open-hint {
  margin-top: 15px;
  color: #d06b8b;
  font-size: 11px;
  font-weight: 900;
}

/* Long-form story reader inside the photo lightbox. */
.lightbox {
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: min(calc(100% - 20px), 850px);
  height: min(93svh, 900px);
  max-height: 93svh;
  padding: 46px 58px 14px;
  overflow: hidden;
}
.lightbox img {
  flex: 0 1 46%;
  min-height: 105px;
  max-height: 46%;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.lightbox-meta {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-height: 0;
  max-height: 49%;
  overflow: hidden;
  padding: 0 8px 3px;
  pointer-events: auto;
}
.lightbox-counter { flex: 0 0 auto; }
.lightbox-title {
  flex: 0 0 auto;
  margin: 0;
  color: #74535f;
  font-family: var(--display);
  font-size: clamp(18px, 2.5vw, 23px);
  line-height: 1.2;
}
.lightbox-caption {
  position: static;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}
.lightbox-note { flex: 0 0 auto; }
.lightbox-story {
  flex: 0 1 auto;
  width: min(100%, 650px);
  max-height: 19svh;
  overflow-y: auto;
  margin: 7px auto 2px;
  padding: 0 7px 5px;
  color: #76676e;
  font-size: 13px;
  line-height: 1.58;
  text-align: left;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e6b4c3 transparent;
}
.lightbox-dots { flex: 0 0 auto; margin-top: 3px; }
.lightbox-arrow { top: 34%; }
.lightbox-close { z-index: 5; }

@media (max-width: 680px) {
  .memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .memory-item.memory-origin {
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: 11px;
    padding: 9px 10px;
    margin-bottom: 7px;
  }
  .memory-origin .memory-image { height: 205px; }
  .memory-origin .memory-caption { font-size: 20px; }
  .memory-copy { padding-right: 2px; }
  .memory-first-tag { font-size: 8px; letter-spacing: .08em; }
  .memory-open-hint { margin-top: 10px; }
  .memory-image { height: clamp(148px, 43vw, 205px); }
  .lightbox {
    width: calc(100% - 12px);
    height: 94svh;
    max-height: 94svh;
    padding: 43px 34px 11px;
    gap: 7px;
  }
  .lightbox img { flex-basis: 42%; max-height: 42%; min-height: 95px; }
  .lightbox-meta { max-height: 55%; padding-inline: 3px; }
  .lightbox-story { max-height: 22svh; font-size: 12.5px; line-height: 1.52; }
  .lightbox-title { font-size: 18px; }
  .lightbox-caption { font-size: 17px; }
  .lightbox-arrow { top: 31%; width: 30px; height: 42px; }
  .lightbox-arrow.prev { left: 3px; }
  .lightbox-arrow.next { right: 3px; }
}
@media (max-width: 360px) {
  .memory-origin .memory-image { height: 190px; }
  .memory-origin .memory-caption { font-size: 18px; }
  .memory-origin .memory-caption-note { font-size: 9px; }
  .memory-first-tag { max-width: 100%; padding-inline: 6px; font-size: 7px; }
  .lightbox { padding-inline: 30px; }
  .lightbox-story { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .memory-item { transform: none !important; }
}
/* Keep the native dialog closed until a visitor opens a photo. */
.lightbox[open] { display: flex; }


/* Verified memory dates and places: shown below each gallery caption and in the viewer. */
.memory-date-location {
  display: block;
  margin-top: 7px;
  color: #a58b94;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;
}
.memory-origin .memory-date-location {
  max-width: 100%;
  margin-top: 9px;
  text-align: left;
  font-size: 10.5px;
}
.lightbox-date-location {
  flex: 0 0 auto;
  max-width: 100%;
  margin: 1px auto 2px;
  color: #a58b94;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 680px) {
  .memory-date-location { font-size: 9px; }
  .memory-origin .memory-date-location { font-size: 9px; }
  .lightbox-date-location { font-size: 9.5px; }
}
@media (max-width: 360px) {
  .memory-origin .memory-date-location { font-size: 8px; }
}



/* V8 — botanical night garden inspired by the user's flower-growth video. */
.flower-garden-scene {
  position: relative;
  isolation: isolate;
  width: min(100%, 340px);
  height: 198px;
  margin: 0 auto 12px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.flower-garden-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.garden-halo { opacity: .9; }
.garden-ground-line { stroke-dasharray: 430; stroke-dashoffset: 430; }
.garden-star {
  opacity: .2;
  transform-box: fill-box;
  transform-origin: center;
}
.garden-firefly {
  fill: #e6f28b;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(222, 245, 105, .9));
}
.garden-grass path,
.garden-stem {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  opacity: .2;
}
.garden-leaf {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.05);
}
.garden-petal {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(.035);
}
.garden-bloom { opacity: 0; transform-box: fill-box; transform-origin: center; }
.flower-garden-scene.is-growing .garden-ground-line {
  animation: garden-line-grow 1.15s ease .1s forwards;
}
.flower-garden-scene.is-growing .garden-grass path {
  animation: garden-stem-grow 1.65s cubic-bezier(.18,.75,.2,1) var(--grow-delay, .2s) forwards;
}
.flower-garden-scene.is-growing .garden-stem {
  animation: garden-stem-grow 2.1s cubic-bezier(.18,.78,.2,1) var(--stem-delay, .3s) forwards;
}
.flower-garden-scene.is-growing .garden-leaf {
  animation: garden-leaf-open .9s cubic-bezier(.16,.9,.2,1) var(--leaf-delay, .8s) forwards;
}
.flower-garden-scene.is-growing .garden-petal {
  animation: garden-petal-open 1.18s cubic-bezier(.16,1,.3,1) calc(var(--petal-delay, .1s) + 2.45s) forwards;
}
.flower-garden-scene.is-growing .garden-bloom {
  animation: garden-flower-appear .55s ease var(--bloom-delay, 2.35s) forwards;
}
.flower-garden-scene.is-growing .garden-star {
  animation: garden-star-twinkle 3s ease-in-out var(--twinkle-delay, 0s) infinite;
}
.flower-garden-scene.is-growing .garden-firefly {
  animation: garden-firefly-glow 2.8s ease-in-out var(--fly-delay, 0s) infinite;
}
.flower-garden-scene.is-growing .garden-halo {
  animation: garden-halo-pulse 5.5s ease-in-out infinite;
}
@keyframes garden-line-grow {
  to { stroke-dashoffset: 0; opacity: .6; }
}
@keyframes garden-stem-grow {
  0% { stroke-dashoffset: 260; opacity: .15; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes garden-leaf-open {
  0% { opacity: 0; transform: scale(.05) rotate(-18deg); }
  68% { opacity: 1; transform: scale(1.13) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes garden-petal-open {
  0% { opacity: 0; transform: scale(.035) rotate(-14deg); }
  64% { opacity: 1; transform: scale(1.13) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes garden-flower-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes garden-star-twinkle {
  0%, 100% { opacity: .18; }
  50% { opacity: .82; }
}
@keyframes garden-firefly-glow {
  0%, 100% { opacity: .08; transform: translate3d(0, 3px, 0) scale(.75); }
  50% { opacity: .95; transform: translate3d(4px, -7px, 0) scale(1.35); }
}
@keyframes garden-halo-pulse {
  0%, 100% { opacity: .66; }
  50% { opacity: .95; }
}
.question-card {
  width: min(100%, 410px);
  padding: 20px 24px 23px;
}
.flower-garden-scene.question-garden {
  width: 100%;
  height: 190px;
  margin-bottom: 12px;
}
.flower-garden-scene.celebration-garden {
  width: min(100%, 360px);
  height: 214px;
  margin-bottom: 15px;
  border-radius: 18px;
}
.celebration-card { padding-top: 24px; }
.reduce-motion .garden-ground-line { stroke-dashoffset: 0; opacity: .6; animation: none !important; }
.reduce-motion .garden-grass path,
.reduce-motion .garden-stem { stroke-dashoffset: 0; opacity: 1; animation: none !important; }
.reduce-motion .garden-leaf,
.reduce-motion .garden-petal,
.reduce-motion .garden-bloom { opacity: 1; transform: none; animation: none !important; }
.reduce-motion .garden-star { opacity: .5; animation: none !important; }
.reduce-motion .garden-firefly { opacity: .45; animation: none !important; }
@media (max-width: 390px) {
  .question-card { padding: 19px 16px 20px; }
  .flower-garden-scene.question-garden { height: 174px; }
  .flower-garden-scene.celebration-garden { height: 194px; }
}
@media (max-width: 350px) {
  .flower-garden-scene.question-garden { height: 164px; }
  .flower-garden-scene.celebration-garden { height: 182px; }
}
@media (prefers-reduced-motion: reduce) {
  .flower-garden-scene * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* V10 — fuller botanical garden: small blossoms, soft ground, drifting petals. */
.garden-ground-line { display: none; }
.garden-stems { transform-box: fill-box; transform-origin: 50% 100%; }
.garden-grass { transform-box: fill-box; transform-origin: 50% 100%; }
.garden-fern-leaves { transform-box: fill-box; transform-origin: 50% 100%; }
.garden-flowers { transform-box: fill-box; transform-origin: 50% 100%; }
.garden-mini-stem {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  opacity: .12;
}
.garden-mini-bloom {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.garden-floating-petal {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.flower-garden-scene.is-growing .garden-mini-stem {
  animation: garden-stem-grow .95s cubic-bezier(.18,.75,.2,1) var(--mini-delay,.2s) forwards;
}
.flower-garden-scene.is-growing .garden-mini-bloom {
  animation: garden-mini-appear .72s cubic-bezier(.16,.9,.2,1) calc(var(--mini-delay,.2s) + 1.8s) forwards,
             garden-mini-sway 4.8s ease-in-out calc(var(--mini-delay,.2s) + 2.6s) infinite;
}
.flower-garden-scene.is-growing .garden-stems {
  animation: garden-stems-sway 5.8s ease-in-out 3.6s infinite;
}
.flower-garden-scene.is-growing .garden-grass {
  animation: garden-grass-sway 6.6s ease-in-out 2.9s infinite;
}
.flower-garden-scene.is-growing .garden-fern-leaves {
  animation: garden-leaves-sway 5.4s ease-in-out 3.1s infinite;
}
.flower-garden-scene.is-growing .garden-flowers {
  animation: garden-flowers-sway 5.2s ease-in-out 4.0s infinite;
}
.flower-garden-scene.is-growing .garden-floating-petal {
  animation: garden-petal-drift 7.5s ease-in-out var(--float-delay,0s) infinite;
}
@keyframes garden-mini-appear {
  0% { opacity: 0; transform: scale(.15); }
  72% { opacity: 1; transform: scale(1.13); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes garden-mini-sway {
  0%,100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes garden-stems-sway {
  0%,100% { transform: rotate(-.8deg); }
  50% { transform: rotate(1deg); }
}
@keyframes garden-grass-sway {
  0%,100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}
@keyframes garden-leaves-sway {
  0%,100% { transform: rotate(-.65deg); }
  50% { transform: rotate(.8deg); }
}
@keyframes garden-flowers-sway {
  0%,100% { transform: rotate(-.9deg); }
  50% { transform: rotate(1deg); }
}
@keyframes garden-petal-drift {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) rotate(-18deg) scale(.7); }
  14% { opacity: .72; }
  52% { opacity: .82; transform: translate3d(var(--float-x,12px), -34px, 0) rotate(46deg) scale(1); }
  90%,100% { opacity: 0; transform: translate3d(calc(var(--float-x,12px) * 1.4), -65px, 0) rotate(95deg) scale(.72); }
}
.reduce-motion .garden-mini-stem { stroke-dashoffset: 0; opacity: 1; animation: none !important; }
.reduce-motion .garden-mini-bloom { opacity: 1; transform: none; animation: none !important; }
.reduce-motion .garden-floating-petal { opacity: .45; animation: none !important; }
.reduce-motion .garden-stems,
.reduce-motion .garden-grass,
.reduce-motion .garden-fern-leaves,
.reduce-motion .garden-flowers { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .flower-garden-scene .garden-mini-stem { stroke-dashoffset: 0; opacity: 1; }
  .flower-garden-scene .garden-mini-bloom { opacity: 1; transform: none; }
  .flower-garden-scene .garden-floating-petal { opacity: .35; }
}

/* Final polish: softer ground, extra wildflowers and restrained botanical motion. */
.flower-garden-scene { overflow: visible; }
.garden-halo { opacity: .72; }
.garden-ground-line { display: none !important; }
.garden-flowers { will-change: transform; }
.garden-mini-blossoms { pointer-events: none; }
.garden-floating-petals { pointer-events: none; }
.garden-floating-petal { filter: drop-shadow(0 1px 2px rgba(218,112,147,.12)); }
.garden-mini-stem { stroke-width: 2.2; }
.garden-mini-bloom { filter: drop-shadow(0 1px 1px rgba(224,108,149,.12)); }
.garden-firefly { filter: drop-shadow(0 0 4px rgba(222,245,105,.55)); }
@media (max-width: 390px) {
  .flower-garden-scene.question-garden { height: 178px; }
  .flower-garden-scene.celebration-garden { height: 198px; }
}
@media (prefers-reduced-motion: reduce) {
  .flower-garden-scene .garden-flowers,
  .flower-garden-scene .garden-mini-bloom,
  .flower-garden-scene .garden-floating-petal { animation: none !important; transform: none !important; }
}

/* The letter grows from the envelope, echoing the reference video. */
.letter-card { transform-origin: 50% 8%; animation: letter-unfold .86s cubic-bezier(.18,.82,.22,1) both; }
@keyframes letter-unfold {
  0% { opacity: 0; transform: translateY(78px) scale(.42,.28) rotate(-1.5deg); filter: blur(2px); }
  58% { opacity: 1; transform: translateY(-7px) scale(1.035,1.035) rotate(.3deg); filter: blur(0); }
  78% { transform: translateY(2px) scale(.992, .995) rotate(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: none; }
}
.shooting-stage.is-shooting .shoot-button { opacity: .42; transform: translateX(-50%) translateY(-3px) scale(.96); }
.shooting-stage.is-aiming .shoot-button { box-shadow: 0 7px 19px rgba(224,102,143,.19); }
@media (prefers-reduced-motion: reduce) {
  .envelope-art, .bottom-bow, .shoot-button { animation: none !important; }
  .letter-card { animation: none !important; }
}
.reduce-motion .envelope-art, .reduce-motion .bottom-bow, .reduce-motion .shoot-button, .reduce-motion .letter-card { animation: none !important; }



/* SHINTAAA reference-matched botanical garden: transparent, layered and animated */
.flower-garden-scene {
  background: transparent !important;
  box-shadow: none !important;
}
.flower-garden-scene .ref-garden-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.flower-garden-scene .ref-grass-blade,
.flower-garden-scene .ref-stem-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  opacity: .12;
}
.flower-garden-scene .ref-leaf-open {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(.035);
}
.flower-garden-scene .ref-bloom-open {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(.08);
}
.flower-garden-scene .ref-bloom-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.flower-garden-scene .ref-heart-float,
.flower-garden-scene .ref-loose-petal,
.flower-garden-scene .ref-sparkle,
.flower-garden-scene .ref-firefly {
  transform-box: fill-box;
  transform-origin: center;
}
.flower-garden-scene .ref-heart-float { opacity: .78; }
.flower-garden-scene .ref-sparkle {
  fill: #e8b967;
  opacity: .2;
}
.flower-garden-scene .ref-firefly {
  fill: #f8e98b;
  opacity: .12;
  filter: drop-shadow(0 0 3px rgba(255, 231, 129, .72));
}
.flower-garden-scene .ref-loose-petal {
  opacity: 0;
}
.flower-garden-scene.is-growing .ref-grass-blade {
  animation: ref-grass-grow 1.75s cubic-bezier(.16,.78,.22,1) var(--delay,.12s) forwards;
}
.flower-garden-scene.is-growing .ref-stem-line {
  animation: ref-stem-grow 2.0s cubic-bezier(.16,.78,.22,1) var(--delay,.2s) forwards;
}
.flower-garden-scene.is-growing .ref-leaf-open {
  animation: ref-leaf-open .92s cubic-bezier(.16,.9,.2,1) var(--delay,.6s) forwards;
}
.flower-garden-scene.is-growing .ref-bloom-open {
  animation: ref-bloom-open .94s cubic-bezier(.16,1,.3,1) var(--delay,.9s) forwards;
}
.flower-garden-scene.is-growing .ref-bloom-sway {
  animation: ref-bloom-sway 5.8s ease-in-out calc(var(--delay,.9s) + .95s) infinite;
}
.flower-garden-scene.is-growing .ref-foliage {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ref-foliage-sway 6.5s ease-in-out 2.7s infinite;
}
.flower-garden-scene.is-growing .ref-grasses {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ref-grass-sway 6.8s ease-in-out 2.2s infinite;
}
.flower-garden-scene.is-growing .ref-heart-float {
  animation: ref-heart-float 5.6s ease-in-out var(--delay,0s) infinite;
}
.flower-garden-scene.is-growing .ref-sparkle {
  animation: ref-sparkle 2.9s ease-in-out var(--delay,0s) infinite;
}
.flower-garden-scene.is-growing .ref-firefly {
  animation: ref-firefly 3.2s ease-in-out var(--delay,0s) infinite;
}
.flower-garden-scene.is-growing .ref-loose-petal {
  animation: ref-petal-float 7.2s ease-in-out var(--delay,0s) infinite;
}
@keyframes ref-grass-grow {
  from { stroke-dashoffset: 300; opacity: .12; }
  to { stroke-dashoffset: 0; opacity: .96; }
}
@keyframes ref-stem-grow {
  from { stroke-dashoffset: 300; opacity: .08; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes ref-leaf-open {
  0% { opacity: 0; transform: scale(.035); }
  72% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ref-bloom-open {
  0% { opacity: 0; transform: scale(.08) translateY(9px); }
  72% { opacity: 1; transform: scale(1.08) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ref-bloom-sway {
  0%,100% { transform: rotate(-1.15deg); }
  50% { transform: rotate(1.15deg); }
}
@keyframes ref-foliage-sway {
  0%,100% { transform: rotate(-.45deg); }
  50% { transform: rotate(.55deg); }
}
@keyframes ref-grass-sway {
  0%,100% { transform: rotate(-.75deg); }
  50% { transform: rotate(.9deg); }
}
@keyframes ref-heart-float {
  0%,100% { opacity: .55; transform: translateY(5px) scale(.96); }
  50% { opacity: .92; transform: translateY(-9px) scale(1.04); }
}
@keyframes ref-sparkle {
  0%,100% { opacity: .12; transform: scale(.7); }
  50% { opacity: .85; transform: scale(1.35); }
}
@keyframes ref-firefly {
  0%,100% { opacity: .08; transform: scale(.6); }
  45% { opacity: .9; transform: scale(1.5); }
}
@keyframes ref-petal-float {
  0% { opacity: 0; transform: translate(0,0) rotate(0deg); }
  18% { opacity: .78; }
  65% { opacity: .62; transform: translate(10px,-13px) rotate(65deg); }
  100% { opacity: 0; transform: translate(18px,-25px) rotate(120deg); }
}
.reduce-motion .flower-garden-scene .ref-grass-blade,
.reduce-motion .flower-garden-scene .ref-stem-line {
  stroke-dashoffset: 0 !important;
  opacity: 1 !important;
  animation: none !important;
}
.reduce-motion .flower-garden-scene .ref-leaf-open,
.reduce-motion .flower-garden-scene .ref-bloom-open {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.reduce-motion .flower-garden-scene .ref-heart-float,
.reduce-motion .flower-garden-scene .ref-loose-petal,
.reduce-motion .flower-garden-scene .ref-sparkle,
.reduce-motion .flower-garden-scene .ref-firefly,
.reduce-motion .flower-garden-scene .ref-foliage,
.reduce-motion .flower-garden-scene .ref-grasses,
.reduce-motion .flower-garden-scene .ref-bloom-sway {
  animation: none !important;
  transform: none !important;
}
.reduce-motion .flower-garden-scene .ref-heart-float { opacity: .72 !important; }
.reduce-motion .flower-garden-scene .ref-loose-petal { opacity: .38 !important; }
@media (prefers-reduced-motion: reduce) {
  .flower-garden-scene .ref-grass-blade,
  .flower-garden-scene .ref-stem-line {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .flower-garden-scene .ref-leaf-open,
  .flower-garden-scene .ref-bloom-open {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .flower-garden-scene .ref-heart-float,
  .flower-garden-scene .ref-loose-petal,
  .flower-garden-scene .ref-sparkle,
  .flower-garden-scene .ref-firefly,
  .flower-garden-scene .ref-foliage,
  .flower-garden-scene .ref-grasses,
  .flower-garden-scene .ref-bloom-sway {
    animation: none !important;
    transform: none !important;
  }
  .flower-garden-scene .ref-heart-float { opacity: .72 !important; }
  .flower-garden-scene .ref-loose-petal { opacity: .38 !important; }
}


/* Keep the denser reference garden at its natural proportions. */
.flower-garden-scene.question-garden,
.flower-garden-scene.celebration-garden {
  height: auto !important;
  aspect-ratio: 420 / 258;
}
.flower-garden-scene.question-garden { max-height: 214px; }
.flower-garden-scene.celebration-garden { max-height: 220px; }
.flower-garden-scene .ref-garden-art {
  width: 100%;
  height: 100%;
  display: block;
}


/* V13 flower polish: a cleaner leaf fan and clearly visible petal-opening sequence. */
.flower-garden-scene .ref-foliage {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 2px rgba(47, 125, 70, .08));
}
.flower-garden-scene .ref-leaf-open {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(.08);
}
.flower-garden-scene .ref-bloom-open {
  opacity: 1 !important;
  transform: none !important;
}
.flower-garden-scene .ref-flower-aura {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
  filter: none;
}
.flower-garden-scene .ref-flower-bud {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 50% 90%;
}
.flower-garden-scene .ref-petal-open {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(var(--angle, 0deg)) scale(.035);
}
.flower-garden-scene .ref-flower-center,
.flower-garden-scene .ref-flower-center-core,
.flower-garden-scene .ref-flower-stamens,
.flower-garden-scene .ref-flower-glint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.25);
}
.flower-garden-scene.is-growing .ref-leaf-open {
  animation: v13-leaf-unfurl .82s cubic-bezier(.18,.85,.24,1) var(--delay,.3s) forwards;
}
.flower-garden-scene.is-growing .ref-flower-bud {
  animation: v13-bud-fade .5s ease calc(var(--delay,.6s) + 1.42s) forwards;
}
.flower-garden-scene.is-growing .ref-petal-open {
  animation: v13-petal-open .88s cubic-bezier(.16,.9,.22,1) calc(var(--delay,.6s) + 1.72s + var(--petal-delay,0s)) forwards;
}
.flower-garden-scene.is-growing .ref-flower-center,
.flower-garden-scene.is-growing .ref-flower-center-core,
.flower-garden-scene.is-growing .ref-flower-stamens,
.flower-garden-scene.is-growing .ref-flower-glint {
  animation: v13-center-pop .62s cubic-bezier(.16,.9,.2,1) calc(var(--delay,.6s) + 2.12s) forwards;
}
.flower-garden-scene.is-growing .ref-flower-aura {
  animation: v13-flower-aura 3.4s ease-in-out calc(var(--delay,.6s) + 2.05s) infinite;
}
.flower-garden-scene.is-growing .ref-bloom-sway {
  animation: v13-bloom-sway 5.6s ease-in-out calc(var(--delay,.6s) + 2.9s) infinite;
}
@keyframes v13-leaf-unfurl {
  0% { opacity: 0; transform: scale(.08) rotate(-8deg); }
  70% { opacity: 1; transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes v13-bud-fade {
  0% { opacity: 1; transform: scale(1); }
  70% { opacity: .95; transform: scale(.78); }
  100% { opacity: 0; transform: scale(.35); }
}
@keyframes v13-petal-open {
  0% { opacity: 0; transform: rotate(var(--angle, 0deg)) scale(.035); }
  58% { opacity: 1; transform: rotate(var(--angle, 0deg)) scale(1.12); }
  78% { opacity: 1; transform: rotate(var(--angle, 0deg)) scale(.96); }
  100% { opacity: 1; transform: rotate(var(--angle, 0deg)) scale(1); }
}
@keyframes v13-center-pop {
  0% { opacity: 0; transform: scale(.25); }
  70% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes v13-flower-aura {
  0%,100% { opacity: .2; transform: scale(.72); }
  42% { opacity: .86; transform: scale(1.24); }
  68% { opacity: .46; transform: scale(1.05); }
}
@keyframes v13-bloom-sway {
  0%,100% { transform: rotate(-1.4deg) translateY(0); }
  50% { transform: rotate(1.4deg) translateY(-1.6px); }
}
.reduce-motion .flower-garden-scene .ref-leaf-open,
.reduce-motion .flower-garden-scene .ref-petal-open,
.reduce-motion .flower-garden-scene .ref-flower-center,
.reduce-motion .flower-garden-scene .ref-flower-center-core,
.reduce-motion .flower-garden-scene .ref-flower-stamens,
.reduce-motion .flower-garden-scene .ref-flower-glint {
  opacity: 1 !important; transform: none !important; animation: none !important;
}
.reduce-motion .flower-garden-scene .ref-flower-bud { opacity: 0 !important; }
.reduce-motion .flower-garden-scene .ref-flower-aura { opacity: .45 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .flower-garden-scene .ref-leaf-open,
  .flower-garden-scene .ref-petal-open,
  .flower-garden-scene .ref-flower-center,
  .flower-garden-scene .ref-flower-center-core,
  .flower-garden-scene .ref-flower-stamens,
  .flower-garden-scene .ref-flower-glint {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .flower-garden-scene .ref-flower-bud { opacity: 0 !important; }
  .flower-garden-scene .ref-flower-aura { opacity: .45 !important; animation: none !important; }
}

/* Fine finishing: a smaller botanical centre and a warm, luminous halo. */
.flower-garden-scene .ref-petal-open path:first-child {
  filter: drop-shadow(0 0 2.2px rgba(255, 166, 201, .38));
}
.flower-garden-scene.is-growing .ref-flower-aura {
  animation: v13-flower-aura 3.1s ease-in-out calc(var(--delay,.6s) + 2.05s) infinite;
}
@keyframes v13-flower-aura {
  0%,100% { opacity: .28; transform: scale(.74); }
  38% { opacity: .98; transform: scale(1.34); }
  68% { opacity: .58; transform: scale(1.08); }
}

.flower-garden-scene .ref-flower-ring {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.35);
}
.flower-garden-scene.is-growing .ref-flower-ring {
  animation: v13-ring-breathe 3.2s ease-in-out calc(var(--delay,.6s) + 2.02s) infinite;
}
@keyframes v13-ring-breathe {
  0%,100% { opacity: .12; transform: scale(.78); }
  42% { opacity: .72; transform: scale(1.18); }
  70% { opacity: .3; transform: scale(1.02); }
}
.reduce-motion .flower-garden-scene .ref-flower-ring { opacity: .34 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .flower-garden-scene .ref-flower-ring { opacity: .34 !important; transform: none !important; animation: none !important; }
}

/* Disable the previous group-scale animation; V13 opens each petal independently. */
.flower-garden-scene.is-growing .ref-bloom-open { animation: none !important; }


/* V14 — long, personal letter + living flower companions. */
.page[data-page="1"].is-active {
  align-items: start;
  padding-block: 8px 18px;
}
.letter-card {
  width: min(100%, 520px);
  max-height: calc(100svh - 112px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e8aabe transparent;
  padding: 26px 30px 25px;
}
.letter-card::-webkit-scrollbar { width: 5px; }
.letter-card::-webkit-scrollbar-thumb { background: rgba(218,139,164,.45); border-radius: 99px; }
.letter-card .letter-greeting { font-size: 15px; margin-top: 9px; }
.letter-card .card-heading { font-size: clamp(24px, 4vw, 29px); line-height: 1.22; margin-bottom: 5px; }
.letter-card .letter-body {
  max-width: 100%;
  margin: 17px auto 14px;
  font-size: 15.5px;
  line-height: 1.78;
  text-align: left;
  color: #6f6067;
}
.letter-card .letter-body p { margin: 0 0 13px; }
.letter-card .letter-body .letter-lead { color: #a15e79; font-weight: 800; }
.letter-card .secret-message {
  max-width: 100%;
  padding: 16px 17px 15px;
  margin-top: 15px;
  line-height: 1.72;
}
.letter-card .secret-message p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.72; }
.letter-card .secret-message-sign { font-size: 22px; margin-top: 10px; }
.letter-card .stamp-hint { margin-block: 1px 12px; }
.letter-card .card-footer { margin-top: 15px; }
@media (max-width: 600px) {
  .page[data-page="1"].is-active { padding: 2px 0 14px; }
  .letter-card { max-height: calc(100svh - 96px); padding: 22px 20px 21px; }
  .letter-card .letter-body { font-size: 14.5px; line-height: 1.72; }
  .letter-card .secret-message p { font-size: 13.5px; }
}
@media (max-width: 360px) {
  .letter-card { padding-inline: 17px; }
  .letter-card .letter-body { font-size: 14px; }
}

/* Soft light visibly radiates from the flower centers; it remains translucent on mint. */
.flower-garden-scene .ref-flower-aura {
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 139, 188, .58)) drop-shadow(0 0 14px rgba(255, 220, 143, .32));
  mix-blend-mode: screen;
}
.flower-garden-scene .ref-flower-light-rays {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(255, 236, 177, .9));
}
.flower-garden-scene.is-growing .ref-flower-light-rays {
  animation: flower-rays-radiate 3.2s ease-in-out calc(var(--delay,.6s) + 2.35s) infinite;
}
@keyframes flower-rays-radiate {
  0%,100% { opacity: .12; transform: scale(.78) rotate(-8deg); }
  38% { opacity: .86; transform: scale(1.18) rotate(5deg); }
  68% { opacity: .42; transform: scale(.98) rotate(0deg); }
}

/* Butterflies circle around the flower heads with gently fluttering wings. */
.flower-garden-scene { position: relative; }
.garden-butterflies { position: absolute; inset: 0; z-index: 6; overflow: visible; pointer-events: none; }
.garden-butterfly {
  position: absolute;
  display: block;
  width: clamp(20px, 6.2%, 29px);
  aspect-ratio: 44 / 34;
  opacity: 0;
  transform-origin: center;
  filter: drop-shadow(0 2px 2px rgba(177, 102, 137, .16));
}
.garden-butterfly svg { display: block; width: 100%; height: 100%; overflow: visible; }
.butterfly-wings {
  transform-box: fill-box;
  transform-origin: 50% 55%;
  animation: butterfly-wing-flutter .34s ease-in-out infinite alternate;
}
.butterfly-one { left: 17%; top: 38%; }
.butterfly-two { left: 76%; top: 22%; }
.butterfly-three { left: 69%; top: 62%; width: clamp(17px, 5.2%, 24px); }
.butterfly-four { left: 29%; top: 18%; width: clamp(17px, 5.2%, 24px); }
.flower-garden-scene.is-growing .butterfly-one { animation: butterfly-orbit-left 8.4s ease-in-out var(--delay) infinite; }
.flower-garden-scene.is-growing .butterfly-two { animation: butterfly-orbit-right 9.2s ease-in-out var(--delay) infinite; }
.flower-garden-scene.is-growing .butterfly-three { animation: butterfly-orbit-low 8.8s ease-in-out var(--delay) infinite; }
.flower-garden-scene.is-growing .butterfly-four { animation: butterfly-orbit-high 9.6s ease-in-out var(--delay) infinite; }
@keyframes butterfly-wing-flutter {
  from { transform: scaleX(1); }
  to { transform: scaleX(.54); }
}
@keyframes butterfly-orbit-left {
  0% { opacity: 0; transform: translate(0, 14px) rotate(-14deg) scale(.68); }
  12% { opacity: .92; }
  38% { opacity: .96; transform: translate(58px, -25px) rotate(13deg) scale(1); }
  66% { opacity: .86; transform: translate(108px, 10px) rotate(-8deg) scale(.9); }
  90% { opacity: .9; }
  100% { opacity: 0; transform: translate(126px, -18px) rotate(15deg) scale(.72); }
}
@keyframes butterfly-orbit-right {
  0% { opacity: 0; transform: translate(0, 8px) rotate(12deg) scale(.7); }
  14% { opacity: .9; }
  42% { opacity: .96; transform: translate(-62px, 28px) rotate(-16deg) scale(1); }
  72% { opacity: .9; transform: translate(-108px, -14px) rotate(10deg) scale(.88); }
  100% { opacity: 0; transform: translate(-128px, 12px) rotate(-12deg) scale(.68); }
}
@keyframes butterfly-orbit-low {
  0% { opacity: 0; transform: translate(0, 10px) rotate(8deg) scale(.65); }
  18% { opacity: .9; }
  50% { opacity: .96; transform: translate(-64px, -24px) rotate(-14deg) scale(1.08); }
  78% { opacity: .82; transform: translate(-112px, 2px) rotate(12deg) scale(.84); }
  100% { opacity: 0; transform: translate(-120px, -20px) rotate(-8deg) scale(.7); }
}
@keyframes butterfly-orbit-high {
  0% { opacity: 0; transform: translate(0, -8px) rotate(-8deg) scale(.65); }
  16% { opacity: .86; }
  44% { opacity: .98; transform: translate(54px, 30px) rotate(13deg) scale(1.02); }
  76% { opacity: .9; transform: translate(112px, 4px) rotate(-12deg) scale(.88); }
  100% { opacity: 0; transform: translate(125px, 22px) rotate(8deg) scale(.65); }
}
.reduce-motion .garden-butterfly,
html.reduce-motion .garden-butterfly { animation: none !important; opacity: .86; transform: none !important; }
.reduce-motion .butterfly-wings { animation: none !important; }
.reduce-motion .flower-garden-scene .ref-flower-light-rays { opacity: .48 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .garden-butterfly { animation: none !important; opacity: .82; transform: none !important; }
  .butterfly-wings { animation: none !important; }
  .flower-garden-scene .ref-flower-light-rays { opacity: .48 !important; animation: none !important; }
}


/* Personalized Shintaa letter: long-form copy remains comfortably readable. */
.letter-card .letter-body { max-width: 100%; text-wrap: pretty; }
.letter-card .letter-body p { margin-bottom: 14px; }
.letter-card .letter-lead { font-size: 1.02em; }
.letter-card .secret-message { line-height: 1.78; }
.letter-card .secret-message p { margin-bottom: 13px; }
.letter-card .secret-message-sign { line-height: 1.25; }
@media (max-width: 600px) {
  .letter-card { max-height: calc(100svh - 92px); }
  .letter-card .letter-body { font-size: 14.5px; line-height: 1.76; }
  .letter-card .secret-message p { font-size: 13.8px; line-height: 1.75; }
}

/* Celebration copy and the longer personal-letter button */
.celebration-copy { max-width: 330px; line-height: 1.62; text-wrap: pretty; }
.celebration-next-button { max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
@media (max-width: 390px) {
  .celebration-copy { max-width: 100%; font-size: 14px; line-height: 1.58; }
  .celebration-next-button { padding-inline: 16px; font-size: 13.5px; gap: 7px; }
}


/* SHINTAAA V19 — gift cards feel like little animated surprises. */
.gift-page .wide-content { position: relative; isolation: isolate; }
.gift-page .wide-content::before,
.gift-page .wide-content::after {
  content: "✿";
  position: absolute;
  z-index: -1;
  color: #e99ab3;
  opacity: .16;
  pointer-events: none;
  font-size: 38px;
  animation: gift-garden-drift 6.5s ease-in-out infinite;
}
.gift-page .wide-content::before { left: -18px; top: 23%; transform: rotate(-16deg); }
.gift-page .wide-content::after { right: -12px; bottom: 18%; font-size: 29px; animation-delay: -3.2s; }
@keyframes gift-garden-drift {
  0%,100% { translate: 0 0; rotate: -8deg; opacity: .11; }
  50% { translate: 7px -11px; rotate: 9deg; opacity: .25; }
}
.gift-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-origin: 50% 78%;
  will-change: transform;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.gift-card::before {
  content: "";
  position: absolute;
  inset: -55% auto -55% -65%;
  z-index: -1;
  width: 48%;
  transform: rotate(22deg) translateX(-190%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transition: transform .72s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.gift-card::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 11px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f8ec;
  color: #5c9a70;
  font-size: 14px;
  font-weight: 900;
  opacity: 0;
  scale: .45;
  rotate: -32deg;
  transition: opacity .24s ease, scale .34s cubic-bezier(.2,.8,.2,1), rotate .34s ease;
  pointer-events: none;
}
.gift-card:hover::before, .gift-card:focus-visible::before { transform: rotate(22deg) translateX(390%); }
.gift-card:hover { transform: translateY(-7px) rotate(-.7deg) scale(1.015); box-shadow: 0 17px 34px rgba(205,132,154,.15); }
.gift-card:nth-child(2):hover { rotate: .7deg; }
.gift-card:active { transform: translateY(-2px) scale(.975); }
.gift-card.is-opened::after { content: "✓"; opacity: 1; scale: 1; rotate: 0deg; }
.gift-card.is-opened { box-shadow: 0 12px 28px rgba(133,185,145,.14); }
.gift-card .gift-art { position: relative; z-index: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; transform-origin: 50% 75%; animation: gift-art-float 3.4s ease-in-out infinite; }
.gift-card:nth-child(2) .gift-art { animation-delay: -.9s; }
.gift-card:nth-child(3) .gift-art { animation-delay: -1.8s; }
@keyframes gift-art-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.gift-card[data-gift="teddy"] .gift-art { box-shadow: 0 7px 17px rgba(224,132,159,.08); }
.gift-card[data-gift="photo"] .gift-art { box-shadow: 0 7px 17px rgba(126,178,143,.1); }
.gift-card[data-gift="letter"] .gift-art { box-shadow: 0 7px 17px rgba(227,171,119,.1); }
.gift-card.is-opening { animation: gift-card-open .62s cubic-bezier(.18,.75,.24,1); }
.gift-card.is-opening .gift-art { animation: gift-art-pop .68s cubic-bezier(.16,.8,.2,1); }
@keyframes gift-card-open {
  0%,100% { transform: translateY(0) scale(1); }
  26% { transform: translateY(-8px) scale(1.025); }
  52% { transform: translateY(1px) scale(.985); }
  76% { transform: translateY(-3px) scale(1.01); }
}
@keyframes gift-art-pop {
  0% { transform: scale(.82) rotate(-9deg); }
  45% { transform: scale(1.19) rotate(7deg); }
  72% { transform: scale(.96) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}
.gift-burst-particle {
  position: absolute;
  z-index: 5;
  left: 50%; top: 42%;
  color: var(--burst-color, #e8799b);
  font-size: var(--burst-size, 15px);
  line-height: 1;
  pointer-events: none;
  animation: gift-burst-fly .88s cubic-bezier(.16,.72,.25,1) forwards;
}
@keyframes gift-burst-fly {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(1.18) rotate(var(--burst-rotate)); }
}
.gift-progress { min-height: 22px; transition: color .25s ease, transform .25s ease; }
.gift-progress.is-updated { animation: gift-progress-pop .42s cubic-bezier(.16,.8,.2,1); }
.gift-progress.is-complete { color: #659b72; font-weight: 900; }
@keyframes gift-progress-pop { 0% { opacity: .45; transform: translateY(5px) scale(.98); } 65% { opacity: 1; transform: translateY(-2px) scale(1.025); } 100% { transform: translateY(0) scale(1); } }
#giftsNext:not(:disabled) { animation: gift-next-ready 2.2s ease-in-out infinite; box-shadow: 0 9px 24px rgba(214,92,131,.2); }
@keyframes gift-next-ready { 0%,100% { box-shadow: 0 8px 20px rgba(214,92,131,.16); } 50% { box-shadow: 0 11px 30px rgba(214,92,131,.35); } }
.gift-dialog[open] { animation: gift-dialog-enter .42s cubic-bezier(.18,.8,.22,1) both; }
.gift-dialog[open]::backdrop { animation: gift-backdrop-enter .32s ease both; }
@keyframes gift-dialog-enter { from { opacity: 0; transform: translateY(20px) scale(.88); } 70% { opacity: 1; transform: translateY(-3px) scale(1.015); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gift-backdrop-enter { from { background: rgba(69,48,57,0); backdrop-filter: blur(0); } to { background: rgba(69,48,57,.36); backdrop-filter: blur(5px); } }
.dialog-art { animation: dialog-art-float 3s ease-in-out infinite; }
@keyframes dialog-art-float { 0%,100% { transform: translateY(0) rotate(-4deg) scale(1); } 50% { transform: translateY(-7px) rotate(4deg) scale(1.05); } }
.gift-dialog[open] .dialog-art { animation: dialog-art-pop .65s cubic-bezier(.16,.8,.2,1), dialog-art-float 3s  .65s ease-in-out infinite; }
@keyframes dialog-art-pop { 0% { transform: scale(.55) rotate(-16deg); opacity: .3; } 68% { transform: scale(1.16) rotate(7deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.gift-page.is-active .section-title { animation: gift-heading-in .62s .04s cubic-bezier(.2,.75,.25,1) both; }
.gift-page.is-active .section-subtitle { animation: gift-heading-in .62s .12s cubic-bezier(.2,.75,.25,1) both; }
.gift-page.gift-page-enter .gift-card { animation: gift-card-arrive .68s cubic-bezier(.18,.8,.22,1) both; }
.gift-page.gift-page-enter .gift-card:nth-child(1) { animation-delay: .14s; }
.gift-page.gift-page-enter .gift-card:nth-child(2) { animation-delay: .27s; }
.gift-page.gift-page-enter .gift-card:nth-child(3) { animation-delay: .40s; }
.gift-page.gift-page-enter .gift-progress { animation: gift-heading-in .55s .48s both; }
.gift-page.gift-page-enter #giftsNext { animation: gift-heading-in .55s .56s both; }
@keyframes gift-heading-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gift-card-arrive { from { opacity: 0; transform: translateY(25px) scale(.91) rotate(-1deg); } 72% { opacity: 1; transform: translateY(-3px) scale(1.015) rotate(0); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@media (max-width: 680px) {
  .gift-page .wide-content::before { left: -8px; top: 19%; font-size: 26px; }
  .gift-page .wide-content::after { right: -6px; bottom: 15%; font-size: 23px; }
  .gift-card:hover { transform: none; }
  .gift-card:active { transform: scale(.975); }
}
@media (prefers-reduced-motion: reduce) {
  .gift-page .wide-content::before, .gift-page .wide-content::after,
  .gift-card .gift-art, .gift-card.is-opening, .gift-card.is-opening .gift-art,
  .gift-dialog[open], .gift-dialog[open] .dialog-art, .dialog-art,
  .gift-page.is-active .section-title, .gift-page.is-active .section-subtitle,
  .gift-page.gift-page-enter .gift-card, .gift-page.gift-page-enter .gift-progress,
  .gift-page.gift-page-enter #giftsNext, #giftsNext:not(:disabled) {
    animation: none !important;
  }
  .gift-burst-particle { display: none !important; }
}


/* SHINTAAA V20 — animated love-word heart inspired by the supplied video. */
.love-cloud {
  width: min(100%, 410px);
  margin: -8px auto 7px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.love-cloud-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 7px 16px rgba(224, 91, 133, .09));
}
.love-cloud-halo { opacity: .78; transform-origin: 260px 220px; animation: love-halo-breathe 3.1s ease-in-out infinite; }
.love-word-lines { opacity: 1; transform-origin: 260px 220px; animation: love-cloud-breathe 4.4s ease-in-out infinite; }
.love-row {
  opacity: .82;
  font-family: var(--body, 'Nunito', sans-serif);
  font-weight: 800;
  letter-spacing: .55px;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 3px rgba(231, 91, 137, .28));
}
.love-cloud-center { opacity: 1; }
.love-center-main {
  fill: #fffafd;
  stroke: #b92d61;
  stroke-width: 3.2px;
  paint-order: stroke fill;
  font-family: var(--display, 'Playfair Display', Georgia, serif);
  font-size: 49px;
  font-weight: 700;
  filter: drop-shadow(0 2px 5px rgba(159, 35, 81, .62)) drop-shadow(0 0 10px rgba(236, 100, 146, .52));
}

.love-heart-outline { stroke-dasharray: 1200; stroke-dashoffset: 0; opacity: .30; }
.love-center-glow { opacity: .92; transform-origin: 260px 232px; animation: love-center-light 2.8s ease-in-out infinite; filter: blur(2px); }
.love-cloud-sparkles { opacity: .75; transform-origin: center; animation: love-sparkle-orbit 5s ease-in-out infinite; }
.love-cloud-caption {
  display: block;
  margin-top: -12px;
  color: #bb8195;
  font-family: var(--hand, 'Caveat', cursive);
  font-size: 19px;
  line-height: 1.1;
  opacity: .9;
}
.love-cloud.is-forming .love-row {
  animation: love-word-form .82s var(--row-delay, 0s) cubic-bezier(.18,.72,.25,1) both;
}
.love-cloud.is-forming .love-center-glow { animation: love-center-light 2.8s 1.15s ease-in-out infinite; }
.love-cloud.is-forming .love-center-main {
  animation: love-center-reveal .85s 1.12s cubic-bezier(.16,.8,.2,1) both;
}
.love-cloud.is-forming .love-heart-outline {
  animation: love-outline-draw 1.7s .25s ease-out both;
}
.love-cloud.is-forming .love-cloud-sparkles {
  animation: love-sparkle-enter .8s 1s ease-out both, love-sparkle-orbit 5s 1.8s ease-in-out infinite;
}
@keyframes love-word-form {
  0% { opacity: 0; transform: translateY(17px) scale(.84); filter: blur(3px); }
  72% { opacity: .94; transform: translateY(-2px) scale(1.015); filter: blur(0); }
  100% { opacity: .82; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes love-center-reveal {
  0% { opacity: 0; transform: translateY(8px) scale(.72); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.07); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes love-outline-draw { from { stroke-dashoffset: 1200; opacity: 0; } to { stroke-dashoffset: 0; opacity: .30; } }
@keyframes love-center-light { 0%,100% { opacity: .72; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.09); } }
@keyframes love-cloud-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes love-halo-breathe { 0%,100% { opacity: .62; transform: scale(.96); } 50% { opacity: .98; transform: scale(1.045); } }
@keyframes love-sparkle-enter { from { opacity: 0; scale: .7; } to { opacity: .75; scale: 1; } }
@keyframes love-sparkle-orbit { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.045); } }
@media (max-width: 680px) {
  .love-cloud { width: min(86vw, 310px); margin: -8px auto 5px; }
  .love-cloud-caption { margin-top: -9px; font-size: 17px; }
  .love-center-main { font-size: 43px; stroke-width: 3px; }
}
@media (max-width: 380px) {
  .love-cloud { width: min(82vw, 270px); }
  .love-center-main { font-size: 38px; stroke-width: 2.7px; }
  .love-cloud-caption { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .love-cloud *, .love-cloud::before, .love-cloud::after { animation: none !important; transition: none !important; }
  .love-row { opacity: .82; transform: none; }
  .love-center-main { opacity: 1; transform: none; }
}
.reduce-motion .love-cloud *, .reduce-motion .love-cloud::before, .reduce-motion .love-cloud::after { animation: none !important; transition: none !important; }
.reduce-motion .love-row, .reduce-motion .love-center-main { opacity: .9; transform: none; }


/* SHINTAAA V21 — dense reference-style word-heart + bespoke gift reveals. */
.love-cloud {
  width: min(100%, 520px);
  margin: 2px auto 18px;
  padding: 14px 16px 13px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 210, 226, .16);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 88%, rgba(121, 74, 88, .58) 0%, rgba(121, 74, 88, 0) 43%),
    radial-gradient(ellipse at 49% 52%, rgba(115, 35, 75, .27) 0%, rgba(115, 35, 75, 0) 56%),
    linear-gradient(180deg, #1e1618 0%, #211725 55%, #312226 100%);
  box-shadow: 0 19px 42px rgba(66, 33, 51, .20), inset 0 1px 0 rgba(255,255,255,.08);
  pointer-events: none;
}
.love-cloud-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 37%, rgba(15, 9, 11, .16) 100%),
    radial-gradient(circle at 16% 78%, rgba(224, 82, 132, .11), transparent 25%),
    radial-gradient(circle at 88% 20%, rgba(172, 89, 164, .10), transparent 24%);
  animation: love-vignette-breathe 7s ease-in-out infinite;
}
.love-cloud::before,
.love-cloud::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(26px);
  z-index: -1;
}
.love-cloud::before {
  width: 45%; height: 30%; left: 28%; bottom: -13%;
  background: rgba(133, 75, 154, .25);
}
.love-cloud::after {
  width: 32%; height: 22%; right: 8%; top: 8%;
  background: rgba(202, 58, 108, .12);
}
.love-cloud-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 455px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 16px rgba(11, 6, 7, .16));
}
.love-word-field { opacity: 1; }
.love-word {
  fill: #ff668f;
  font-family: var(--body, "Nunito", sans-serif);
  font-weight: 800;
  letter-spacing: .25px;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 2px rgba(250, 73, 127, .46));
}
.love-word:nth-child(3n) { fill: #ff8ba9; }
.love-word:nth-child(5n) { fill: #f34c7d; }
.love-word:nth-child(7n) { fill: #e84b7d; }
.love-word-loose { fill: #f6789a; }
.love-cloud.is-forming .love-word {
  animation: reference-word-arrive .72s var(--word-delay, .1s) cubic-bezier(.16,.78,.24,1) both;
}
.love-cloud.is-forming .love-cloud-halo {
  animation: love-halo-breathe 4.4s .6s ease-in-out infinite;
  transform-origin: 260px 218px;
}
.love-cloud.is-forming .love-heart-outline {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: love-outline-draw 2.6s .1s ease-out forwards;
}
.love-center-glow {
  opacity: .82;
  transform-origin: 260px 226px;
  filter: blur(4px);
}
.love-cloud.is-forming .love-center-glow {
  animation: love-center-light 3.2s 2.8s ease-in-out infinite;
}
.love-cloud-center { opacity: 1; }
.love-center-main {
  fill: #fff4f8;
  stroke: #e65a88;
  stroke-width: 1.25px;
  paint-order: stroke fill;
  font-family: var(--display, "Playfair Display", Georgia, serif);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -.8px;
  filter: url(#loveMainGlow);
}
.love-center-sub {
  fill: #ffc0d1;
  font-family: var(--hand, "Caveat", cursive);
  font-size: 20px;
  opacity: .92;
  filter: drop-shadow(0 0 7px rgba(248, 106, 153, .7));
}
.love-cloud.is-forming .love-center-main {
  opacity: 0;
  animation: reference-center-reveal .88s 3.12s cubic-bezier(.16,.8,.2,1) both;
}
.love-cloud.is-forming .love-center-sub {
  opacity: 0;
  animation: reference-center-reveal .75s 3.42s cubic-bezier(.16,.8,.2,1) both;
}
.love-word-dust { animation: love-dust-twinkle 3.4s 2s ease-in-out infinite alternate; }
.love-cloud-caption {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: -5px;
  color: #f2a8bd;
  font-family: var(--hand, "Caveat", cursive);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .2px;
  text-shadow: 0 0 12px rgba(247, 112, 157, .38);
}
@keyframes reference-word-arrive {
  0% { opacity: 0; transform: translateY(13px) scale(.72); filter: blur(4px); }
  66% { opacity: 1; transform: translateY(-2px) scale(1.06); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px rgba(250,73,127,.46)); }
}
@keyframes reference-center-reveal {
  0% { opacity: 0; transform: translateY(10px) scale(.68); filter: blur(5px); }
  68% { opacity: 1; transform: translateY(-2px) scale(1.08); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: url(#loveMainGlow); }
}
@keyframes love-vignette-breathe { 0%,100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes love-dust-twinkle { from { opacity: .36; } to { opacity: .92; } }

/* Three gifts each use their own illustration and opening motion. */
.gift-grid { gap: 17px; max-width: 720px; }
.gift-card {
  position: relative;
  min-height: 242px;
  padding: 18px 13px 17px;
  border-radius: 23px;
  border-color: rgba(232, 183, 199, .62);
  background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(255,248,251,.90));
  box-shadow: 0 12px 30px rgba(194, 113, 144, .10), inset 0 1px 0 #fff;
  overflow: hidden;
  transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, border-color .32s ease, background .32s ease;
}
.gift-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 17px;
  pointer-events: none;
}
.gift-card::after {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  top: -96px; right: -77px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,206,221,.28), transparent 68%);
  pointer-events: none;
  transition: transform .45s ease;
}
.gift-card:hover {
  transform: translateY(-8px) rotate(-.5deg);
  border-color: #e9a5bb;
  box-shadow: 0 20px 39px rgba(194, 113, 144, .17), inset 0 1px 0 #fff;
  background: #fff;
}
.gift-card:nth-child(2):hover { transform: translateY(-8px) rotate(.5deg); }
.gift-card:nth-child(3):hover { transform: translateY(-8px) rotate(-.25deg); }
.gift-card:hover::after { transform: scale(1.45); }
.gift-card.is-opened {
  border-color: #a9d7b5;
  background: linear-gradient(155deg, #fff7fa, #f0fff4);
  box-shadow: 0 12px 30px rgba(111, 174, 128, .13), inset 0 1px 0 #fff;
}
.gift-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 116px;
  flex: 0 0 116px;
  margin: 0 auto 9px;
  border-radius: 27px;
  background: radial-gradient(circle at 50% 40%, #fff9fb 0, #ffeaf1 72%, #f8dce7 100%);
  overflow: visible;
  isolation: isolate;
  transform-origin: 50% 70%;
  animation: gift-art-float 4.1s ease-in-out infinite;
}
.gift-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gift-card:nth-child(2) .gift-art { animation-delay: -.95s; }
.gift-card:nth-child(3) .gift-art { animation-delay: -1.85s; }
.teddy-art { background: radial-gradient(circle at 50% 45%, #fff9f1 0, #fbe9e3 74%, #f4ddd5 100%); }
.photo-art { background: radial-gradient(circle at 50% 45%, #fff7fa 0, #e9f6ed 73%, #dff0e5 100%); }
.letter-art { background: radial-gradient(circle at 50% 45%, #fffaf4 0, #fff0df 73%, #f6e2d1 100%); }
.teddy-illustration { width: 108px !important; height: 104px !important; }
.teddy-body { transform-origin: 66px 76px; animation: teddy-breathe 3.1s ease-in-out infinite; }
.teddy-sparkles { animation: teddy-sparkle 2.5s ease-in-out infinite alternate; }
.gift-art-glint {
  position: absolute;
  top: 8px; right: 9px;
  color: #e58ba7; font-size: 14px;
  opacity: .7;
  animation: glint-twinkle 2.2s ease-in-out infinite;
}
.photo-stack { position: relative; width: 94px; height: 102px; }
.mini-polaroid {
  position: absolute;
  width: 61px; height: 83px;
  padding: 4px 4px 9px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 15px rgba(83, 105, 86, .18);
}
.mini-polaroid img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #f5edf0;
}
.mini-polaroid-back { left: 4px; top: 9px; transform: rotate(-12deg); opacity: .88; }
.mini-polaroid-front { right: 5px; top: 3px; transform: rotate(8deg); }
.camera-flash {
  position: absolute;
  top: 0; right: 0;
  color: #eaa34c;
  font-size: 21px;
  text-shadow: 0 0 12px rgba(243, 183, 94, .75);
  animation: camera-flash 3.2s 1s ease-in-out infinite;
}
.letter-illustration { width: 112px !important; height: 104px !important; }
.letter-flap { transform-origin: 66px 35px; transition: transform .48s cubic-bezier(.2,.8,.2,1); }
.letter-seal-dot { transform-origin: 66px 65px; animation: seal-pulse 2.2s ease-in-out infinite; }
.gift-card-letter:hover .letter-flap { transform: rotateX(180deg); }
.gift-card.is-opening .teddy-body { animation: teddy-gift-bounce .72s cubic-bezier(.18,.8,.22,1); }
.gift-card.is-opening .photo-stack { animation: photo-reveal-pop .8s cubic-bezier(.16,.8,.2,1); }
.gift-card.is-opening .letter-flap { transform: rotateX(180deg); }
.gift-card.is-opening .letter-seal-dot { animation: seal-break .62s ease-out; }
.gift-card.is-opening { animation: gift-card-open .62s cubic-bezier(.18,.75,.24,1); }
.gift-card .gift-status { transition: color .25s ease, transform .25s ease; }
.gift-card.is-opened .gift-status { color: #62966e; }
@keyframes teddy-breathe { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1.5deg); } }
@keyframes teddy-sparkle { from { opacity: .4; transform: scale(.8); } to { opacity: 1; transform: scale(1.12); } }
@keyframes teddy-gift-bounce { 0% { transform: scale(.78) rotate(-9deg); } 48% { transform: scale(1.22) rotate(8deg); } 72% { transform: scale(.96) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes photo-reveal-pop { 0% { transform: translateY(8px) scale(.74) rotate(-8deg); } 55% { transform: translateY(-9px) scale(1.12) rotate(4deg); } 100% { transform: translateY(0) scale(1) rotate(0); } }
@keyframes camera-flash { 0%,82%,100% { opacity: .25; transform: scale(.75) rotate(-12deg); } 88% { opacity: 1; transform: scale(1.35) rotate(15deg); } }
@keyframes seal-pulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(231,95,136,0)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 7px rgba(231,95,136,.55)); } }
@keyframes seal-break { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(.82); opacity: .7; } }
@keyframes glint-twinkle { 0%,100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.18) rotate(18deg); } }

/* Distinct, illustrated reveal dialog for each gift. */
.gift-dialog {
  width: min(calc(100% - 30px), 405px);
  max-height: min(90svh, 760px);
  overflow-y: auto;
  padding: 31px 27px 25px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 27px;
  background: linear-gradient(155deg, #fffafd, #fff0f5);
  box-shadow: 0 28px 90px rgba(72, 35, 54, .30), inset 0 1px 0 #fff;
}
.gift-dialog[open] { animation: gift-dialog-in .48s cubic-bezier(.16,.8,.2,1) both; }
.gift-dialog[data-gift="photo"] { background: linear-gradient(155deg, #fff7fa, #e9f8ed); }
.gift-dialog[data-gift="letter"] { background: linear-gradient(155deg, #fffaf4, #ffefdf); }
.gift-dialog::backdrop { background: rgba(31, 20, 31, .52); backdrop-filter: blur(7px); }
.gift-dialog .question-kicker { margin: 0 0 6px; color: #be7a91; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; font-weight: 900; }
.gift-dialog h2 { margin: 7px 0 8px; font-family: var(--display); font-size: 29px; line-height: 1.15; color: #644957; }
.gift-dialog > p:not(.question-kicker) { max-width: 310px; margin: 0 auto 19px; color: #856e79; font-size: 14px; line-height: 1.75; }
.gift-dialog-art {
  position: relative;
  width: 100%;
  min-height: 174px;
  margin: 3px auto 8px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 18px;
}
.teddy-reveal-scene, .memory-reveal-scene, .letter-reveal-scene {
  position: relative;
  width: 100%; min-height: 174px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden;
}
.dialog-teddy { width: 154px !important; height: 145px !important; overflow: visible; filter: drop-shadow(0 12px 11px rgba(160,101,85,.13)); animation: dialog-teddy-float 3s ease-in-out infinite; }
.teddy-reveal-note, .memory-reveal-label, .letter-reveal-note {
  margin-top: -1px;
  color: #b77f91;
  font-family: var(--hand); font-size: 20px; line-height: 1.1;
}
.reveal-heart { position: absolute; color: #ec7e9f; font-size: 24px; animation: reveal-heart-float 2.8s ease-in-out infinite; }
.reveal-heart-a { left: 14%; top: 25%; }
.reveal-heart-b { right: 13%; top: 18%; animation-delay: -.9s; color: #e3ab72; }
.memory-gift-polaroid {
  position: relative;
  width: 145px;
  margin: 1px auto 10px;
  padding: 8px 8px 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 12px 24px rgba(95, 119, 99, .17);
  transform: rotate(-2.5deg);
  animation: memory-polaroid-show .75s cubic-bezier(.16,.8,.2,1) both;
}
.memory-gift-polaroid img {
  display: block;
  width: 100%; height: 132px;
  object-fit: contain;
  background: #f4edf0;
}
.memory-gift-polaroid figcaption {
  padding-top: 7px;
  color: #966f80;
  font-family: var(--hand); font-size: 16px; line-height: 1.13;
}
.memory-gift-polaroid small { font-size: 14px; }
.memory-gift-tape {
  position: absolute; z-index: 1; top: -8px; left: 50%; width: 47px; height: 15px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(246, 204, 215, .77);
  border: 1px solid rgba(255,255,255,.5);
}
.letter-gift-envelope { position: relative; width: 190px; height: 138px; margin-top: 5px; }
.letter-gift-envelope svg { position: relative; z-index: 2; width: 100%; height: 100%; filter: drop-shadow(0 10px 13px rgba(171,106,114,.16)); }
.letter-gift-paper {
  position: absolute; z-index: 1; width: 142px; height: 103px; left: 24px; top: 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background: #fffdfa; border:1px solid #f0dfd6; border-radius:5px;
  color:#a77c88; font-family:var(--hand); font-size:16px;
  animation: letter-paper-rise 1.7s .25s ease-in-out infinite alternate;
}
.letter-gift-paper b { color:#d75c82; font-family:var(--display); font-size:17px; }
.letter-gift-paper i { color:#d75c82; font-size:19px; font-style:normal; }
.letter-gift-flap { transform-origin: 95px 34px; }
.gift-dialog[data-gift="letter"] .letter-gift-flap { animation: letter-flap-open .9s .15s cubic-bezier(.2,.75,.25,1) both; }
.gift-dialog-done { min-width: 180px; }
@keyframes gift-dialog-in { from { opacity: 0; transform: translateY(18px) scale(.92); } 72% { opacity: 1; transform: translateY(-2px) scale(1.015); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-teddy-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes reveal-heart-float { 0%,100% { transform: translateY(0) scale(.9); opacity: .55; } 50% { transform: translateY(-12px) scale(1.18); opacity: 1; } }
@keyframes memory-polaroid-show { from { opacity: 0; transform: translateY(22px) rotate(-10deg) scale(.82); } to { opacity: 1; transform: translateY(0) rotate(-2.5deg) scale(1); } }
@keyframes letter-paper-rise { from { transform: translateY(8px) rotate(-2deg); } to { transform: translateY(-14px) rotate(1deg); } }
@keyframes letter-flap-open { from { transform: rotateX(0deg); } to { transform: rotateX(180deg); } }
@keyframes gift-card-open {
  0%,100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-9px) scale(1.035); }
  53% { transform: translateY(1px) scale(.985); }
  78% { transform: translateY(-3px) scale(1.012); }
}
@media (max-width: 680px) {
  .love-cloud { width: min(100%, 455px); padding: 12px 10px 11px; margin: 0 auto 15px; }
  .love-cloud-svg { width: 100%; }
  .love-center-main { font-size: 46px; }
  .love-center-sub { font-size: 19px; }
  .love-cloud-caption { font-size: 18px; margin-top: -4px; }
  .gift-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); max-width: 370px; gap: 13px; }
  .gift-card { min-height: 214px; }
  .gift-card .gift-art { flex-basis: 105px; height: 105px; width: 108px; }
  .gift-dialog { padding: 29px 22px 22px; }
}
@media (max-width: 380px) {
  .love-cloud { padding: 9px 6px 10px; border-radius: 14px; }
  .love-center-main { font-size: 40px; }
  .gift-card { min-height: 207px; }
}
@media (prefers-reduced-motion: reduce) {
  .love-cloud *, .love-cloud::before, .love-cloud::after,
  .gift-art, .gift-art *, .gift-card, .gift-dialog[open], .gift-dialog[open] *,
  .gift-card.is-opening, .gift-card.is-opening * {
    animation: none !important; transition: none !important;
  }
  .love-word { opacity: .94 !important; filter: none !important; }
  .love-center-main, .love-center-sub { opacity: 1 !important; }
}
.reduce-motion .love-cloud *, .reduce-motion .gift-art, .reduce-motion .gift-art *,
.reduce-motion .gift-card, .reduce-motion .gift-dialog[open], .reduce-motion .gift-dialog[open] * {
  animation: none !important; transition: none !important;
}
.reduce-motion .love-word { opacity: .94 !important; filter: none !important; }
.reduce-motion .love-center-main, .reduce-motion .love-center-sub { opacity: 1 !important; }

/* Memory gift Polaroid spacing refinement */
.gift-dialog-art {
  width: 100%;
  height: auto;
  min-height: 174px;
  margin: 3px auto 8px;
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 18px;
}
.memory-reveal-scene { min-height: 160px; }
.memory-gift-polaroid {
  width: 134px;
  margin: 0 auto 4px;
  padding: 7px 7px 8px;
}
.memory-gift-polaroid img { height: 103px; }
.memory-gift-polaroid figcaption { padding-top: 5px; font-size: 15px; }
.memory-gift-polaroid small { font-size: 13px; }


/* SHINTAAA V22 — transparent LOVE heart that gently lives on the pastel page. */
.love-cloud {
  width: min(100%, 486px) !important;
  margin: 8px auto 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: love-cloud-float 6.8s ease-in-out infinite;
}
.love-cloud-vignette { display: none !important; }
.love-cloud::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 72%;
  height: 66%;
  left: 14%;
  top: 16%;
  border-radius: 50%;
  filter: blur(34px);
  background: radial-gradient(ellipse, rgba(255, 161, 190, .20), rgba(246, 180, 203, .09) 48%, transparent 76%);
  animation: love-ambient-pulse 5.8s ease-in-out infinite;
}
.love-cloud::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 44%;
  height: 34%;
  left: 28%;
  top: 35%;
  border-radius: 50%;
  filter: blur(28px);
  background: radial-gradient(ellipse, rgba(255, 212, 226, .18), transparent 72%);
  animation: love-ambient-pulse 4.7s 1.2s ease-in-out infinite;
}
.love-cloud-svg {
  width: min(100%, 455px) !important;
  height: auto;
  filter: drop-shadow(0 7px 13px rgba(216, 77, 128, .12)) !important;
  animation: love-svg-breathe 5.2s ease-in-out infinite;
}
.love-word {
  fill: #d94a7c !important;
  filter: drop-shadow(0 0 1px rgba(207, 55, 111, .28)) !important;
}
.love-word:nth-child(3n) { fill: #e66b91 !important; }
.love-word:nth-child(5n) { fill: #c83d75 !important; }
.love-word:nth-child(7n) { fill: #d65083 !important; }
.love-word-loose { fill: #e56b91 !important; }
.love-center-main {
  fill: url(#loveCenterTextGradient) !important;
  stroke: rgba(255, 248, 251, .94) !important;
  stroke-width: 2.3px !important;
  paint-order: stroke fill;
  filter: url(#loveMainGlow) !important;
}
.love-center-sub {
  fill: #a85679 !important;
  filter: drop-shadow(0 0 5px rgba(255, 230, 239, .78)) !important;
}
.love-cloud-halo { opacity: .95; }
.love-center-glow { opacity: .78; }
.love-heart-outline {
  stroke: #e76b96 !important;
  stroke-opacity: .25 !important;
  stroke-width: 1.25px !important;
}
.love-cloud.is-forming .love-word {
  animation: love-word-living 10.8s var(--word-delay, .1s) cubic-bezier(.20,.65,.28,1) infinite !important;
}
.love-cloud.is-forming .love-cloud-halo {
  animation: love-halo-breathe 5.2s ease-in-out infinite !important;
}
.love-cloud.is-forming .love-center-glow {
  animation: love-center-light 3.4s ease-in-out infinite !important;
}
.love-cloud.is-forming .love-heart-outline {
  stroke-dasharray: 1200;
  stroke-dashoffset: 0;
  animation: love-outline-pulse 5.8s ease-in-out infinite !important;
}
.love-cloud.is-forming .love-center-main {
  opacity: 0;
  animation: reference-center-reveal .92s 2.8s cubic-bezier(.16,.8,.2,1) both !important;
}
.love-cloud.is-forming .love-center-sub {
  opacity: 0;
  animation: reference-center-reveal .82s 3.15s cubic-bezier(.16,.8,.2,1) both !important;
}
.love-cloud-center {
  transform-box: fill-box;
  transform-origin: center;
  animation: love-center-heartbeat 4.2s 3.8s ease-in-out infinite;
}
.love-word-dust {
  animation: love-dust-twinkle 3.6s ease-in-out infinite alternate !important;
}
.love-cloud-caption {
  color: #b66c87 !important;
  text-shadow: 0 0 10px rgba(255, 228, 237, .85) !important;
}
@keyframes love-cloud-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes love-svg-breathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
@keyframes love-ambient-pulse {
  0%,100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes love-word-living {
  0% { opacity: 0; transform: translateY(9px) scale(.88); filter: drop-shadow(0 0 0 rgba(218,70,126,0)); }
  9% { opacity: .96; transform: translateY(-1px) scale(1.025); filter: drop-shadow(0 0 5px rgba(218,70,126,.40)); }
  18%,72% { opacity: .91; transform: translateY(0) scale(1); filter: drop-shadow(0 0 2px rgba(218,70,126,.28)); }
  88% { opacity: .64; transform: translateY(-1px) scale(.99); filter: drop-shadow(0 0 5px rgba(238,112,157,.36)); }
  100% { opacity: 0; transform: translateY(-4px) scale(.94); filter: drop-shadow(0 0 0 rgba(218,70,126,0)); }
}
@keyframes love-center-heartbeat {
  0%,100% { transform: scale(1); }
  18% { transform: scale(1.035); }
  32% { transform: scale(1); }
  48% { transform: scale(1.022); }
  64% { transform: scale(1); }
}
@keyframes love-outline-pulse {
  0%,100% { opacity: .18; stroke-width: 1px; }
  50% { opacity: .48; stroke-width: 2px; }
}
@media (max-width: 680px) {
  .love-cloud { width: min(94vw, 420px) !important; margin: 4px auto 14px !important; }
  .love-cloud-svg { width: 100% !important; }
}
@media (max-width: 380px) {
  .love-cloud { width: min(96vw, 360px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .love-cloud, .love-cloud::before, .love-cloud::after, .love-cloud-svg,
  .love-cloud .love-word, .love-cloud .love-center-main, .love-cloud .love-center-sub,
  .love-cloud .love-heart-outline, .love-cloud .love-center-glow,
  .love-cloud .love-cloud-halo, .love-cloud .love-word-dust,
  .love-cloud .love-cloud-center {
    animation: none !important;
    transition: none !important;
  }
  .love-cloud .love-word,
  .love-cloud .love-center-main,
  .love-cloud .love-center-sub { opacity: 1 !important; }
}
.reduce-motion .love-cloud, .reduce-motion .love-cloud *,
.reduce-motion .love-cloud::before, .reduce-motion .love-cloud::after {
  animation: none !important;
  transition: none !important;
}
.reduce-motion .love-cloud .love-word,
.reduce-motion .love-cloud .love-center-main,
.reduce-motion .love-cloud .love-center-sub { opacity: 1 !important; }

/* Keep decorative particles inside the viewport on narrow screens. */
html, body { overflow-x: clip; }

/* Give the transparent heart a clearly visible, gentle repeating heartbeat. */
.love-cloud-svg {
  animation: love-svg-alive 5.6s ease-in-out infinite !important;
}
.love-word-field {
  transform-box: fill-box;
  transform-origin: 50% 52%;
  animation: love-word-heartbeat 4.4s ease-in-out infinite;
}
.love-cloud.is-forming .love-word {
  animation:
    reference-word-arrive .72s var(--word-delay, .1s) cubic-bezier(.16,.78,.24,1) both,
    love-word-glimmer 4.3s calc(var(--word-delay, .1s) + 1s) ease-in-out infinite !important;
}
.love-cloud-center {
  animation: love-center-heartbeat 3.9s 3.8s ease-in-out infinite !important;
}
.love-cloud.is-forming .love-center-main {
  animation:
    reference-center-reveal .92s 2.8s cubic-bezier(.16,.8,.2,1) both,
    love-main-glow-pulse 3.6s 4s ease-in-out infinite !important;
}
.love-cloud.is-forming .love-center-glow {
  animation: love-center-light 2.9s 2.8s ease-in-out infinite !important;
}
.love-cloud::before { animation: love-ambient-pulse 4.8s ease-in-out infinite !important; }
.love-cloud::after { animation: love-ambient-pulse 3.9s 1s ease-in-out infinite !important; }
@keyframes love-svg-alive {
  0%,100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-3px) scale(1.018); }
  46% { transform: translateY(0) scale(1.004); }
  68% { transform: translateY(-2px) scale(1.012); }
}
@keyframes love-word-heartbeat {
  0%,100% { transform: scale(1); opacity: .98; }
  20% { transform: scale(1.022); opacity: 1; }
  34% { transform: scale(1); opacity: .96; }
  54% { transform: scale(1.014); opacity: 1; }
  70% { transform: scale(1); opacity: .98; }
}
@keyframes love-word-glimmer {
  0%,100% { filter: drop-shadow(0 0 1px rgba(218,70,126,.20)); }
  48% { filter: drop-shadow(0 0 5px rgba(236,104,153,.58)); }
}
@keyframes love-main-glow-pulse {
  0%,100% { filter: drop-shadow(0 0 5px rgba(229,83,135,.30)); }
  50% { filter: drop-shadow(0 0 13px rgba(229,83,135,.66)); }
}
@media (prefers-reduced-motion: reduce) {
  .love-word-field, .love-cloud-svg { animation: none !important; }
  .love-cloud.is-forming .love-word,
  .love-cloud.is-forming .love-center-main {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}
.reduce-motion .love-word-field, .reduce-motion .love-cloud-svg { animation: none !important; }
.reduce-motion .love-cloud.is-forming .love-word,
.reduce-motion .love-cloud.is-forming .love-center-main {
  animation: none !important; opacity: 1 !important; filter: none !important;
}


/* SHINTAAA V23 — handwritten central love mark + refined living-heart motion. */
.love-center-main {
  font-family: var(--hand, "Comic Sans MS", cursive) !important;
  font-size: 84px !important;
  font-weight: 700 !important;
  letter-spacing: -2.2px !important;
  stroke: rgba(255, 250, 252, .96) !important;
  stroke-width: 1.35px !important;
  paint-order: stroke fill;
  filter: url(#loveMainGlow) !important;
}
.love-center-letter {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
}
.love-cloud.is-forming .love-center-letter {
  animation: love-letter-focus .64s var(--letter-delay, 2.9s) cubic-bezier(.18,.82,.22,1) both;
}
.love-main-shine {
  opacity: 0;
  stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.8));
  animation: love-main-sweep 5.6s 4.1s ease-in-out infinite;
  pointer-events: none;
}
.love-orbit-lights {
  opacity: .88;
  filter: drop-shadow(0 0 4px rgba(248,116,164,.58));
  animation: love-orbit-glow 3.6s ease-in-out infinite;
  pointer-events: none;
}
.love-cloud-svg {
  animation: love-svg-alive 5.4s ease-in-out infinite !important;
}
.love-word-field {
  transform-box: fill-box;
  transform-origin: 50% 52%;
  animation: love-word-double-beat 4.8s ease-in-out infinite !important;
}
.love-cloud.is-forming .love-center-main {
  animation: love-center-bloom 4.8s 3.7s ease-in-out infinite !important;
  opacity: 1;
}
.love-cloud.is-forming .love-center-letter {
  animation: love-letter-focus .64s var(--letter-delay, 2.9s) cubic-bezier(.18,.82,.22,1) both;
}
@keyframes love-letter-focus {
  0% { opacity: 0; filter: blur(5px); letter-spacing: 5px; }
  72% { opacity: 1; filter: blur(0); letter-spacing: -2.2px; }
  100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(240,104,153,.28)); letter-spacing: -2.2px; }
}
@keyframes love-word-double-beat {
  0%, 100% { transform: scale(1); opacity: .97; }
  11% { transform: scale(1.026); opacity: 1; }
  21% { transform: scale(1); opacity: .96; }
  34% { transform: scale(1.018); opacity: 1; }
  47%, 78% { transform: scale(1); opacity: .98; }
}
@keyframes love-center-bloom {
  0%, 100% { transform: scale(1); filter: url(#loveMainGlow) drop-shadow(0 0 4px rgba(229,83,135,.26)); }
  12% { transform: scale(1.035); filter: url(#loveMainGlow) drop-shadow(0 0 12px rgba(255,126,174,.62)); }
  22% { transform: scale(1); }
  35% { transform: scale(1.022); filter: url(#loveMainGlow) drop-shadow(0 0 9px rgba(255,126,174,.5)); }
  48%, 78% { transform: scale(1); }
}
@keyframes love-main-sweep {
  0%, 15% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  24% { opacity: .88; stroke-dasharray: 38 100; stroke-dashoffset: -8; }
  38% { opacity: .95; stroke-dasharray: 45 100; stroke-dashoffset: -55; }
  49%, 100% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: -100; }
}
@keyframes love-orbit-glow {
  0%, 100% { opacity: .58; }
  50% { opacity: 1; }
}
@media (max-width: 680px) {
  .love-center-main { font-size: 68px !important; letter-spacing: -1.8px !important; }
}
@media (max-width: 380px) {
  .love-center-main { font-size: 60px !important; letter-spacing: -1.5px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .love-word-field, .love-cloud-svg, .love-main-shine, .love-orbit-lights { animation: none !important; }
  .love-cloud.is-forming .love-center-letter { animation: none !important; opacity: 1 !important; filter: none !important; }
  .love-cloud.is-forming .love-center-main { animation: none !important; opacity: 1 !important; }
}
.reduce-motion .love-word-field, .reduce-motion .love-cloud-svg, .reduce-motion .love-main-shine, .reduce-motion .love-orbit-lights { animation: none !important; }
.reduce-motion .love-center-letter { animation: none !important; opacity: 1 !important; filter: none !important; }
.reduce-motion .love-cloud.is-forming .love-center-main { animation: none !important; opacity: 1 !important; }


/* SHINTAAA V24 — light floating-love background, responsive playful buttons, and GPU-friendly LOVE motion. */
.ambient-hearts { z-index: 0; }
.ambient-heart {
  position: absolute;
  display: block;
  color: #e98da9;
  opacity: .28;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  animation: ambient-heart-wander 7.5s ease-in-out infinite;
}
@keyframes ambient-heart-wander {
  0%, 100% { transform: translate3d(0,0,0) rotate(-8deg) scale(.92); opacity: .18; }
  50% { transform: translate3d(var(--heart-drift-x,8px),var(--heart-drift-y,-10px),0) rotate(9deg) scale(1.1); opacity: .43; }
}
.sparkle { will-change: transform, opacity; }
.ambient-petal { will-change: transform, opacity; }

.choice-row {
  min-height: 104px;
  padding: 15px 2px;
  gap: 10px;
  overflow: visible;
  isolation: isolate;
}
.yes-button {
  position: relative;
  z-index: 2;
  transform: scale(var(--yes-grow, 1));
  transform-origin: center;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease;
  will-change: transform;
}
.yes-button.yes-growing {
  animation: yes-grow-pop .38s cubic-bezier(.18,.8,.22,1);
}
@keyframes yes-grow-pop {
  0% { transform: scale(calc(var(--yes-grow, 1) * .94)); }
  58% { transform: scale(calc(var(--yes-grow, 1) * 1.045)); }
  100% { transform: scale(var(--yes-grow, 1)); }
}
.no-button {
  position: relative;
  z-index: 3;
  transform: translate3d(var(--dodge-x,0),var(--dodge-y,0),0) rotate(var(--dodge-rotate,0deg));
  transition: transform .34s cubic-bezier(.16,.82,.22,1), background .18s ease, box-shadow .18s ease;
  will-change: transform;
  touch-action: manipulation;
}
.no-button.is-dodging { animation: no-dodge-squish .32s ease; }
.no-button:focus-visible { outline: 3px solid #d95f84; outline-offset: 4px; }
@keyframes no-dodge-squish {
  0% { scale: 1; }
  45% { scale: .88 1.08; }
  100% { scale: 1; }
}
@media (max-width: 390px) {
  .choice-row { min-height: 110px; gap: 7px; }
  .yes-button { min-width: 142px; }
  .no-button { min-width: 68px; }
}

/* Lighter LOVE heart: 92 phrases are animated as one SVG group instead of 154 filtered text nodes. */
.love-cloud {
  width: min(100%, 390px) !important;
  margin: 2px auto 8px !important;
  contain: layout style;
}
.gift-page .section-subtitle { margin-bottom: 10px; }
@media (max-width: 680px) {
  .love-cloud { width: min(88vw, 350px) !important; margin-block: 0 8px !important; }
}
@media (max-width: 380px) {
  .love-cloud { width: min(90vw, 320px) !important; }
}
.love-cloud-svg {
  animation: v24-love-float 6.8s ease-in-out infinite !important;
  filter: none !important;
  will-change: transform;
}
.love-word-field {
  opacity: 1 !important;
  filter: none !important;
  transform-box: fill-box;
  transform-origin: 50% 52%;
  animation: v24-word-heartbeat 5.4s ease-in-out infinite !important;
  will-change: transform, opacity;
}
.love-cloud .love-word,
.love-cloud.is-forming .love-word {
  filter: none !important;
  animation: none !important;
}
.love-cloud .love-center-main,
.love-cloud.is-forming .love-center-main {
  font-family: var(--hand, "Caveat", cursive) !important;
  font-size: 84px !important;
  font-weight: 700 !important;
  letter-spacing: -2px !important;
  fill: #d64b82 !important;
  stroke: rgba(255,250,252,.9) !important;
  stroke-width: 1.15px !important;
  paint-order: stroke fill;
  filter: none !important;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1 !important;
  animation: v24-center-pulse 5.2s ease-in-out infinite !important;
  will-change: transform, opacity;
}
.love-cloud.is-forming .love-center-letter { animation: none !important; }
.love-cloud .love-main-shine {
  filter: none !important;
  animation: v24-shine-sweep 6.5s 1s ease-in-out infinite !important;
}
.love-cloud .love-orbit-lights {
  filter: none !important;
  animation: v24-orbit-glow 4.6s ease-in-out infinite !important;
}
.love-orbit-dot { fill: #fff8fb; opacity: .3; }
.love-orbit-dot.dot-a { animation: v24-dot-twinkle 3.2s .2s ease-in-out infinite; }
.love-orbit-dot.dot-b { animation: v24-dot-twinkle 3.6s 1.1s ease-in-out infinite; }
.love-orbit-dot.dot-c { animation: v24-dot-twinkle 3.1s 1.8s ease-in-out infinite; }
.love-orbit-dot.dot-d { animation: v24-dot-twinkle 3.8s 2.3s ease-in-out infinite; }
@keyframes v24-love-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-4px,0) scale(1.012); }
}
@keyframes v24-word-heartbeat {
  0%,100% { transform: scale(1); opacity: .96; }
  13% { transform: scale(1.018); opacity: 1; }
  25% { transform: scale(1); opacity: .96; }
  39% { transform: scale(1.012); opacity: 1; }
  55%,80% { transform: scale(1); opacity: .98; }
}
@keyframes v24-center-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  12% { transform: scale(1.045); opacity: 1; }
  23% { transform: scale(1); opacity: .96; }
  38% { transform: scale(1.026); opacity: 1; }
  52%,80% { transform: scale(1); opacity: .98; }
}
@keyframes v24-shine-sweep {
  0%,18% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  30% { opacity: .75; stroke-dasharray: 34 100; stroke-dashoffset: -8; }
  43% { opacity: .88; stroke-dasharray: 42 100; stroke-dashoffset: -58; }
  56%,100% { opacity: 0; stroke-dasharray: 0 100; stroke-dashoffset: -100; }
}
@keyframes v24-orbit-glow { 0%,100% { opacity: .38; } 50% { opacity: .92; } }
@keyframes v24-dot-twinkle { 0%,100% { opacity: .18; transform: scale(.75); } 50% { opacity: .95; transform: scale(1.5); } }
@media (max-width: 680px) { .love-cloud .love-center-main { font-size: 68px !important; } }
@media (max-width: 380px) { .love-cloud .love-center-main { font-size: 58px !important; } }

/* Keep gift-card hit areas stable; the illustrated objects inside each card do the gentle floating. */
.gift-card { will-change: auto; }
.gift-card.is-opening { animation: gift-card-open .62s cubic-bezier(.18,.75,.24,1) !important; }

@media (prefers-reduced-motion: reduce) {
  .ambient-heart, .sparkle, .ambient-petal, .love-cloud *, .gift-card, .gift-art, .no-button, .yes-button {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .love-word-field, .love-cloud-svg, .love-cloud .love-center-main { transform: none !important; opacity: 1 !important; }
}
.reduce-motion .ambient-heart, .reduce-motion .sparkle, .reduce-motion .ambient-petal,
.reduce-motion .love-cloud *, .reduce-motion .gift-card, .reduce-motion .gift-art,
.reduce-motion .no-button, .reduce-motion .yes-button {
  animation: none !important; transition: none !important; will-change: auto !important;
}

/* ============================================================
   SHINTAAA V25 — Pink × Blue Love Garden
   A complete palette pass: blush pink and powder blue share
   the visual lead; mint and warm cream remain the soft base.
   ============================================================ */
:root {
  --pink-0: #fffafd;
  --pink-1: #fff4f8;
  --pink-2: #fbe5ef;
  --pink-3: #f3b8ce;
  --pink-4: #e779a4;
  --pink-5: #d64f86;
  --blue-0: #fff8fb;
  --blue-1: #fcf1f4;
  --blue-2: #f8e3e9;
  --blue-3: #eec4d0;
  --blue-4: #ce8a9e;
  --blue-5: #af5e76;
  --mint: #fff3f6;
  --mint-deep: #e3f4eb;
  --cream: #fff9f3;
  --ink: #514653;
  --muted: #8e8190;
  --shadow: 0 18px 55px rgba(185, 138, 152, .13), 0 8px 24px rgba(219, 132, 164, .08);
}

html { background: #fff8fb; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 8%, rgba(250, 207, 224, .56) 0%, transparent 34%),
    radial-gradient(ellipse at 92% 12%, rgba(242, 200, 213, .55) 0%, transparent 36%),
    radial-gradient(ellipse at 83% 82%, rgba(246, 214, 224, .34) 0%, transparent 34%),
    radial-gradient(ellipse at 14% 88%, rgba(251, 224, 235, .40) 0%, transparent 36%),
    linear-gradient(135deg, #fff9fb 0%, #fef9fb 48%, #fff7fb 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.56), transparent 36%),
    linear-gradient(120deg, rgba(255,227,238,.10), rgba(248, 225, 232, .12) 52%, rgba(255,235,243,.10));
}

/* Ambient hearts now alternate between the bouquet's blue and our blush pink. */
.ambient-heart { color: #e88cac; text-shadow: 0 2px 12px rgba(225, 128, 164, .12); }
.ambient-heart:nth-child(3n + 2) { color: #d98ba7; text-shadow: 0 2px 13px rgba(198, 113, 139, .19); }
.ambient-heart:nth-child(5n) { color: #c2a1cf; }
.sparkle { color: #e7a0ba; text-shadow: 0 0 9px rgba(238, 164, 191, .25); }
.sparkle:nth-child(even) { color: #d98ba7; text-shadow: 0 0 10px rgba(212, 134, 158, .34); }
.ambient-petal { color: #e9a2bd; text-shadow: 0 2px 10px rgba(224, 145, 177, .14); }
.ambient-petal:nth-child(3n + 1) { color: #d095a7; text-shadow: 0 2px 10px rgba(204, 134, 155, .22); }
.ambient-petal:nth-child(4n) { color: #d6a6bd; }

/* Header and global controls. */
.topbar { border-bottom: 1px solid rgba(220, 178, 191, .20); }
.wordmark { color: #88747a; }
.wordmark span { color: var(--pink-5); text-shadow: 0 0 10px rgba(219, 105, 153, .22); }
.sound-toggle {
  color: #b56c82;
  border-color: rgba(211, 152, 170, .42);
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(252, 244, 246, .78));
  box-shadow: 0 3px 12px rgba(193, 126, 146, .08);
}
.sound-toggle:hover { border-color: rgba(219, 119, 160, .55); background: #fff7fb; }
.sound-toggle[aria-pressed="true"] {
  color: #bd5f8a;
  border-color: rgba(222, 133, 170, .56);
  background: linear-gradient(135deg, #ffeaf2, #fbecf1);
  box-shadow: 0 4px 13px rgba(193, 152, 164, .15);
}
.site-footer { color: #a29397; }

/* Cards: preserve the signature mint, but give it a cool blue edge. */
.mint-card {
  border-color: rgba(255,255,255,.96);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(246, 217, 226, .38), transparent 42%),
    linear-gradient(145deg, #f7fff9 0%, #fff3f6 58%, #fff1f6 100%);
  box-shadow: 0 18px 55px rgba(185, 137, 151, .12), 0 9px 26px rgba(218, 142, 172, .08), inset 0 0 0 1px rgba(255,255,255,.72);
}
.mint-card::before { background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(249, 228, 234, .42)); }
.card-topline { color: #a78a93; }
.mini-heart { color: #df82a8; }
.letter-stamp, .closing-heart {
  background: linear-gradient(145deg, #ffe5ef, #ffeaf1);
  color: #c45f8a;
  box-shadow: 0 6px 17px rgba(194, 157, 168, .15);
}
.letter-stamp[aria-expanded="true"] { background: linear-gradient(145deg, #f8c7db, #f3d3dc); }
.letter-greeting, .letter-card .letter-body .letter-lead { color: #bd648b; }
.card-heading, .question-title, .section-title, .closing-title { color: #5b4c50; }
.letter-body, .letter-card .letter-body { color: #706b7a; }
.handwritten, .signature { color: #bd6f98; }
.secret-message {
  border-color: rgba(206, 146, 164, .48) !important;
  background: linear-gradient(145deg, rgba(255,250,252,.92), rgba(252, 242, 245, .84)) !important;
}
.secret-message-kicker, .secret-message-sign { color: #c45e8c; }
.stamp-hint { color: #b28693; }

/* Buttons use pink as the emotional lead and blue as the cool highlight. */
.pill-button, .primary {
  background: linear-gradient(108deg, #e96f9b 0%, #d94e86 58%, #c27e93 100%);
  box-shadow: 0 8px 19px rgba(192, 103, 151, .19), 0 4px 12px rgba(191, 121, 142, .10);
}
.pill-button:hover:not(:disabled), .primary:hover:not(:disabled) {
  box-shadow: 0 12px 24px rgba(191, 105, 153, .22), 0 7px 17px rgba(191, 119, 141, .18);
}
.secondary, .no-button {
  color: #ae6b7f;
  border-color: rgba(208, 144, 163, .55);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(251, 236, 241, .88));
}
.secondary:hover, .no-button:hover { background: linear-gradient(135deg, #fff8fb, #ffe8ef); }
.yes-button { box-shadow: 0 8px 20px rgba(211, 91, 142, .18), 0 4px 13px rgba(196, 116, 140, .12); }
.no-button:focus-visible, .yes-button:focus-visible { outline-color: rgba(198, 121, 144, .58); }
.text-next, .gift-status, .gift-card .gift-status { color: #b95f8b; }
.choice-feedback, .question-subtitle, .section-subtitle, .celebration-copy, .closing-copy { color: #878293; }
.question-title span, .celebration-title, .section-title span, .closing-title span { color: #d66d9b; }
.question-kicker, .eyebrow { color: #b47e8e; }

/* Cupid scene: pink envelope and bow with a small powder-blue gleam. */
.shoot-button {
  color: #b95685;
  border-color: rgba(255,255,255,.96);
  background: linear-gradient(120deg, rgba(255,250,252,.96), rgba(251, 239, 243, .94));
  box-shadow: 0 6px 18px rgba(198, 145, 161, .13);
}
.shoot-button:hover:not(:disabled) { box-shadow: 0 9px 22px rgba(211, 117, 160, .18), 0 4px 12px rgba(197, 121, 144, .12); }
.shooting-status { color: #a98690; }
.bow-highlight { stroke: #fbedf1; }
.flight-arrow { filter: drop-shadow(0 3px 4px rgba(187, 113, 135, .22)); }
.envelope-wrap.is-hit { filter: drop-shadow(0 0 18px rgba(210, 132, 156, .27)) drop-shadow(0 0 12px rgba(237, 124, 169, .22)); }

/* Celebration and botanical scenes. Pink flowers stay dominant; blue butterflies
   and cool highlights tie the garden to the bouquet. */
.question-card, .celebration-card { box-shadow: 0 20px 54px rgba(189, 143, 157, .12), 0 8px 25px rgba(221, 134, 168, .08); }
.celebration-title { color: #d65f91; }
.celebration-confetti span:nth-child(even) { color: #d98ba7; }
.garden-butterfly.butterfly-two svg, .garden-butterfly.butterfly-four svg { filter: hue-rotate(178deg) saturate(.78) brightness(1.04); }
.featured-photo {
  border: 1px solid rgba(220, 171, 186, .48);
  box-shadow: 0 10px 24px rgba(183, 120, 139, .13), 0 5px 14px rgba(216, 130, 164, .08);
}
.featured-photo img { background: linear-gradient(135deg, #f8f1f4, #fff0f5); }
.featured-photo figcaption { color: #a98590; }

/* The LOVE heart remains predominantly pink, now threaded with powder-blue words. */
.love-cloud::before {
  background: radial-gradient(ellipse, rgba(255, 169, 197, .20) 0%, rgba(226, 207, 235, .13) 42%, rgba(235, 180, 197, .14) 64%, transparent 79%) !important;
}
.love-cloud::after {
  background: radial-gradient(ellipse, rgba(243, 205, 216, .23), rgba(255, 216, 231, .12) 52%, transparent 76%) !important;
}
.love-word:nth-child(4n + 1), .love-word:nth-child(9n + 2) { fill: #c1798f !important; }
.love-word:nth-child(11n + 4), .love-word:nth-child(13n + 3) { fill: #cd91a3 !important; }
.love-word:nth-child(5n) { fill: #d05a91 !important; }
.love-word:nth-child(7n) { fill: #dc6e9c !important; }
.love-cloud .love-center-main, .love-cloud.is-forming .love-center-main {
  fill: url(#loveCenterTextGradient) !important;
  stroke: rgba(255, 250, 253, .96) !important;
  filter: drop-shadow(0 0 7px rgba(224, 120, 169, .30)) !important;
}
.love-cloud-caption { color: #b08c97 !important; }

/* Gift cards each receive a restrained, distinct pink/blue treatment. */
.gift-grid { gap: 17px; }
.gift-card {
  border-color: rgba(215, 190, 197, .42);
  background: linear-gradient(155deg, rgba(255,255,255,.97), rgba(253, 249, 250, .91));
  box-shadow: 0 12px 30px rgba(187, 136, 151, .10), 0 6px 17px rgba(217, 136, 169, .07), inset 0 1px 0 #fff;
}
.gift-card:nth-child(1) { background: linear-gradient(155deg, #fffafd, #fff0f5); border-color: rgba(233, 168, 193, .54); }
.gift-card:nth-child(2) { background: linear-gradient(155deg, #ffffff, #fff0f5); border-color: rgba(216, 159, 176, .60); }
.gift-card:nth-child(3) { background: linear-gradient(155deg, #fffafd, #fcf3f6); border-color: rgba(214, 178, 189, .54); }
.gift-card:hover { border-color: #dfadbc; box-shadow: 0 19px 36px rgba(191, 121, 142, .15), 0 10px 22px rgba(220, 129, 167, .10); }
.gift-card:nth-child(1):hover { border-color: #e9a7c1; }
.gift-card.is-opened { border-color: #9fc5bd; background: linear-gradient(145deg, #fff7fa, #eff8f2); }
.gift-art { background: radial-gradient(circle at 50% 40%, #fff9fc 0%, #ffeaf2 72%, #f8dce8 100%); }
.teddy-art { background: radial-gradient(circle at 50% 45%, #fff9f4 0, #fce7ec 72%, #f4dce6 100%); }
.photo-art { background: radial-gradient(circle at 50% 45%, #fefcfd 0, #faecf0 73%, #f7dbe4 100%); }
.letter-art { background: radial-gradient(circle at 50% 45%, #fffafd 0, #fbeef2 73%, #f5e0e6 100%); }
.gift-card[data-gift="photo"] .gift-art { box-shadow: 0 8px 20px rgba(193, 115, 139, .13); }
.gift-card[data-gift="letter"] .gift-art { box-shadow: 0 8px 20px rgba(185, 138, 152, .12); }
.gift-card strong { color: #645559; }
.gift-hint { color: #96898d; }
.gift-card.is-opened .gift-status { color: #b26e82; }
.gift-progress { color: #a48b92; }
.gift-progress.is-complete { color: #b36a80; }
.gift-next-ready, #giftsNext:not(:disabled) { box-shadow: 0 9px 24px rgba(211, 101, 157, .17), 0 5px 15px rgba(194, 120, 142, .13); }

/* Gift reveal dialogs and photo album: alternating blue/pink stationery details. */
.gift-dialog {
  border-color: rgba(255,255,255,.96);
  background: linear-gradient(145deg, #fffafd, #fff0f6 54%, #fff0f5 100%);
  box-shadow: 0 28px 90px rgba(116, 85, 94, .24), inset 0 1px 0 #fff;
}
.gift-dialog[data-gift="photo"] { background: linear-gradient(145deg, #ffffff, #fff0f5 74%, #ffe8ef); }
.gift-dialog[data-gift="letter"] { background: linear-gradient(145deg, #fffafd, #fcf2f5 72%, #fbecf1); }
.gift-dialog::backdrop, .lightbox::backdrop { background: rgba(88, 64, 71, .30); backdrop-filter: blur(7px); }
.gift-dialog h2 { color: #685359; }
.gift-dialog .question-kicker { color: #b58392; }
.gift-dialog > p:not(.question-kicker) { color: #85767a; }
.dialog-close, .lightbox-close {
  color: #b26d82;
  background: linear-gradient(135deg, #fffafd, #fff0f5);
  box-shadow: 0 3px 12px rgba(189, 125, 144, .12);
}
.reveal-heart { color: #e47da8; }
.reveal-heart-b { color: #cd8a9e !important; }
.memory-gift-polaroid { box-shadow: 0 12px 25px rgba(187, 112, 135, .19); }
.memory-gift-polaroid figcaption { color: #b67488; }
.memory-gift-tape { background: rgba(239, 188, 203, .78); }
.letter-gift-paper { background: linear-gradient(145deg, #fffafd, #fcf1f4); border-color: rgba(209, 157, 173, .52); }
.letter-gift-paper b, .letter-gift-paper i { color: #c95e91; }
.letter-gift-envelope svg { filter: drop-shadow(0 10px 13px rgba(186, 118, 139, .16)); }

.memory-item {
  border-color: rgba(218, 185, 195, .50);
  box-shadow: 0 9px 23px rgba(186, 119, 139, .10), 0 5px 14px rgba(220, 134, 167, .06);
}
.memory-item:nth-child(odd) { border-color: rgba(230, 174, 196, .62); }
.memory-item:nth-child(even) { border-color: rgba(218, 166, 182, .68); }
.memory-item:hover { box-shadow: 0 16px 30px rgba(186, 119, 139, .16), 0 8px 20px rgba(220, 134, 167, .10); }
.memory-image { background: linear-gradient(135deg, #fff3f7, #fff0f5); }
.memory-caption { color: #9f848c; }
.memory-caption-note, .memory-date-location { color: #a78a93; }
.memory-origin .memory-first-tag { background: linear-gradient(105deg, #fce5ef, #ffe8ef); color: #9b7e87; }
.memory-open-hint { color: #bd8395; }
.lightbox {
  border-color: rgba(226, 188, 199, .64);
  background: linear-gradient(145deg, rgba(255,250,252,.98), rgba(252, 243, 246, .98));
  box-shadow: 0 25px 85px rgba(117, 80, 91, .22);
}
.lightbox-arrow { background: linear-gradient(145deg, #ffeaf2, #ffeaf1); color: #b67488; }
.lightbox-counter, .lightbox-note { color: #aa8791; }
.lightbox-title { color: #6b555c; }
.lightbox-caption { color: #bd6d99; }
.lightbox-dots button { background: #eecfd8; }
.lightbox-dots button[aria-current="true"] { background: #d96e9c; }

/* Keeps the closing page, letter and photo frames visually related. */
.closing-card { background: linear-gradient(145deg, #f8fff9, #fcf2f5 100%); }
.closing-copy, .closing-note { color: #85767a; }
.closing-note strong, .closing-signature { color: #c46494; }
.closing-heart { color: #c75f91; }
.letter-card::-webkit-scrollbar-thumb { background: linear-gradient(#e9a6c1, #e0aebd); }
.letter-card { scrollbar-color: #e4bac7 transparent; }

/* Small ornamental color echoes; the pink flowers remain the main focal point. */
.flower-garden-scene .garden-butterfly.butterfly-two,
.flower-garden-scene .garden-butterfly.butterfly-four { opacity: .96; }
.flower-garden-scene .garden-butterfly.butterfly-two svg,
.flower-garden-scene .garden-butterfly.butterfly-four svg { filter: hue-rotate(178deg) saturate(.78) brightness(1.04); }

@media (max-width: 680px) {
  body { background-attachment: scroll; }
  .topbar { border-bottom-color: rgba(220, 178, 191, .14); }
  .gift-card { box-shadow: 0 9px 22px rgba(187, 130, 147, .09), 0 5px 13px rgba(219, 133, 167, .06); }
}
@media (prefers-reduced-motion: reduce) {
  body { background-attachment: scroll; }
}

/* V26 — one connected pink/blue story, with a gentle page-to-page bloom. */
body {
  background:
    radial-gradient(ellipse at 12% 10%, rgba(244, 190, 211, .26), transparent 34%),
    radial-gradient(ellipse at 88% 12%, rgba(240, 192, 206, .30), transparent 36%),
    radial-gradient(ellipse at 50% 88%, rgba(232, 248, 239, .30), transparent 42%),
    linear-gradient(145deg, #fff8fb 0%, #fffdfd 48%, #fff1f6 100%);
}
body[data-page="1"], body[data-page="3"], body[data-page="6"] {
  background-image:
    radial-gradient(ellipse at 13% 12%, rgba(245, 193, 214, .28), transparent 34%),
    radial-gradient(ellipse at 88% 14%, rgba(240, 190, 205, .34), transparent 36%),
    linear-gradient(145deg, #fff8fb 0%, #fffdfd 54%, #fff1f6 100%);
}
#app { isolation: isolate; }
#app.is-transitioning::before {
  content: "";
  position: fixed;
  z-index: 8;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: 38vmax;
  height: 38vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.84) 0%, rgba(248,218,232,.56) 34%, rgba(242, 201, 213, .34) 62%, transparent 74%);
  transform: translate(-50%, -50%) scale(.18);
  opacity: 0;
  animation: pink-blue-page-wash .50s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes pink-blue-page-wash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  22% { opacity: .76; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.65); }
}
.page.is-active { animation: page-in .58s cubic-bezier(.2,.75,.25,1) both; }
.ambient-heart:nth-child(3n) { color: #ce8b9f; text-shadow: 0 3px 15px rgba(202, 128, 150, .22); }
.ambient-heart:nth-child(4n + 1) { color: #e98daf; }
.sparkle:nth-child(even) { color: #d98ba7; }
.ambient-petal:nth-child(odd) { color: #e68caf; }
.ambient-petal:nth-child(even) { color: #d98ba7; }

/* Last page: a small pink-and-blue garden closes the seven-page journey. */
.closing-card { overflow: hidden; }
.closing-garden { width: min(100%, 330px); height: 112px; margin: -8px auto 4px; }
.closing-garden svg { display: block; width: 100%; height: 100%; overflow: visible; }
.closing-stem { fill: none; stroke: #6eaa75; stroke-width: 3.3; stroke-linecap: round; stroke-dasharray: 150; stroke-dashoffset: 150; animation: closing-grow-stem 1.1s .15s ease-out forwards; }
.closing-bloom { transform-box: fill-box; transform-origin: center; opacity: 0; animation: closing-bloom-open .82s cubic-bezier(.2,.8,.2,1) forwards, closing-flower-sway 4.4s 1.2s ease-in-out infinite; }
.closing-bloom-pink:nth-of-type(2) { animation-delay: .45s, 1.65s; }
.closing-bloom-blue { animation-delay: .72s, 1.9s; }
.closing-fireflies { animation: closing-firefly-glow 3.4s ease-in-out infinite alternate; }
@keyframes closing-grow-stem { to { stroke-dashoffset: 0; } }
@keyframes closing-bloom-open { 0% { opacity: 0; scale: .18; rotate: -24deg; } 68% { opacity: 1; scale: 1.12; rotate: 5deg; } 100% { opacity: 1; scale: 1; rotate: 0; } }
@keyframes closing-flower-sway { 0%,100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes closing-firefly-glow { from { opacity: .28; } to { opacity: 1; } }

/* Digital keepsake preview and one-tap PNG export. */
.keepsake-panel {
  width: min(100%, 340px);
  margin: 23px auto 21px;
  padding: 15px 15px 13px;
  border: 1px solid rgba(222, 181, 193, .50);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,250,252,.94), rgba(252, 241, 244, .94));
  box-shadow: 0 12px 28px rgba(197, 141, 158, .10), 0 7px 17px rgba(221, 144, 174, .07);
}
.keepsake-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 154px;
  padding: 16px 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 13px;
  background:
    radial-gradient(circle at 14% 15%, rgba(246,190,211,.30), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(237, 180, 197, .34), transparent 32%),
    linear-gradient(145deg, #fff9fb, #fffefd 56%, #fcf4f6);
  text-align: center;
}
.keepsake-preview::before, .keepsake-preview::after {
  content: "✿";
  position: absolute;
  color: rgba(214,119,162,.32);
  font-size: 38px;
}
.keepsake-preview::before { left: 10px; top: 7px; }
.keepsake-preview::after { right: 10px; bottom: 5px; color: rgba(199, 127, 149, .36); }
.keepsake-topline { color: #b68795; font-size: 8px; font-weight: 900; letter-spacing: .19em; }
.keepsake-preview strong { margin-top: 6px; color: #625267; font: 600 28px/1.15 var(--display); }
.keepsake-preview strong i { color: #cb90a2; font-style: normal; }
.keepsake-flower-mark { margin-top: 4px; color: #d7769e; font: 25px/1 var(--hand); }
.keepsake-flower-mark b { color: #cd94a5; font-weight: 600; }
.keepsake-preview small { margin-top: 6px; color: #99898e; font-size: 10px; }
.keepsake-copy { margin: 11px 0 10px; color: #a48a92; font-size: 12px; }
.keepsake-download { width: 100%; background: linear-gradient(110deg, #df7ba4, #d098a9); }
.keepsake-download:disabled { opacity: .64; cursor: progress; }
.keepsake-status { margin: 8px 0 0; color: #aa8c95; font-size: 10px; line-height: 1.45; }

@media (max-width: 600px) {
  .closing-garden { width: min(100%, 290px); height: 100px; }
  .keepsake-panel { margin: 18px auto; padding: 12px; }
  .keepsake-preview { min-height: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  #app.is-transitioning::before { animation: none; opacity: 0; }
  .closing-stem { stroke-dashoffset: 0; animation: none; }
  .closing-bloom { opacity: 1; animation: none; }
  .closing-fireflies { opacity: .7; animation: none; }
}

/* V27 — reference elements: script envelope, scrapbook collage, four surprise objects, letter desk, and vintage player. */
:root {
  --ref-blue-deep: #783d4f;
  --ref-blue: #cc879c;
  --ref-blue-pale: #fff0f5;
  --ref-pink: #e783a7;
  --ref-cream: #fffaf4;
  --ref-gold: #c6a977;
}

/* Opening: keep the Cupid interaction, but give the envelope the powder-blue seal treatment from the reference. */
.intro-kicker {
  margin: 0 0 2px;
  color: #c58ca0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.intro-title.reference-script-title {
  margin: 0 0 1px;
  color: #a06a7a;
  font-family: var(--hand);
  font-size: clamp(44px, 6.2vw, 58px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: .95;
  text-shadow: 0 3px 18px rgba(211, 150, 168, .13);
}
.intro-title.reference-script-title span {
  color: #d8739b;
  font-family: var(--hand);
}
.intro-copy { color: #b18f99; }
.envelope-art { filter: drop-shadow(0 11px 17px rgba(171, 94, 117, .20)); }
.envelope-wrap.is-hit { filter: drop-shadow(0 0 18px rgba(209, 115, 143, .42)) drop-shadow(0 0 13px rgba(237, 124, 169, .22)); }
.envelope-seal { transform-origin: 105px 76px; transition: transform .35s ease, opacity .3s ease; }
.envelope-wrap.is-hit .envelope-seal { animation: reference-seal-glint .58s ease both; }
@keyframes reference-seal-glint { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); } 45% { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(255,255,255,.95)); } }
.tiny-note { color: #c58ca0; font-family: var(--hand); font-size: 18px; letter-spacing: .01em; }

/* A small picture / vinyl strip makes the personal letter feel like a decorated paper keepsake. */
.letter-reference-strip {
  width: min(100%, 300px);
  margin: 13px auto 14px;
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: center;
  gap: 8px;
}
.letter-mini-polaroid {
  min-width: 0;
  margin: 0;
  padding: 5px 5px 7px;
  border: 1px solid rgba(213, 197, 170, .65);
  border-radius: 5px;
  background: linear-gradient(145deg, #fff, #fffaf5);
  box-shadow: 0 6px 14px rgba(146, 99, 113, .12);
}
.letter-mini-polaroid-left { transform: rotate(-6deg); }
.letter-mini-polaroid-right { transform: rotate(5deg); }
.letter-mini-polaroid img { display: block; width: 100%; height: 54px; object-fit: contain; background: #faf5f6; }
.letter-mini-polaroid figcaption { padding-top: 4px; color: #b68e9a; font: 600 12px/1 var(--hand); white-space: nowrap; }
.letter-vinyl-player {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #bb7f91;
}
.mini-vinyl-disc, .closing-vinyl-disc {
  position: relative;
  display: block;
  width: 58px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #3a1b24 0 3px, #5f2e3d 3px 4px, #2d141b 4px 7px);
  border: 2px solid #a87685;
  box-shadow: 0 5px 12px rgba(89, 45, 58, .22), inset 0 0 0 3px rgba(255,255,255,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
.mini-vinyl-disc::before, .closing-vinyl-disc::before {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: linear-gradient(145deg, #f6bfd2, #d86d9b 72%);
  border: 2px solid #f9e8ef;
}
.mini-vinyl-disc i, .closing-vinyl-disc span {
  position: absolute;
  width: 5px;
  height: 5px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
}
.letter-vinyl-player[aria-pressed="true"] .mini-vinyl-disc,
body.music-is-playing .closing-vinyl-disc { animation: reference-vinyl-spin 2.8s linear infinite; }
@keyframes reference-vinyl-spin { to { rotate: 360deg; } }
.mini-vinyl-copy { display: flex; flex-direction: column; gap: 1px; text-align: center; }
.mini-vinyl-copy b { color: #9a6e7b; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.mini-vinyl-copy small { color: #a28f99; font-size: 7px; white-space: nowrap; }
.mini-vinyl-copy em { color: #d26c94; font: 900 8px/1 var(--body); letter-spacing: .09em; font-style: normal; }
.letter-card .letter-body {
  padding: 18px 17px 7px;
  border: 1px solid rgba(218, 202, 185, .58);
  border-radius: 5px 13px 8px 5px;
  background: linear-gradient(145deg, #fffdf8, #fff9f5 58%, #fefafb);
  box-shadow: 0 8px 18px rgba(154, 116, 127, .07);
  transform: rotate(-.25deg);
}
.letter-card .secret-message {
  padding: 16px 17px 15px;
  border: 1px solid rgba(218, 202, 185, .58);
  border-radius: 7px 4px 9px 6px;
  background: linear-gradient(145deg, #fffdf8, #fff7f5 60%, #fdf9fa);
  box-shadow: 0 8px 18px rgba(154, 116, 127, .07);
  transform: rotate(.2deg);
}

/* Celebration collage: central little note with real Polaroids around it. */
.celebration-scrapbook {
  position: relative;
  width: min(100%, 300px);
  height: 196px;
  margin: 13px auto 17px;
  isolation: isolate;
}
.celebration-scrapbook::before {
  content: "";
  position: absolute;
  inset: 18px 14px 5px;
  border-radius: 32px;
  background: radial-gradient(ellipse, rgba(231, 178, 194, .20), rgba(244, 190, 211, .13) 56%, transparent 76%);
  z-index: -1;
}
.celebration-polaroid {
  position: absolute;
  width: 91px;
  margin: 0;
  padding: 5px 5px 7px;
  border: 1px solid rgba(224, 210, 190, .75);
  border-radius: 5px;
  background: linear-gradient(145deg, #fff, #fffaf5);
  box-shadow: 0 8px 17px rgba(140, 86, 102, .16);
}
.celebration-polaroid img { display: block; width: 100%; height: 82px; object-fit: contain; background: #f9f1f3; }
.celebration-polaroid figcaption { padding-top: 4px; color: #b18894; font: 600 12px/1 var(--hand); }
.celebration-polaroid-left { left: 1px; top: 28px; transform: rotate(-10deg); z-index: 1; }
.celebration-polaroid-right { right: 1px; top: 25px; transform: rotate(9deg); z-index: 1; }
.celebration-polaroid-bottom { width: 78px; left: 14px; bottom: -1px; z-index: 3; transform: rotate(-5deg); }
.celebration-polaroid-bottom img { height: 60px; }
.celebration-polaroid-bottom figcaption { font-size: 10px; }
.celebration-memory-card {
  position: absolute;
  z-index: 2;
  top: 49px;
  left: 50%;
  width: 178px;
  min-height: 104px;
  padding: 13px 12px 10px;
  transform: translateX(-50%) rotate(-1.3deg);
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 10px;
  background: linear-gradient(145deg, #fff8fb, #fff0f5 51%, #fff6fa);
  box-shadow: 0 10px 23px rgba(166, 95, 116, .17);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.celebration-memory-card > span { color: #b77e8f; font: 900 7px/1 var(--body); letter-spacing: .19em; }
.celebration-memory-card strong { margin-top: 8px; color: #7e626a; font: 600 22px/1.1 var(--display); }
.celebration-memory-card strong i { color: #d9789d; font-style: normal; }
.celebration-memory-card small { margin-top: 5px; color: #a58e95; font-size: 8px; }
.celebration-memory-card b { margin-top: 2px; color: #de82a8; font-size: 16px; }
.scrapbook-heart { position: absolute; z-index: 4; color: #ca7790; filter: drop-shadow(0 4px 8px rgba(202, 119, 144, .25)); }
.scrapbook-heart-one { top: 2px; left: 39%; font-size: 29px; transform: rotate(-15deg); }
.scrapbook-heart-two { right: 17%; bottom: 8px; color: #dc7ea4; font-size: 23px; transform: rotate(12deg); }

/* Four reference objects: Journey / Moment / Playlist / Gift. */
.love-cloud { width: min(100%, 340px); margin: 0 auto 5px; }
.choose-surprise-heading { width: min(100%, 760px); margin: 1px auto 11px; text-align: center; }
.choose-surprise-rule { display: block; width: 54px; height: 2px; margin: 0 auto 2px; border-radius: 20px; background: linear-gradient(90deg, #e995b5, #da96aa); }
.choose-surprise-heading h3 { margin: 0; color: #7d626a; font: 700 clamp(30px, 4vw, 39px)/1 var(--hand); }
.choose-surprise-heading h3 em { color: #d7779f; font-style: normal; }
.choose-surprise-heading p { margin: 4px 0 0; color: #a48f95; font-size: 11px; }
.surprise-object-grid {
  width: min(100%, 780px);
  margin: 0 auto 13px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}
.surprise-object {
  min-width: 0;
  min-height: 142px;
  padding: 10px 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 17px;
  background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(253, 246, 248, .86) 55%, rgba(255,244,249,.88));
  box-shadow: 0 9px 21px rgba(178, 123, 140, .09), 0 4px 12px rgba(222, 145, 177, .07);
  color: #705a61;
  cursor: pointer;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.surprise-object:nth-child(2) { background: linear-gradient(150deg, #fffdf7, #fff1f6 60%, #fffafd); }
.surprise-object:nth-child(3) { background: linear-gradient(150deg, #fefafb, #fff0f5 65%, #fff7fb); }
.surprise-object:nth-child(4) { background: linear-gradient(150deg, #fffafd, #fcf0f4 58%, #fff0f5); }
.surprise-object:hover, .surprise-object:focus-visible { transform: translateY(-5px); border-color: #d9a1b2; box-shadow: 0 15px 28px rgba(190, 113, 136, .16), 0 7px 17px rgba(221, 129, 169, .10); }
.surprise-object.is-selected { border-color: #cf8da1; background: linear-gradient(145deg, #fff, #fff0f5 65%, #fff2f8); box-shadow: 0 0 0 2px rgba(210, 140, 161, .16), 0 13px 27px rgba(187, 120, 140, .15); transform: translateY(-3px); }
.surprise-object-art { width: min(100%, 130px); height: 83px; display: grid; place-items: center; position: relative; }
.surprise-object-art::before { content: ""; position: absolute; width: 75px; height: 55px; border-radius: 50%; background: radial-gradient(ellipse, rgba(217, 151, 171, .22), rgba(236,188,211,.09) 62%, transparent 76%); filter: blur(4px); }
.surprise-object-art svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 5px rgba(139, 86, 102, .11)); transition: transform .3s ease; }
.surprise-object:nth-child(odd) .surprise-object-art svg { animation: reference-object-float 4.6s ease-in-out infinite; }
.surprise-object:nth-child(even) .surprise-object-art svg { animation: reference-object-float 4.6s -2.3s ease-in-out infinite; }
.surprise-object:hover .surprise-object-art svg, .surprise-object.is-selected .surprise-object-art svg { transform: translateY(-3px) scale(1.04); }
@keyframes reference-object-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.surprise-object strong { margin-top: 3px; color: #755e65; font: 600 23px/1 var(--hand); }
.surprise-object small { margin-top: 4px; color: #a69399; font-size: 9px; line-height: 1.3; }
.surprise-panel-empty {
  width: min(100%, 550px);
  min-height: 47px;
  margin: 0 auto 13px;
  padding: 13px 16px;
  border: 1px dashed rgba(205, 147, 165, .52);
  border-radius: 13px;
  background: linear-gradient(110deg, rgba(255,255,255,.58), rgba(252, 242, 245, .7));
  color: #a19095;
  font: 600 17px/1.2 var(--hand);
  text-align: center;
}
.surprise-detail-panel {
  width: min(100%, 790px);
  margin: 0 auto 15px;
  padding: 17px 19px 16px;
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,253,251,.97), rgba(252, 242, 245, .94) 58%, rgba(255,244,248,.96));
  box-shadow: 0 14px 32px rgba(179, 123, 140, .12), 0 5px 16px rgba(217, 138, 174, .07);
  animation: reference-panel-arrive .42s cubic-bezier(.2,.8,.25,1) both;
}
.surprise-detail-panel[hidden] { display: none !important; }
@keyframes reference-panel-arrive { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.panel-heading-row { display: flex; justify-content: space-between; align-items: center; }
.panel-object-label { color: #b88f9c; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.panel-heart { color: #d77aa2; font-size: 19px; }
.surprise-detail-panel h3 { margin: 3px 0 5px; color: #7b5e67; font: 700 27px/1.1 var(--hand); }
.surprise-detail-panel > p { max-width: 530px; margin: 0 auto 12px; color: #98878c; font-size: 11px; line-height: 1.55; }
.journey-mini-collage { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px auto 12px; }
.journey-mini-collage img { width: 82px; height: 88px; padding: 4px 4px 8px; border: 1px solid #e5d9c7; border-radius: 4px; background: #fff; box-shadow: 0 5px 13px rgba(147, 97, 112, .12); object-fit: contain; }
.journey-mini-collage img:nth-child(1) { transform: rotate(-7deg); }
.journey-mini-collage img:nth-child(2) { transform: translateY(-6px) rotate(2deg); }
.journey-mini-collage img:nth-child(3) { transform: rotate(7deg); }
.panel-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 36px;
  padding: 8px 17px;
  border: 1px solid rgba(200, 141, 159, .45);
  border-radius: 999px;
  background: linear-gradient(105deg, #fce9f0, #faecf0);
  color: #a37381;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.panel-action:hover { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(188, 128, 146, .14); }
.moment-timeline { width: min(100%, 520px); margin: 15px auto 10px; display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 8px; }
.moment-stop { min-height: 84px; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border: 1px solid rgba(227, 195, 204, .78); border-radius: 12px; background: linear-gradient(145deg, #fff, #fff0f5); text-align: center; }
.moment-stop:last-child { background: linear-gradient(145deg, #fff, #fff0f6); border-color: rgba(231,183,204,.78); }
.moment-stop time { color: #c08d9c; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.moment-stop strong { margin-top: 5px; color: #7b636a; font: 700 20px/1.05 var(--hand); }
.moment-stop small { margin-top: 4px; color: #a095a4; font-size: 9px; }
.moment-line { height: 2px; background: linear-gradient(90deg, #e6a9bd, #e4a6c0); position: relative; }
.moment-line::after { content: "♡"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); padding: 2px 4px; background: #fbf7f8; color: #d4779e; font-size: 15px; }
.moment-note { font: 600 18px/1.2 var(--hand) !important; color: #9a8097 !important; }
.playlist-inline-layout { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 6px 0 2px; }
.playlist-vinyl-disc { position: relative; width: 112px; flex: 0 0 112px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #3e1e27 0 3px, #683947 3px 4px, #2a131a 4px 7px); border: 4px solid #a26779; box-shadow: 0 10px 22px rgba(91, 49, 61, .22), inset 0 0 0 5px rgba(255,255,255,.05); }
.playlist-vinyl-disc::before { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: linear-gradient(145deg,#f4c5d7,#d96f9c); border: 3px solid #fff1f7; }
.playlist-vinyl-disc::after { content: "♡"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 16px; }
body.music-is-playing .playlist-vinyl-disc { animation: reference-vinyl-spin 3.5s linear infinite; }
.playlist-track-copy { max-width: 280px; text-align: left; }
.playlist-track-copy h3 { font-size: 25px; }
.playlist-track-copy p { margin: 0 0 10px; color: #98898d; font-size: 10px; }
.playlist-track-copy .panel-action { min-width: 143px; }
.gift-panel .panel-heading-row { margin-bottom: 2px; }
.gift-panel h3 { margin-bottom: 12px; }
.gift-panel .gift-grid { width: min(100%, 690px); }
.gift-panel #giftsNext { margin-top: 2px; }

/* A reference-style photo mosaic: asymmetric layout with blue / pink photo frames. */
.memory-grid.memory-collage {
  width: min(100%, 900px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 112px;
  gap: 16px;
  align-items: stretch;
  padding: 12px 13px 16px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 24px;
  background: radial-gradient(ellipse at 10% 15%, rgba(244,190,211,.18), transparent 35%), radial-gradient(ellipse at 90% 75%, rgba(228, 172, 189, .22), transparent 38%), rgba(255,255,255,.34);
  box-shadow: 0 12px 29px rgba(179, 128, 143, .08);
}
.memory-collage .memory-item { min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 8px 11px; border: 1px solid rgba(216,204,188,.78); border-radius: 6px; background: linear-gradient(145deg, #fff, #fffaf4); box-shadow: 0 10px 22px rgba(146, 100, 114, .12); }
.memory-collage .memory-item:nth-child(1) { grid-column: 1 / span 4; grid-row: 1 / span 2; transform: rotate(-2.1deg); }
.memory-collage .memory-item:nth-child(2) { grid-column: 5 / span 4; grid-row: 1 / span 2; transform: rotate(1.7deg); }
.memory-collage .memory-item:nth-child(3) { grid-column: 9 / span 4; grid-row: 1 / span 2; transform: rotate(-1.1deg); }
.memory-collage .memory-item:nth-child(4) { grid-column: 1 / span 4; grid-row: 3 / span 2; transform: rotate(1.3deg); }
.memory-collage .memory-item:nth-child(5) { grid-column: 5 / span 4; grid-row: 3 / span 2; transform: rotate(-1.4deg); }
.memory-collage .memory-item:nth-child(6) { grid-column: 9 / span 4; grid-row: 3 / span 2; transform: rotate(1.2deg); }
.memory-collage .memory-item:nth-child(7) { grid-column: 1 / span 4; grid-row: 5 / span 2; transform: rotate(-1.2deg); }
.memory-collage .memory-item:nth-child(8) { grid-column: 5 / span 4; grid-row: 5 / span 2; transform: rotate(1.6deg); }
.memory-collage .memory-item:nth-child(9) { grid-column: 9 / span 4; grid-row: 5 / span 2; transform: rotate(-1.4deg); }
.memory-collage .memory-image { flex: 1 1 auto; min-height: 0; height: auto; background: linear-gradient(145deg,#fbf3f5,#fff2f7); }
.memory-collage .memory-image img { width: 100%; height: 100%; object-fit: contain; }
.memory-collage .memory-caption { color: #a87685; font-size: 18px; }
.memory-collage .memory-item:nth-child(even) .memory-caption { color: #c16e91; }
.memory-collage .memory-date-location { color: #a79a9e; font-size: 9px; line-height: 1.35; }
.memory-gallery-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.memory-back-button { min-height: 40px; padding: 8px 16px; border: 1px solid #e3bcc8; border-radius: 999px; background: linear-gradient(110deg,#fff,#fff0f5); color: #b27d8d; font-size: 11px; font-weight: 900; cursor: pointer; }

/* Ending stage: a small vintage player, gold-like picture frames, and glowing musical staff. */
.closing-reference-stage {
  width: min(100%, 510px);
  margin: 18px auto 21px;
  padding: 15px 15px 8px;
  border: 1px solid rgba(255,255,255,.97);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,251,248,.9), rgba(252, 240, 244, .92) 58%, rgba(255,242,248,.91));
  box-shadow: 0 12px 27px rgba(182, 127, 144, .10);
  overflow: hidden;
}
.closing-audio-console { display: flex; align-items: center; justify-content: center; gap: 17px; padding: 3px 0 10px; }
.closing-vinyl-disc { width: 82px; flex: 0 0 82px; border-width: 3px; }
.closing-audio-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.closing-audio-copy > span { color: #b68996; font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.closing-audio-copy strong { color: #7b636a; font: 700 22px/1 var(--hand); }
.closing-audio-copy small { color: #a5979b; font-size: 8px; }
.closing-music-button { margin-top: 5px; border: 1px solid rgba(201, 141, 159, .48); border-radius: 99px; padding: 6px 13px; background: linear-gradient(100deg,#f9e7ef,#fbecf1); color: #ae7b8a; font-size: 9px; font-weight: 900; cursor: pointer; }
.closing-frame-gallery { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 3px auto 5px; }
.closing-photo-frame { width: 85px; margin: 0; padding: 5px 5px 8px; border: 3px solid #d5bd91; border-radius: 3px; background: linear-gradient(145deg,#fffdf6,#f1e4ca); box-shadow: 0 6px 13px rgba(93,84,71,.18), inset 0 0 0 1px rgba(255,255,255,.85); }
.closing-photo-frame img { display: block; width: 100%; height: 70px; object-fit: contain; background: #f9f4f5; }
.closing-photo-frame figcaption { padding-top: 4px; color: #8a7a82; font: 600 12px/1 var(--hand); white-space: nowrap; }
.closing-frame-one { transform: rotate(-5deg) translateY(3px); }
.closing-frame-two { transform: rotate(2deg) translateY(-4px); }
.closing-frame-three { transform: rotate(6deg) translateY(4px); }
.closing-music-staff { display: block; width: 100%; height: 62px; margin: 1px auto -3px; overflow: visible; }
.closing-music-staff text { animation: reference-note-float 3.5s ease-in-out infinite; }
.closing-music-staff text:nth-child(2) { animation-delay: -1.2s; }
.closing-music-staff text:nth-child(3) { animation-delay: -2.3s; }
@keyframes reference-note-float { 0%,100% { transform: translateY(0); opacity: .68; } 50% { transform: translateY(-5px); opacity: 1; } }

/* Small screens: retain all reference objects without squeezing or horizontal overflow. */
@media (max-width: 680px) {
  .intro-title.reference-script-title { font-size: 45px; }
  .letter-reference-strip { width: min(100%, 280px); gap: 6px; }
  .letter-mini-polaroid img { height: 49px; }
  .letter-vinyl-player .mini-vinyl-disc { width: 51px; }
  .celebration-scrapbook { width: min(100%, 286px); height: 187px; }
  .celebration-polaroid { width: 82px; }
  .celebration-polaroid img { height: 74px; }
  .celebration-polaroid-bottom { width: 73px; }
  .surprise-object-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .surprise-object { min-height: 128px; }
  .surprise-object-art { height: 75px; }
  .surprise-object strong { font-size: 22px; }
  .surprise-detail-panel { padding: 14px 12px 13px; }
  .moment-timeline { grid-template-columns: 1fr; gap: 7px; max-width: 290px; }
  .moment-line { width: 2px; height: 14px; margin: 0 auto; background: linear-gradient(#e6a9bd,#e4a6c0); }
  .moment-line::after { left: 50%; top: 50%; }
  .playlist-inline-layout { gap: 12px; }
  .playlist-vinyl-disc { width: 86px; flex-basis: 86px; }
  .playlist-track-copy h3 { font-size: 22px; }
  .memory-grid.memory-collage { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 208px; gap: 10px; padding: 8px; }
  .memory-collage .memory-item:nth-child(1) { grid-column: 1 / span 2; grid-row: auto; }
  .memory-collage .memory-item:nth-child(2), .memory-collage .memory-item:nth-child(4), .memory-collage .memory-item:nth-child(6), .memory-collage .memory-item:nth-child(8) { grid-column: 1; grid-row: auto; }
  .memory-collage .memory-item:nth-child(3), .memory-collage .memory-item:nth-child(5), .memory-collage .memory-item:nth-child(7), .memory-collage .memory-item:nth-child(9) { grid-column: 2; grid-row: auto; }
  .memory-collage .memory-item:nth-child(1) .memory-image { height: 148px; }
  .memory-collage .memory-image { min-height: 0; height: 127px; }
  .closing-reference-stage { padding: 12px 9px 7px; }
  .closing-frame-gallery { gap: 7px; }
  .closing-photo-frame { width: 77px; padding: 4px 4px 7px; border-width: 2px; }
  .closing-photo-frame img { height: 62px; }
  .closing-photo-frame figcaption { font-size: 11px; }
  .closing-music-staff { height: 52px; }
}
@media (max-width: 380px) {
  .intro-title.reference-script-title { font-size: 41px; }
  .letter-reference-strip { width: 100%; gap: 5px; }
  .letter-mini-polaroid img { height: 44px; }
  .letter-mini-polaroid figcaption { font-size: 10px; }
  .mini-vinyl-disc { width: 45px; }
  .surprise-object { min-height: 119px; padding-inline: 5px; }
  .surprise-object-art { height: 68px; }
  .surprise-object-art svg { max-width: 112px; }
  .surprise-object strong { font-size: 20px; }
  .surprise-object small { font-size: 8px; }
  .journey-mini-collage { gap: 6px; }
  .journey-mini-collage img { width: 73px; height: 80px; }
  .closing-photo-frame { width: 72px; }
  .closing-photo-frame img { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-object-art svg, .closing-music-staff text, .letter-vinyl-player[aria-pressed="true"] .mini-vinyl-disc,
  body.music-is-playing .closing-vinyl-disc, .closing-bloom { animation: none !important; }
  .surprise-object:hover, .surprise-object.is-selected { transform: none; }
}


/* V27 gift keepsakes and reference-style retro radio finish. */
.gift-polaroid-stack{position:relative;display:block;width:78px;height:76px;}
.gift-polaroid-stack i{position:absolute;top:8px;left:12px;display:block;width:38px;height:55px;padding:3px 3px 9px;background:#fff;border:1px solid rgba(192, 132, 150, .28);border-radius:3px;box-shadow:0 4px 10px rgba(147, 90, 107, .14);}
.gift-polaroid-stack i:first-child{z-index:1;transform:rotate(-13deg) translate(-4px,3px);}
.gift-polaroid-stack i:last-child{z-index:2;transform:rotate(11deg) translate(13px,-3px);}
.gift-polaroid-stack img{display:block;width:100%;height:100%;object-fit:contain;background:#f7f4f7;}
.gift-envelope-mini{position:relative;display:block;width:68px;height:48px;border:1.5px solid #d095a7;border-radius:5px;background:linear-gradient(145deg,#fefafb,#f2d2dc);box-shadow:0 5px 11px rgba(181, 113, 133, .14);overflow:visible;}
.gift-envelope-mini::before{content:"";position:absolute;inset:0 0 auto;height:27px;background:linear-gradient(145deg,#f8dce8,#e9b9d0);clip-path:polygon(0 0,100% 0,50% 100%);border-radius:4px 4px 0 0;}
.gift-envelope-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49%,rgba(186, 113, 135, .8) 50%,transparent 52%),linear-gradient(-35deg,transparent 49%,rgba(186, 113, 135, .8) 50%,transparent 52%);border-radius:4px;pointer-events:none;}
.gift-envelope-mini i{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:24px;height:24px;transform:translate(-50%,-30%);border-radius:50%;background:#e56f9a;color:#fff;font-size:14px;font-style:normal;box-shadow:0 2px 7px rgba(174,86,127,.25);}
.teddy-mini-svg{display:inline-block;filter:drop-shadow(0 3px 3px rgba(135,95,87,.14));animation:teddy-card-breathe 3.4s ease-in-out infinite;}
@keyframes teddy-card-breathe{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.closing-retro-radio{width:min(100%,330px);margin:4px auto 0;display:grid;justify-items:center;gap:4px;filter:drop-shadow(0 9px 16px rgba(170, 102, 123, .12));}
.closing-retro-radio svg{display:block;width:100%;height:auto;overflow:visible;}
.closing-retro-radio span{font:800 9px/1 var(--body,"Nunito",sans-serif);letter-spacing:2px;color:#be8395;}
@media(prefers-reduced-motion:reduce){.teddy-mini-svg{animation:none!important}}
.reduce-motion .teddy-mini-svg{animation:none!important}

/* V28 — mobile polish: notch/safe-area, text sizing, tap behaviour */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
button, [role="button"], a { touch-action: manipulation; }
@media (max-width: 480px) {
  #app { padding-left: max(15px, env(safe-area-inset-left, 0px)); padding-right: max(15px, env(safe-area-inset-right, 0px)); }
}

/* V32 — gift page now launches surprise.html */
.surprise-launch { text-align: center; margin: 30px 0 18px; }
.surprise-launch p { margin: 14px 0 0; font: 600 14px Nunito, sans-serif; color: #9d8189; }
.surprise-launch ~ * { display: none !important; }


/* ================================================================
   SHINTAAA V34 — layout polish, rose page transitions, and soundtrack
   ================================================================ */
:root {
  --ref-blue-deep: #8c526b;
  --ref-blue: #d88aa7;
  --ref-blue-pale: #fff0f5;
  --v34-rose: #c96f91;
  --v34-rose-deep: #a94f73;
  --v34-blush: #fff1f5;
  --v34-paper: #fffaf7;
  --v34-line: rgba(215, 157, 176, .30);
  --v34-shadow: 0 16px 38px rgba(170, 94, 123, .12);
}

/* A compact, readable music identity in the header. */
.topbar { gap: 12px; }
.top-actions { gap: 7px; flex-shrink: 0; }
.header-track-toggle {
  min-width: 154px;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 6px;
  border: 1px solid rgba(220, 157, 178, .48);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,239,245,.96));
  color: #8f526b;
  box-shadow: 0 5px 16px rgba(194, 111, 143, .10);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.header-track-toggle:hover { transform: translateY(-2px); border-color: rgba(202, 112, 146, .62); box-shadow: 0 9px 22px rgba(194, 111, 143, .16); }
.header-track-toggle:active { transform: translateY(0) scale(.98); }
.header-track-toggle[aria-pressed="true"] { border-color: rgba(196, 93, 132, .64); background: linear-gradient(135deg, #fff7fa, #ffe4ed); }
.header-track-vinyl {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  width: 31px;
  aspect-ratio: 1;
  border: 2px solid #d68ba6;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #63384c 0 2px, #8d5269 2px 3px, #42283a 3px 5px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.13), 0 3px 8px rgba(113, 59, 81, .18);
}
.header-track-vinyl::before { content: ""; width: 10px; aspect-ratio: 1; border: 2px solid #fff1f5; border-radius: 50%; background: #db8aa8; }
.header-track-vinyl i { position: absolute; width: 3px; aspect-ratio: 1; border-radius: 50%; background: white; }
.header-track-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.12; }
.header-track-copy strong { color: #754359; font-size: 10px; font-weight: 900; }
.header-track-copy small { margin-top: 3px; color: #aa8192; font-size: 9px; }
.header-track-state { display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border: 1px solid rgba(205, 132, 158, .42); border-radius: 50%; color: #b65d80; font-size: 9px; }
.header-track-toggle[aria-pressed="true"] .header-track-vinyl { animation: v34-vinyl-spin 3s linear infinite; }
@keyframes v34-vinyl-spin { to { transform: rotate(360deg); } }

/* The player is in normal document flow, so it never covers the letter or photos. */
.global-soundtrack {
  width: min(calc(100% - 48px), 650px);
  margin: 0 auto 10px;
  padding: 14px 16px 11px;
  border: 1px solid rgba(226, 178, 194, .58);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(255,239,245,.97));
  box-shadow: 0 12px 32px rgba(182, 111, 140, .13);
  animation: v34-panel-arrive .34s cubic-bezier(.2,.75,.25,1) both;
}
.global-soundtrack[hidden] { display: none; }
@keyframes v34-panel-arrive { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.global-soundtrack-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.global-soundtrack-kicker { margin: 0 0 2px; color: #c17894; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.global-soundtrack-heading h2 { margin: 0; color: #674354; font: 700 17px/1.2 var(--display); }
.global-soundtrack-heading h2 span { color: #a17d8b; font: 700 10px/1.2 var(--body); }
.soundtrack-close, .music-memory-close {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(211, 146, 168, .38);
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  color: #a75c78;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.soundtrack-close:hover, .music-memory-close:hover { transform: rotate(8deg) scale(1.06); background: #ffeaf1; }
.soundtrack-close[hidden] { display: none; }
.global-soundtrack-content { display: grid; grid-template-columns: minmax(200px, 420px); justify-content: center; gap: 16px; align-items: center; }
.global-soundtrack.is-playing .global-soundtrack-content { grid-template-columns: minmax(200px, 420px) minmax(130px, 180px); }
.youtube-player-shell { position: relative; width: 100%; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(214, 158, 178, .45); border-radius: 13px; background: #241b21; box-shadow: 0 7px 18px rgba(93, 51, 68, .14); }
#youtubePlayer, #youtubePlayer iframe { display: block; width: 100% !important; min-width: 280px; height: 152px !important; border: 0; border-radius: 12px; }
.music-memory-card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 8px 8px 10px;
  border: 1px solid rgba(225, 197, 180, .75);
  border-radius: 6px;
  background: linear-gradient(145deg, #fff, #fffaf6);
  box-shadow: 0 7px 18px rgba(167, 103, 127, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) rotate(2deg) scale(.97);
  transition: opacity .38s ease, transform .46s cubic-bezier(.2,.75,.25,1), visibility .38s ease;
  pointer-events: none;
}
.music-memory-card.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-2deg) scale(1);
  pointer-events: auto;
}
.music-memory-card img { display: block; width: 100%; height: 154px; object-fit: contain; object-position: center; border-radius: 2px; background: #fff9f6; }
.music-memory-card figcaption { display: flex; flex-direction: column; gap: 3px; padding: 7px 3px 0; text-align: center; }
.music-memory-card figcaption strong { color: #a55375; font: 700 18px/1.05 var(--hand); }
.music-memory-card figcaption span { color: #8f7780; font: 500 10px/1.4 var(--body); }
.music-memory-close { position: absolute; z-index: 2; top: 3px; right: 3px; width: 23px; height: 23px; background: rgba(255,255,255,.94); }
.soundtrack-status { margin: 8px 2px 0; color: #9a7f89; font-size: 10px; line-height: 1.45; }
.soundtrack-status.is-error { color: #b34f6d; }
.soundtrack-youtube-link { display: inline-block; margin: 2px 2px 0; color: #ba6886; font-size: 10px; font-weight: 800; text-decoration: none; }
.soundtrack-youtube-link:hover { text-decoration: underline; }

/* Warm photo-paper treatment: the image itself remains byte-for-byte untouched. */
.letter-reference-strip { width: min(100%, 312px); gap: 9px; margin-block: 15px 17px; }
.letter-mini-polaroid {
  padding: 6px 6px 8px;
  border-color: rgba(224, 195, 178, .82);
  background: linear-gradient(145deg, #fff, #fffaf5);
  box-shadow: 0 7px 16px rgba(170, 111, 128, .13);
  transition: transform .32s ease, box-shadow .32s ease;
}
.letter-mini-polaroid:hover { box-shadow: 0 11px 22px rgba(170, 111, 128, .18); }
.letter-mini-polaroid-left { transform: rotate(-5deg); }
.letter-mini-polaroid-right { transform: rotate(4deg); }
.letter-mini-polaroid img {
  display: block;
  width: 100%;
  height: 58px;
  object-fit: contain;
  object-position: center;
  background: #fff9f6;
  border-radius: 2px;
}
.letter-mini-polaroid figcaption { color: #bd7892; }
.letter-vinyl-player { color: #a85f7a; }
.mini-vinyl-disc, .closing-vinyl-disc {
  background: repeating-radial-gradient(circle, #563344 0 3px, #78445a 3px 4px, #422839 4px 7px);
  border-color: #bf7994;
  box-shadow: 0 5px 12px rgba(111, 57, 80, .18), inset 0 0 0 3px rgba(255,255,255,.08);
}
.mini-vinyl-copy b { color: #9a5b74; }
.mini-vinyl-copy em { color: #c36c8d; }

/* A deliberate cross-fade: the outgoing page briefly remains visible while the new page arrives. */
#app { position: relative; isolation: isolate; }
.page.is-active { position: relative; z-index: 1; animation: v34-page-enter .48s cubic-bezier(.2,.75,.25,1) both; }
.page.is-entering { will-change: opacity, transform, filter; }
.page.is-leaving {
  display: grid !important;
  position: absolute !important;
  z-index: 2;
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
  animation: v34-page-exit .34s cubic-bezier(.4,0,.7,.35) both;
}
@keyframes v34-page-enter {
  0% { opacity: 0; transform: translateY(15px) scale(.988); filter: blur(2px); }
  68% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes v34-page-exit {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(-7px) scale(.994); filter: blur(1.5px); }
}
#app.is-transitioning::before {
  background: radial-gradient(circle, rgba(255,255,255,.78) 0%, rgba(255,222,234,.54) 38%, rgba(255,240,245,.12) 68%, transparent 76%);
  animation: v34-rose-page-wash .46s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes v34-rose-page-wash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  24% { opacity: .62; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}

/* Smoother spacing and hover states across the main cards and controls. */
.mint-card, .wide-content, .closing-card { box-shadow: 0 18px 48px rgba(177, 111, 137, .11), 0 3px 12px rgba(183, 132, 147, .06); }
.pill-button, .panel-action, .surprise-object, .gift-card, .memory-item, .sound-toggle { transition-duration: .24s; }
.pill-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(207, 104, 143, .22); }
.memory-item { border-color: rgba(225, 173, 192, .58); box-shadow: 0 9px 22px rgba(179, 112, 140, .09); }
.memory-item:nth-child(even) { border-color: rgba(225, 173, 192, .58); }
.memory-item:hover { box-shadow: 0 16px 30px rgba(179, 112, 140, .16); }
.lightbox { border-color: rgba(229, 187, 203, .68); background: linear-gradient(145deg, rgba(255,250,252,.99), rgba(255,240,246,.98)); }
.lightbox-arrow { background: linear-gradient(145deg, #ffeaf2, #f9d9e5); color: #b75c7d; }
.lightbox-dots button { background: #edc5d1; }
.lightbox-dots button[aria-current="true"] { background: #d96e9c; }
.keepsake-panel { border-color: rgba(225, 181, 197, .62); background: linear-gradient(145deg, rgba(255,250,252,.96), rgba(255,239,245,.96)); box-shadow: 0 12px 28px rgba(179, 112, 140, .10); }
.keepsake-preview { background: radial-gradient(circle at 14% 15%, rgba(246,190,211,.30), transparent 28%), radial-gradient(circle at 88% 82%, rgba(239,190,209,.22), transparent 32%), linear-gradient(145deg, #fff9fb, #fffefd 56%, #fff1f5); }
.keepsake-topline, .keepsake-copy, .keepsake-status { color: #a47d8b; }
.keepsake-preview strong i, .keepsake-flower-mark b { color: #bf7895; }
.keepsake-download { background: linear-gradient(110deg, #df7ba4, #c985a2); }
.closing-card { background: linear-gradient(145deg, #fffafc, #fff0f5 100%); }

@media (max-width: 680px) {
  .topbar { gap: 7px; }
  .top-actions { gap: 4px; }
  .header-track-toggle { min-width: 108px; min-height: 38px; gap: 6px; padding: 4px 6px; }
  .header-track-vinyl { flex-basis: 27px; width: 27px; }
  .header-track-copy strong { font-size: 9px; }
  .header-track-copy small { font-size: 8px; }
  .header-track-state { width: 19px; height: 19px; }
  .global-soundtrack { width: calc(100% - 28px); padding: 12px; margin-bottom: 7px; }
  .global-soundtrack-content, .global-soundtrack.is-playing .global-soundtrack-content { grid-template-columns: minmax(200px, 1fr); gap: 12px; }
  .youtube-player-shell { width: min(100%, 420px); margin-inline: auto; }
  #youtubePlayer { min-width: 0; }
  .music-memory-card { width: min(176px, 70%); margin: 0 auto; }
  .music-memory-card img { height: 142px; }
  .letter-reference-strip { width: min(100%, 310px); gap: 7px; }
  .letter-mini-polaroid img { height: 52px; }
  .page.is-leaving { min-height: 100%; }
}
@media (max-width: 390px) {
  .wordmark { font-size: 12px; }
  .header-track-toggle { min-width: 97px; }
  .header-track-copy small { display: none; }
  .top-actions { gap: 3px; }
  .sound-toggle { width: 30px; height: 30px; }
  .letter-reference-strip { gap: 5px; }
  .letter-mini-polaroid { padding: 5px 4px 7px; }
  .letter-mini-polaroid img { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .page.is-active, .page.is-leaving, .global-soundtrack, .music-memory-card { animation: none !important; transition: none !important; }
  .page.is-leaving { display: none !important; }
  .header-track-toggle[aria-pressed="true"] .header-track-vinyl { animation: none !important; }
}


/* V37: keep one parent soundtrack player alive while the extra story documents are open. */
.external-page-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff8fa;
}
.external-page-dialog::backdrop { background: rgba(58, 35, 48, .58); backdrop-filter: blur(4px); }
.external-page-dialog[open] { display: block; }
.external-page-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff8fa; }
.external-page-close {
  position: absolute; z-index: 12; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(211, 146, 168, .55); border-radius: 50%;
  background: rgba(255, 250, 252, .94); color: #a75c78;
  box-shadow: 0 5px 16px rgba(92, 44, 64, .18); font: 500 25px/1 var(--body); cursor: pointer;
}
.external-page-close:hover { background: #ffeaf1; transform: rotate(8deg); }
.external-music-memory-card {
  position: absolute; z-index: 10; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  width: min(164px, 39vw); margin: 0;
}
@media (max-width: 680px) {
  .external-page-close { width: 34px; height: 34px; font-size: 22px; }
  .external-music-memory-card { width: min(148px, 42vw); }
  .external-music-memory-card img { height: 126px; }
}


/* V40 — The Enchanted Memory Garden: layered watercolor, glasshouse depth, and paper grain. */
body {
  isolation: isolate;
  background: #fff9f6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    url("assets/garden/enchanted-memory-garden.svg"),
    radial-gradient(ellipse at 18% 12%, rgba(249, 215, 222, .40), transparent 38%),
    radial-gradient(ellipse at 84% 18%, rgba(220, 234, 240, .34), transparent 36%),
    radial-gradient(ellipse at 14% 88%, rgba(220, 234, 229, .30), transparent 34%),
    radial-gradient(ellipse at 88% 86%, rgba(246, 218, 224, .38), transparent 38%),
    linear-gradient(145deg, #fffaf6 0%, #fff7f5 44%, #f8f3f4 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform: translateZ(0);
  animation: garden-light-breathe 24s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .24;
  background-image:
    repeating-linear-gradient(0deg, rgba(133, 107, 91, .025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(133, 107, 91, .018) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(174, 132, 141, .055) 100%);
  mix-blend-mode: multiply;
}
@keyframes garden-light-breathe {
  0% { opacity: .94; }
  100% { opacity: 1; }
}
.topbar {
  border-bottom-color: rgba(198, 158, 157, .22);
  background: linear-gradient(90deg, rgba(255,250,247,.40), rgba(255,255,255,.16), rgba(255,250,247,.40));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
#app::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 6%;
  border-radius: 48%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.62), rgba(255,255,255,.18) 52%, transparent 76%),
    radial-gradient(ellipse at 23% 78%, rgba(246, 215, 223, .16), transparent 45%);
  filter: blur(12px);
}
.mint-card {
  border-color: rgba(255,255,255,.92);
  background: linear-gradient(148deg, rgba(255,253,249,.95), rgba(255,248,248,.93) 52%, rgba(248,239,244,.94));
  box-shadow: 0 22px 64px rgba(156, 108, 124, .15), 0 4px 15px rgba(174, 129, 139, .07), inset 0 0 0 1px rgba(255,255,255,.58);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
.mint-card::before {
  background: radial-gradient(ellipse, rgba(255,255,255,.78), rgba(248,226,232,.24) 62%, transparent 76%);
}
.gift-card, .memory-item, .keepsake-panel, .closing-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gift-card { background: linear-gradient(145deg, rgba(255,253,249,.90), rgba(255,245,247,.88) 60%, rgba(246,241,245,.90)); }
.memory-item { background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,250,245,.94)); }
.closing-card { background: linear-gradient(145deg, rgba(255,251,248,.95), rgba(255,241,246,.94)); }
.site-footer {
  color: #a98d92;
  text-shadow: 0 1px rgba(255,255,255,.65);
}
.ambient-heart { opacity: .36; filter: drop-shadow(0 2px 5px rgba(218,143,165,.12)); }
.sparkle { color: #d5b779; opacity: .42; text-shadow: 0 0 9px rgba(236,208,145,.28); }
.ambient-petal { opacity: .25; }
@media (max-width: 680px) {
  body::before {
    background-image:
      url("assets/garden/enchanted-memory-garden-portrait.svg"),
      radial-gradient(ellipse at 10% 9%, rgba(249,215,222,.38), transparent 38%),
      radial-gradient(ellipse at 92% 18%, rgba(220,234,240,.28), transparent 38%),
      radial-gradient(ellipse at 14% 90%, rgba(220,234,229,.26), transparent 36%),
      radial-gradient(ellipse at 90% 88%, rgba(246,218,224,.35), transparent 38%),
      linear-gradient(145deg, #fffaf6 0%, #fff7f5 48%, #f8f3f4 100%);
    background-size: 100% 100%;
  }
  #app::after { inset: 5% 0; opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  body::after { opacity: .18; }
}

/* V41 — YouTube is the shared video player in the side dock. */
#app { transition: width .28s ease, margin .28s ease; }
body.soundtrack-dock-open #app {
  width: calc(100% - 358px);
  margin-left: 0;
  margin-right: 358px;
}
.global-soundtrack {
  position: fixed;
  top: max(84px, calc(env(safe-area-inset-top) + 72px));
  right: max(14px, env(safe-area-inset-right));
  z-index: 160;
  width: min(336px, calc(100vw - 28px));
  max-height: calc(100dvh - 104px);
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 14px 14px 12px;
  border: 1px solid rgba(226, 178, 194, .72);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(255,245,248,.97) 62%, rgba(247,250,246,.96));
  box-shadow: 0 18px 46px rgba(119, 73, 92, .18), 0 3px 12px rgba(119, 73, 92, .08);
  scrollbar-width: thin;
  scrollbar-color: #dba6b7 transparent;
}
.global-soundtrack[hidden] { display: none !important; }
.global-soundtrack-content,
.global-soundtrack.is-playing .global-soundtrack-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: 12px;
}
.youtube-player-shell { min-width: 0; width: 100%; }
#youtubePlayer { min-width: 0; width: 100%; }
#youtubePlayer iframe { width: 100% !important; min-width: 280px; height: 152px !important; }
.music-memory-card { width: min(196px, 82%); margin: 4px auto 2px; }
.music-memory-card img { height: 150px; }
.soundtrack-full-hint {
  margin: 8px 2px 4px;
  color: #927987;
  font-size: 10px;
  line-height: 1.55;
}
.soundtrack-status { font-size: 10px; }
.soundtrack-youtube-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 2px 1px; font-size: 11px; }
body.music-is-playing .header-track-vinyl { animation: v34-vinyl-spin 3s linear infinite; }
.header-track-toggle[aria-pressed="true"] .header-track-vinyl { animation: none; }

/* Keep the same YouTube player visible beside Kisah/Surprise while their dialog is open. */
.external-page-dialog .external-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 356px);
  width: 100%;
  height: 100%;
  min-height: 0;
}
.external-page-view { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.external-page-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #fff8fa; }
.external-soundtrack-dock {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: max(62px, calc(env(safe-area-inset-top) + 58px)) 12px 16px;
  border-left: 1px solid rgba(226, 178, 194, .55);
  background: linear-gradient(155deg, rgba(255,250,248,.98), rgba(255,239,245,.98) 58%, rgba(238,245,239,.96));
}
.external-soundtrack-dock > .global-soundtrack {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 12px;
  box-shadow: 0 10px 28px rgba(119, 73, 92, .12);
}
.external-music-memory-card { left: 14px; right: auto; bottom: 14px; }

@media (max-width: 899px) {
  body.soundtrack-dock-open #app { width: 100%; margin-left: 0; margin-right: 0; }
  .global-soundtrack {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    width: auto;
    max-height: min(58dvh, 430px);
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(119, 73, 92, .22);
  }
  .global-soundtrack-heading { margin-bottom: 7px; }
  .global-soundtrack-heading h2 { font-size: 15px; }
  .soundtrack-full-hint { font-size: 9px; }
  .external-page-dialog .external-page-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .external-page-view { grid-row: 1; }
  .external-soundtrack-dock {
    grid-row: 2;
    max-height: min(38dvh, 270px);
    overflow: auto;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid rgba(226, 178, 194, .55);
  }
  .external-soundtrack-dock > .global-soundtrack { padding: 9px; }
  .external-soundtrack-dock .global-soundtrack-heading { margin-bottom: 5px; }
  .external-soundtrack-dock .soundtrack-full-hint { display: none; }
  .external-music-memory-card { width: min(128px, 34vw); }
}
@media (max-width: 390px) {
  .global-soundtrack { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); padding: 10px; }
  .global-soundtrack-heading h2 { font-size: 14px; }
  .global-soundtrack-kicker { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  #app, .global-soundtrack { transition: none !important; }
}

/* V42 — A separate floating Polaroid appears only while YouTube confirms playback. */
.music-memory-floating-card {
  position: fixed;
  z-index: 155;
  left: max(18px, env(safe-area-inset-left));
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(174px, 17vw);
  margin: 0;
  transform: translate3d(-10px, 16px, 0) rotate(-5deg) scale(.96);
  box-shadow: 0 15px 34px rgba(113, 72, 88, .20), 0 3px 9px rgba(113, 72, 88, .10);
}
.music-memory-floating-card.is-visible {
  transform: translate3d(0, 0, 0) rotate(-3deg) scale(1);
}
.music-memory-floating-card img {
  height: 144px;
  object-fit: contain;
  background: linear-gradient(145deg, #fffdfb, #fbf4f3);
}
.music-memory-floating-card figcaption strong { font-size: 19px; }
.music-memory-floating-card figcaption span { font-size: 10px; }
.music-memory-floating-card .music-memory-close {
  width: 24px;
  height: 24px;
  font-size: 16px;
}

@media (max-width: 899px) {
  .music-memory-floating-card {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    top: calc(env(safe-area-inset-top) + 78px);
    bottom: auto;
    width: min(126px, 33vw);
    padding: 6px 6px 8px;
    transform: translate3d(0, -10px, 0) rotate(4deg) scale(.96);
  }
  .music-memory-floating-card.is-visible {
    transform: translate3d(0, 0, 0) rotate(2deg) scale(1);
  }
  .music-memory-floating-card img { height: 96px; }
  .music-memory-floating-card figcaption { gap: 2px; padding-top: 5px; }
  .music-memory-floating-card figcaption strong { font-size: 15px; }
  .music-memory-floating-card figcaption span { font-size: 8px; line-height: 1.3; }
  .music-memory-floating-card .music-memory-close { width: 21px; height: 21px; top: 2px; right: 2px; }
}
@media (max-width: 390px) {
  .music-memory-floating-card {
    top: calc(env(safe-area-inset-top) + 72px);
    right: 8px;
    width: 108px;
    padding: 5px 5px 7px;
  }
  .music-memory-floating-card img { height: 82px; }
  .music-memory-floating-card figcaption strong { font-size: 13px; }
  .music-memory-floating-card figcaption span { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .music-memory-floating-card,
  .music-memory-floating-card.is-visible { transition: none !important; transform: none !important; }
}


/* V43 — match the user's official YouTube Player share code (full 352px player). */
.youtube-player-shell { min-height: 352px; }
#youtubePlayer,
#youtubePlayer iframe {
  display: block;
  width: 100% !important;
  min-width: 280px;
  height: 352px !important;
  border: 0;
  border-radius: 12px;
}
@media (max-width: 899px) {
  .youtube-player-shell { min-height: 352px; }
  #youtubePlayer,
  #youtubePlayer iframe { height: 352px !important; }
}


/* V44 — visible YouTube video player, sized responsively in the side dock. */
.youtube-player-shell { position: relative; width: 100%; min-width: 0; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; }
#youtubePlayer { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; }
#youtubePlayer iframe { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; border: 0; }
.soundtrack-youtube-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 2px 1px; color: #ba6886; font-size: 11px; font-weight: 800; text-decoration: none; }
.soundtrack-youtube-link:hover { text-decoration: underline; }
@media (max-width: 899px) {
  .global-soundtrack { max-height: min(66dvh, 500px); }
  .youtube-player-shell { width: min(100%, 440px); margin-inline: auto; }
}

/* ===== SAKURA TREE ANIMATION (replacement for question-flower) ===== */
.sakura-branch {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: sakuraBranchGrow 1.2s cubic-bezier(.16,.78,.22,1) var(--bd, .1s) forwards;
}
.sakura-cluster {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.2);
  animation: sakuraBloom .8s cubic-bezier(.34,1.56,.64,1) var(--cd, .4s) forwards;
}
.sakura-bloom-5 {
  animation: sakuraSway 4s ease-in-out infinite;
  transform-origin: 0 8px;
}
.sakura-small .sakura-bloom-5 {
  animation-duration: 5s;
  animation-delay: .5s;
}
.sakura-fp {
  animation: sakuraPetalFloat var(--fpdur, 8s) ease-in-out var(--fpd, 0s) infinite;
  transform-origin: center;
}
.sakura-heart-float {
  animation: sakuraHeartFloat 5s ease-in-out var(--hfd, 0s) infinite;
}
@keyframes sakuraBranchGrow {
  to { stroke-dashoffset: 0; }
}
@keyframes sakuraBloom {
  to { opacity: 1; transform: scale(1); }
}
@keyframes sakuraSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes sakuraPetalFloat {
  0% { opacity: 0; transform: translate(0,0) rotate(0deg); }
  15% { opacity: .75; }
  85% { opacity: .6; }
  100% { opacity: 0; transform: translate(var(--fpx,30px), var(--fpy,-60px)) rotate(var(--fpr, 25deg)); }
}
@keyframes sakuraHeartFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.8); }
  30% { opacity: .6; }
  60% { opacity: .4; transform: translateY(var(--hfy,-35px)) translateX(var(--hfx,15px)) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .sakura-branch, .sakura-cluster, .sakura-bloom-5,
  .sakura-fp, .sakura-heart-float {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ===== GLOBAL LIGHT EFFECTS ===== */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(232,121,162,.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(232,121,162,.8)) drop-shadow(0 0 40px rgba(232,121,162,.3)); }
}

/* ===== FLOWER BOX (replaces the sakura tree on the "celebration" page) ===== */
.flower-garden-scene.flower-box-scene {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: auto; min-height: 220px; margin-bottom: 8px; overflow: visible;
}
.flower-box {
  appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: pointer;
  width: min(72%, 250px); line-height: 0; border-radius: 24px;
  -webkit-tap-highlight-color: transparent;
  animation: fb-bob 3.6s ease-in-out infinite;
  filter: drop-shadow(0 14px 18px rgba(217,69,113,.18));
}
.flower-box:hover { transform: scale(1.03); }
.flower-box:focus-visible { outline: 3px solid var(--pink-4); outline-offset: 6px; }
.flower-box-art { width: 100%; height: auto; overflow: visible; }
.flower-box .fb-lid, .flower-box .fb-peek, .flower-box .fb-stem-group { transform-box: fill-box; }
.flower-box .fb-lid { transform-origin: 0% 100%; transition: transform .7s cubic-bezier(.3,1.4,.5,1); }
.flower-box .fb-peek { transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3,1.5,.5,1) .1s; }
.flower-box .fb-stem-group { transform-origin: 50% 100%; animation: fb-sway 3.2s ease-in-out var(--d, 0s) infinite; }
.flower-box.is-open { animation: none; }
.flower-box.is-open .fb-lid { transform: translate(-18%,-58%) rotate(-24deg); }
.flower-box.is-open .fb-peek { transform: translateY(-22%) scale(1.12); }
.flower-box-hint {
  margin: 10px 0 0; font-family: var(--hand); font-size: 21px; line-height: 1; color: #c9577e;
  animation: fb-hint 2.2s ease-in-out infinite;
}
.flower-box-scene.is-opened .flower-box-hint { opacity: 0; animation: none; }
@keyframes fb-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes fb-sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes fb-hint { 0%,100% { opacity: .55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

.bloom-overlay {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,240,246,.94) 0%, rgba(255,214,228,.92) 100%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .55s ease, visibility 0s linear .55s;
}
.bloom-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .45s ease; }
.bloom-field { position: absolute; inset: 0; }
.bloom-flower { position: absolute; left: 0; top: 0; display: block; max-width: none; line-height: 0; object-fit: contain; will-change: transform, opacity; pointer-events: none; }
.bloom-flower.is-soft { filter: blur(2.6px) saturate(.92); opacity: .78; }
.bloom-overlay { width: 100vw; height: 100vh; height: 100dvh; min-height: 100svh; touch-action: manipulation; overscroll-behavior: contain; }
.flower-box { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.bloom-flower svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(190,60,105,.22)); }
.bloom-message {
  position: relative; z-index: 2; margin: 0; padding: 18px 30px; border-radius: 28px;
  background: rgba(255,250,252,.88); color: #c9457a; box-shadow: 0 14px 46px rgba(180,60,100,.22);
  font-family: var(--display); font-weight: 700; font-size: clamp(26px, 6vw, 42px); line-height: 1.2;
  opacity: 0; transform: scale(.8);
}
.bloom-message small { display: block; margin-top: 6px; font-family: var(--body); font-weight: 600; font-size: 13px; color: #a98592; }
.bloom-overlay.is-open .bloom-message { animation: bloom-msg .8s cubic-bezier(.3,1.4,.5,1) 1.5s forwards; }
@keyframes bloom-msg { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .flower-box, .flower-box .fb-stem-group, .flower-box-hint { animation: none !important; }
  .bloom-overlay.is-open .bloom-message { animation-duration: .01ms; animation-delay: 0s; }
}

/* Realistic blossoms: soft sway once they have landed */
.bloom-overlay { background: radial-gradient(ellipse at 50% 45%, rgba(255,246,249,.97) 0%, rgba(250,214,226,.95) 100%); }
.bloom-flower.is-flower svg { animation: bloom-sway var(--swd, 6s) ease-in-out var(--swo, 0s) infinite alternate; transform-origin: 50% 50%; filter: drop-shadow(0 3px 5px rgba(120,30,65,.28)); }
@keyframes bloom-sway { from { transform: rotate(calc(var(--sway, 2deg) * -1)); } to { transform: rotate(var(--sway, 2deg)); } }
@media (prefers-reduced-motion: reduce) { .bloom-flower.is-flower svg { animation: none !important; } }


/* ===== V46c: smoother flower box + bloom ===== */
.flower-box { will-change: transform; filter: none; }
.flower-box-art { transition: transform .35s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 12px 16px rgba(217,69,113,.18)); }
.flower-box:hover { transform: none; }
.flower-box:hover .flower-box-art { transform: scale(1.04); }
.flower-box:active .flower-box-art { transform: scale(.97); transition-duration: .12s; }
.flower-box.is-open { animation: fb-bob 3.6s ease-in-out infinite; animation-play-state: paused; }
.flower-box .fb-lid { transition: transform .8s cubic-bezier(.22,1.2,.36,1); }
.flower-box .fb-peek { transition: transform .8s cubic-bezier(.22,1.3,.36,1) .08s; }
.bloom-overlay { backface-visibility: hidden; transition: opacity .6s cubic-bezier(.4,0,.2,1), visibility 0s linear .6s; }
.bloom-overlay.is-open { transition: opacity .5s cubic-bezier(.4,0,.2,1); }
.bloom-field { transform: scale(1.06); transition: transform .9s cubic-bezier(.22,1,.36,1); }
.bloom-overlay.is-open .bloom-field { transform: none; }
img.bloom-flower { display: block; max-width: none; user-select: none; -webkit-user-drag: none; backface-visibility: hidden; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .bloom-field { transition: none; transform: none; } }

/* Foto polaroid di halaman surat: tampil penuh (cover), bukan kecil di dalam bingkai */
.letter-mini-polaroid-left img[src*="18-kolase-awalnya"],
.letter-mini-polaroid-right img[src*="19-momen-kecil"] {
  height: 84px; object-fit: cover; background: #fff9f6;
}
.letter-mini-polaroid-left img[src*="18-kolase-awalnya"] { object-position: 50% 40%; }
.letter-mini-polaroid-right img[src*="19-momen-kecil"] { object-position: 50% 50%; }
@media (max-width: 520px) {
  .letter-mini-polaroid-left img[src*="18-kolase-awalnya"],
  .letter-mini-polaroid-right img[src*="19-momen-kecil"] { height: 74px; }
}
@media (max-width: 390px) {
  .letter-mini-polaroid-left img[src*="18-kolase-awalnya"],
  .letter-mini-polaroid-right img[src*="19-momen-kecil"] { height: 64px; }
}

/* Ruang di atas kotak supaya tutup yang terbuka tidak terpotong tepi kartu */
.flower-garden-scene.flower-box-scene { padding-top: 30px; }
.flower-box.is-open .fb-lid { transform: translate(-18%,-58%) rotate(-24deg); }


/* V46d: warm, colourful bouquet like the reference */
.bloom-overlay { background: radial-gradient(ellipse at 50% 45%, #fff4ec 0%, #fbd8cf 55%, #f5c3cf 100%); }

/* ===== V47c — Our little memories: foto tampil utuh, kartu mengikuti tinggi isi ===== */
.memory-grid.memory-collage{grid-auto-rows:auto!important;align-items:start!important;gap:18px!important}
.memory-collage .memory-item{grid-row:auto!important;height:auto!important;display:flex;flex-direction:column}
.memory-collage .memory-image,
.memory-collage .memory-item:nth-child(1) .memory-image,
.memory-origin .memory-image{flex:none!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:4/5!important;background:linear-gradient(145deg,#fbf3f5,#fff2f7)!important}
.memory-collage .memory-image img{width:100%!important;height:100%!important;object-fit:contain!important}
@media (max-width:760px){
  .memory-grid.memory-collage{grid-auto-rows:auto!important;gap:12px!important}
  .memory-collage .memory-image,.memory-collage .memory-item:nth-child(1) .memory-image{height:auto!important;aspect-ratio:4/5!important}
}


/* SHINTAAA V49 — responsive opening motion */
@media (max-width: 520px) {
  .flower-garden-scene.flower-box-scene { min-height: 198px; padding-top: 16px; }
  .flower-box { width: min(68vw, 220px); }
  .flower-box-art { max-height: 184px; }
  .bloom-message { max-width: 90vw; padding: 0 10px; }
}
@media (max-width: 360px) {
  .flower-garden-scene.flower-box-scene { min-height: 180px; }
  .flower-box { width: min(64vw, 194px); }
}
@media (prefers-reduced-motion: reduce) {
  .bloom-flower, .flower-box, .flower-box .fb-stem-group { animation: none !important; }
}


/* SHINTAAA V49 — external pages use the same soft entrance transition */
.external-page-dialog[open] {
  animation: v49-external-page-in .48s cubic-bezier(.2,.75,.25,1) both;
}
.external-page-dialog[open]::backdrop {
  animation: v49-external-backdrop-in .42s ease both;
}
@keyframes v49-external-page-in {
  from { opacity: 0; transform: translateY(16px) scale(.992); }
  to { opacity: 1; transform: none; }
}
@keyframes v49-external-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .external-page-dialog[open], .external-page-dialog[open]::backdrop { animation: none !important; }
}


/* V52 — three keepsake photographs inside the playlist panel */
.playlist-photo-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px auto 2px;max-width:460px}
.playlist-photo-strip figure{margin:0;min-width:0;padding:6px 6px 8px;background:linear-gradient(145deg,#fff,#fff4f7);border:1px solid #f5dce6;border-radius:10px;box-shadow:0 7px 18px rgba(123,75,98,.13);transform:rotate(var(--photo-tilt,0deg));}
.playlist-photo-strip figure:nth-child(1){--photo-tilt:-2deg}.playlist-photo-strip figure:nth-child(2){--photo-tilt:1.5deg}.playlist-photo-strip figure:nth-child(3){--photo-tilt:-1deg}
.playlist-photo-strip img{display:block;width:100%;height:clamp(84px,13vw,128px);object-fit:cover;border-radius:6px}
.playlist-photo-strip figcaption{margin-top:6px;text-align:center;color:#b87991;font:600 13px/1.1 Caveat,cursive}
.youtube-player-shell iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:13px;background:#21181f}
.soundtrack-full-hint{margin:.5rem 0 0}
@media(max-width:650px){.playlist-photo-strip{gap:7px}.playlist-photo-strip img{height:88px}.playlist-photo-strip figcaption{font-size:11px}}


/* V56 — consistent, understated page-level back navigation. */
.page-back-control {
  position: fixed;
  z-index: 45;
  top: calc(72px + env(safe-area-inset-top) + 7px);
  left: max(14px, calc((100vw - 1120px) / 2));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid rgba(220, 184, 194, .78);
  border-radius: 999px;
  background: rgba(255, 252, 251, .91);
  color: #9b7180;
  box-shadow: 0 5px 18px rgba(145, 99, 116, .10), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 800 12px/1 Nunito, sans-serif;
  letter-spacing: .015em;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.page-back-control:hover { background: #fff4f7; border-color: #dfaebe; box-shadow: 0 7px 20px rgba(145, 99, 116, .14); }
.page-back-control:active { transform: translateY(1px); }
.page-back-control:focus-visible { outline: 3px solid rgba(216, 116, 151, .35); outline-offset: 3px; }
.page-back-control[hidden] { display: none !important; }
@media (max-width: 680px) {
  .page-back-control { top: calc(58px + env(safe-area-inset-top) + 6px); min-height: 33px; padding: 6px 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .page-back-control { transition: none; } }