:root { color-scheme: dark; --paper: #fff5f2; --muted: #bda4b0; --rose: #ff91b3; --line: #e6a4bd2b; --panel: #21121fd9; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #140d19; }
body { margin: 0; min-height: 100svh; color: var(--paper); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: radial-gradient(ellipse at 50% 32%, #461d35 0%, #261426 36%, #140d19 76%); overflow-x: hidden; }
body::before { position: fixed; inset: 0; content: ""; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
button { font: inherit; }
button:focus-visible { outline: 2px solid #ffe0ea; outline-offset: 7px; }
.page { width: min(1180px, 100%); min-height: 100svh; margin: 0 auto; padding: 32px clamp(24px, 6vw, 72px) 25px; display: flex; flex-direction: column; position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: #ccb3bf; font-size: 10px; letter-spacing: .2em; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand-heart { color: var(--rose); font-size: 17px; filter: drop-shadow(0 0 7px #ff7bab80); }
.edition { font-family: Georgia, serif; font-style: italic; letter-spacing: .08em; }
main { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 54px 0 44px; text-align: center; }
.eyebrow { font: italic 10px Georgia, serif; letter-spacing: .42em; color: #c7a5b5; margin: 0 0 24px; }
.heart-stage { width: min(400px, 88vw); height: 294px; position: relative; display: grid; place-items: center; }
.orbit { width: 330px; height: 205px; border: 1px solid #b16c8b25; border-radius: 50%; position: absolute; transform: rotate(-24deg); animation: orbit-one 11s ease-in-out infinite; }
.orbit.second { width: 300px; height: 220px; border-color: #b16c8b15; animation: orbit-two 13s ease-in-out infinite; }
.orbit::after { content: ""; position: absolute; width: 4px; height: 4px; background: #e6b3c6; box-shadow: 0 0 12px #ffbcd9; border-radius: 50%; left: 38px; top: 32px; }
.heart-button { cursor: pointer; border: 0; background: none; padding: 20px; width: 240px; height: 240px; z-index: 2; transition: transform .18s ease; -webkit-tap-highlight-color: transparent; }
.heart-button:active { transform: scale(.94); }
.heart-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 26px #f54b8260); animation: heartbeat 2.6s ease-in-out infinite; }
.heart-button:hover .heart-svg { filter: drop-shadow(0 0 37px #ff6fa199); }
.heart-stage.is-tapped .heart-svg { animation: heart-tap .56s cubic-bezier(.18,.89,.32,1.28); }
.heart-ripple { position: absolute; width: 128px; height: 128px; border: 1px solid #ff9fc359; border-radius: 50%; opacity: 0; pointer-events: none; }
.heart-stage.is-tapped .heart-ripple { animation: ripple-out .9s ease-out both; }
.heart-stage.is-tapped .ripple-two { animation-delay: .12s; }
.halo { position: absolute; width: 140px; height: 140px; border-radius: 50%; box-shadow: 0 0 100px 40px #fc528f1a; animation: glow 2.6s ease-in-out infinite; }
.whisper { margin: 14px 0 0; min-height: 18px; color: #b093a2; font-size: 10px; letter-spacing: .19em; }
.whisper span { color: #df8daa; }
.whisper .whisper-text { color: #b093a2; transition: color .3s, text-shadow .3s; }
.whisper.sound-confirmed .whisper-text { color: #f1c8d7; text-shadow: 0 0 14px #ff8db26b; }
.whisper.sound-error .whisper-text { color: #d5aebd; }
.message { width: min(470px, 92vw); margin-top: 34px; opacity: 0; transform: translateY(16px); transition: opacity 1.5s ease, transform 1.5s cubic-bezier(.22, 1, .36, 1); }
.message.visible { opacity: 1; transform: translateY(0); }
.prelude { color: #d2b4c0; font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 13px; letter-spacing: .2em; margin: 0 0 12px; }
h1 { margin: 0; font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; font-weight: 400; font-size: clamp(44px, 7vw, 66px); letter-spacing: .18em; padding-left: .18em; line-height: 1.45; text-shadow: 0 0 42px #ffacc84d; }
.translation { margin: 7px 0 23px; font: italic 18px Georgia, serif; color: #e3bacb; }
.divider { margin: 0 auto 22px; width: 38px; height: 1px; background: #d5a0b75c; }
.note { margin: 0; line-height: 2.05; font-size: 12px; letter-spacing: .15em; color: var(--muted); }
.keepsakes { position: relative; width: 100%; margin: 38px auto 0; padding: 27px 22px 22px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(180deg, #2d18289c, #170e1880); box-shadow: 0 22px 60px #08040924, inset 0 1px #ffd4e20a; overflow: hidden; }
.keepsakes::before { position: absolute; top: 0; left: 20%; width: 60%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, #f3a7c37c, transparent); }
.keepsakes-kicker { margin: 0 0 7px; color: #8f7180; font: italic 8px Georgia, serif; letter-spacing: .28em; }
.keepsakes-title { margin: 0 0 18px; color: #dcc2cc; font: 13px Georgia, "Songti SC", "SimSun", serif; letter-spacing: .22em; }
.keepsakes-hint { margin: -7px auto 16px; color: #a88b9a; font-size: 10px; letter-spacing: .1em; transition: opacity .25s, height .25s, margin .25s; }
.keepsakes.is-open .keepsakes-hint { height: 0; margin: -4px 0 0; opacity: 0; overflow: hidden; }
.media-tabs { width: 184px; height: 44px; margin: 0 auto; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border: 1px solid #c28aa84f; background: #100a133d; border-radius: 6px; }
.media-tab { min-width: 0; border: 0; border-radius: 4px; background: transparent; color: #b898a8; cursor: pointer; letter-spacing: .12em; transition: color .25s, background .25s, box-shadow .25s, transform .2s; }
.media-tab:hover { color: #ffe2ed; }
.media-tab:active { transform: scale(.96); }
.media-tab[aria-selected="true"] { color: #fff4f7; background: #dc759838; box-shadow: inset 0 0 0 1px #e99bb55c, 0 5px 16px #0804082e; }
.tab-icon { display: inline-block; width: 18px; color: var(--rose); font-size: 14px; }
.media-panel { margin-top: 22px; animation: panel-in .45s ease both; }
.audio-entry { padding: 14px 2px 17px; border-bottom: 1px solid #d5a0b721; text-align: left; }
.audio-entry:last-child { border-bottom: 0; }
.audio-label { display: flex; align-items: center; gap: 10px; margin: 0 4px 9px; color: #d7b7c4; font-size: 11px; letter-spacing: .13em; }
.audio-label span { color: #976f82; font: italic 10px Georgia, serif; letter-spacing: .06em; }
.audio-entry audio { display: block; width: 100%; height: 38px; accent-color: #df668f; }
.image-panel > p:first-child { margin: 2px 0 14px; color: #cdb0bc; font: 14px Georgia, "Songti SC", "SimSun", serif; letter-spacing: .12em; }
.image-panel .secret-hint { width: fit-content; margin: 0 auto 18px; padding: 7px 12px; border-top: 1px solid #d692ac38; border-bottom: 1px solid #d692ac38; color: #e2b5c6; font: italic 11px Georgia, "Songti SC", "SimSun", serif; letter-spacing: .17em; }
.secret-hint span { color: var(--rose); margin-right: 4px; }
.video-link { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 19px; border: 1px solid #d990aa55; border-radius: 5px; color: #ffe6ef; background: #d48fac0d; text-decoration: none; font-size: 12px; letter-spacing: .13em; transition: background .25s, border-color .25s; }
.video-link:hover { background: #d48fac20; border-color: #e5a1b982; }
.video-link:focus-visible { outline: 2px solid #ffe0ea; outline-offset: 5px; }
.image-panel small { display: block; margin-top: 12px; color: #806979; font-size: 9px; letter-spacing: .12em; }
footer { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); color: #927a88; font-size: 9px; letter-spacing: .14em; gap: 16px; }
.footer-note { font: italic 12px Georgia, serif; letter-spacing: .06em; }
.live-dot { display: inline-block; width: 4px; height: 7px; background: #d28ca7; border-radius: 3px; margin-right: 8px; animation: glow 2.6s infinite; }
#particles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.star { position: absolute; border-radius: 50%; background: #f1bed3; animation: twinkle var(--duration) ease-in-out infinite alternate; }
.float-heart { position: absolute; color: #ffaccd; line-height: 1; animation: float-up 2.4s ease-out forwards; }
@keyframes heartbeat { 0%, 38%, 100% { transform: scale(1); } 12% { transform: scale(1.09); } 23% { transform: scale(1.025); } 30% { transform: scale(1.065); } }
@keyframes heart-tap { 0% { transform: scale(1); } 28% { transform: scale(.88); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes ripple-out { 0% { opacity: .65; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.35); } }
@keyframes orbit-one { 0%, 100% { transform: rotate(-24deg) scale(1); } 50% { transform: rotate(-18deg) scale(1.04); } }
@keyframes orbit-two { 0%, 100% { transform: rotate(24deg) scale(1); } 50% { transform: rotate(17deg) scale(.97); } }
@keyframes glow { 0%, 40%, 100% { opacity: .5; } 15%, 30% { opacity: 1; } }
@keyframes twinkle { from { opacity: .12; transform: translateY(0); } to { opacity: .65; transform: translateY(-12px); } }
@keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), -230px) scale(1.3) rotate(var(--rotation)); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) { .page { padding: 22px 20px 20px; } .topbar { font-size: 8px; padding-bottom: 14px; } main { padding: 42px 0 35px; } .eyebrow { margin-bottom: 10px; font-size: 9px; } .heart-stage { height: 246px; } .orbit { width: 286px; height: 178px; } .orbit.second { width: 260px; height: 194px; } .heart-button { width: 208px; height: 208px; } .message { width: 100%; margin-top: 26px; } .edition { font-size: 9px; } .keepsakes { margin-top: 36px; padding: 26px 14px 18px; } .audio-entry audio { height: 40px; } footer { margin-top: 12px; font-size: 8px; } .footer-note { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .float-heart { display: none; } }

/* Keep the saved page's palette and layout; enhance only the motion. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.intro-active { overflow: hidden; }
.arrival { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; overflow: hidden; min-height: 100svh; padding: 28px clamp(22px, 6vw, 76px) 26px; background: radial-gradient(ellipse at 50% 42%, #461d35 0%, #261426 43%, #140d19 82%); opacity: 1; transition: opacity .7s ease, visibility .7s; }
.arrival[hidden] { display: none; }
.arrival.is-waiting { cursor: pointer; touch-action: manipulation; }
.arrival:focus, main:focus { outline: none; }
.arrival.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.arrival-header, .arrival-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(1060px, 100%); margin: 0 auto; color: #bda4b0; font-size: 10px; letter-spacing: .16em; }
.arrival-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.arrival-music[hidden] { display: none; }
.arrival-skip, .arrival-music { flex-shrink: 0; min-height: 44px; padding: 0 14px; color: #d7b7c4; border: 1px solid #e6a4bd2b; border-radius: 24px; background: #fff5f205; cursor: pointer; font-size: 11px; letter-spacing: .12em; transition: background .2s; }
.arrival-skip:hover, .arrival-music:hover { background: #ff91b312; }
.arrival-music-icon { margin-right: 6px; color: #e3bacb; }
.arrival-music[aria-pressed="true"] { color: #ffe0eb; border-color: #e6a4bd60; background: #ff91b30d; }
.arrival-music[aria-pressed="true"] .arrival-music-icon { text-shadow: 0 0 8px #ff91b380; }
.arrival-music:disabled { cursor: default; opacity: .6; }
.arrival-skip span { padding-left: 7px; }
.arrival-story { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; padding: 15px 0 32px; }
.arrival-eyebrow { margin: 12px 0 0; color: #c7a5b58c; font: italic 10px Georgia, serif; letter-spacing: .32em; text-align: center; }
.arrival-scene { width: min(840px, 100%); flex-shrink: 1; min-height: 170px; aspect-ratio: 800 / 460; max-height: 50svh; transition: transform 2.2s cubic-bezier(.22,1,.36,1); }
.arrival-map { display: block; width: 100%; height: 100%; overflow: visible; }
.arrival-grid { opacity: .7; transition: opacity 1.6s; }
.arrival.is-waiting .arrival-grid { opacity: 0; }
.arrival-trail, .arrival-tail { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 1.7s; }
.arrival-trail-me { stroke: #ff91b3; opacity: .38; }
.arrival-trail-you { stroke: #f8dce8; opacity: .3; }
.arrival-tail { stroke-width: 2.8; opacity: .9; filter: drop-shadow(0 0 3px #ff91b38c); }
.arrival-tail-me { stroke: #ffb2cc; }
.arrival-tail-you { stroke: #fff2f8; }
.arrival-point { color: #ff91b3; transition: opacity .7s; }
.arrival-point-you { color: #f8dce8; }
.arrival-point-mark { transition: transform .8s ease; }
.arrival.is-waiting .arrival-point-mark { transform: scale(1.9); }
.arrival.is-waiting .arrival-point-you .point-halo { animation-delay: -1.2s; }
.point-halo { fill: currentColor; opacity: .07; animation: point-breathe 2.4s ease-in-out infinite alternate; }
.point-glow { fill: currentColor; opacity: .2; filter: blur(3px); }
.point-core { fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
.point-hot { fill: #fff8fb; }
.arrival-name { fill: currentColor; font-family: "Songti SC", "SimSun", serif; font-size: 19px; opacity: .85; transition: opacity .6s, transform .8s; }
.arrival.is-waiting .arrival-name { transform: translateY(16px); }
.arrival.is-near .arrival-name { opacity: 0; }
.arrival-heart { fill: #ff91b308; stroke: #ffc8d9; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 9px #ff91b3); transition: stroke-dashoffset 1.05s ease, opacity .5s, fill 1.5s; }
.arrival-union-glow, .arrival-union-core, .arrival-union-name { opacity: 0; transition: opacity 1.2s; }
.arrival-union-core { fill: #fff0f7; filter: drop-shadow(0 0 10px #ff91b3); }
.arrival-union-name { fill: #f8dce8; font: 18px "Songti SC", "SimSun", serif; letter-spacing: .22em; }
.arrival-sparks circle { fill: #ffd8e6; opacity: 0; }
.arrival-meeting-ring { fill: none; stroke: #ff91b3; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.arrival.has-met .arrival-heart { stroke-dashoffset: 0; opacity: 1; fill: #ff91b322; }
.arrival.has-met .arrival-grid { opacity: .2; }
.arrival.has-met .arrival-scene { transform: scale(1.035); }
.arrival.has-met .arrival-union-glow, .arrival.has-met .arrival-union-core, .arrival.has-met .arrival-union-name { opacity: 1; }
.arrival.has-met .arrival-point, .arrival.has-met .arrival-tail { opacity: 0; }
.arrival.has-met .arrival-trail { opacity: .17; }
.arrival.has-met .arrival-sparks circle { animation: meeting-spark 1.8s var(--spark-delay) ease-out both; }
.arrival.has-met .arrival-meeting-ring { animation: meeting-ring 2s ease-out both; }
.arrival.has-met .arrival-ring-two { animation-delay: .3s; }
.arrival.has-met .arrival-ring-three { animation-delay: .6s; }
.arrival.is-holding .arrival-union-core { animation: together-glow 1.6s ease-in-out infinite; }
.arrival-copy { display: grid; width: 100%; min-height: 150px; flex-shrink: 0; text-align: center; }
.arrival-invitation, .arrival-captions { grid-area: 1 / 1; }
.arrival-invitation { opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .4s, visibility .4s; pointer-events: none; }
.arrival.is-waiting .arrival-invitation { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.arrival-invitation-lead { margin: 0 0 20px; color: #d4b2c1; font: 14px "Songti SC", "SimSun", serif; letter-spacing: .2em; }
.arrival-start { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 54px; max-width: 100%; padding: 12px 26px; color: #ffe5ef; border: 1px solid #f7b0cc55; border-radius: 40px; background: linear-gradient(115deg, #e08bb71a, #ffe3ed08); box-shadow: 0 0 32px #fa8fbd0a; cursor: pointer; font: 18px "Songti SC", "SimSun", serif; letter-spacing: .13em; transition: border-color .3s, box-shadow .3s, background .3s; }
.arrival-start:hover { background: #ffb5d017; border-color: #f7b0cc99; box-shadow: 0 0 36px #fa8fbd16; }
.arrival-start:focus-visible { outline: 2px solid #ffd1e2; outline-offset: 6px; }
.arrival-start span:last-child { font: 17px Georgia, serif; color: #dcb4c7; }
.arrival-start-note { margin: 14px 0 0; color: #bda4b0; font-size: 10px; letter-spacing: .15em; }
.arrival-captions { width: 100%; min-height: 108px; position: relative; text-align: center; transition: opacity .6s .15s, visibility .6s; }
.arrival.is-waiting .arrival-captions { opacity: 0; visibility: hidden; }
.arrival-caption { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(8px); filter: blur(3px); transition: opacity .75s ease, transform .9s ease, filter .9s ease; pointer-events: none; }
.arrival-caption.is-current { opacity: 1; transform: none; filter: none; }
.arrival-caption span { display: block; margin-bottom: 14px; color: #bda4b0; font-size: 12px; letter-spacing: .2em; }
.arrival-caption strong { display: block; color: #fff5f2; font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(23px, 3.4vw, 35px); line-height: 1.5; font-weight: 400; letter-spacing: .16em; padding-left: .16em; text-shadow: 0 0 34px #ffacc82b; }
.arrival-caption-final strong { color: #ffd8e6; }
.arrival-footer { color: #927a88; font-size: 9px; letter-spacing: .13em; }
.arrival-footer > span { flex-shrink: 0; }
.arrival-footer > span:last-child { font: italic 12px Georgia, serif; }
.arrival-progress { width: min(240px, 30vw); height: 1px; background: #e6a4bd1c; overflow: hidden; transition: opacity .6s; }
.arrival.is-waiting .arrival-progress { opacity: 0; }
.arrival-progress i { display: block; height: 100%; background: #ffb2cd8c; transform: scaleX(var(--arrival-progress, 0)); transform-origin: left; }
@keyframes point-breathe { from { opacity: .05; transform: scale(.8); } to { opacity: .13; transform: scale(1.15); } }
@keyframes together-glow { 0%, 100% { opacity: .65; } 35% { opacity: 1; filter: drop-shadow(0 0 16px #ff91b3); } }
@keyframes meeting-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.5); } }
@keyframes meeting-ring { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(4.5); } }
@media (max-width: 520px) {
  .arrival { padding: 18px 20px 23px; }
  .arrival-header { gap: 10px; font-size: 8px; }
  .arrival-header .brand { gap: 7px; }
  .arrival-skip, .arrival-music { font-size: 10px; padding: 0 10px; letter-spacing: .06em; }
  .arrival-actions { gap: 6px; }
  .arrival-eyebrow { font-size: 8px; letter-spacing: .22em; }
  .arrival-scene { width: calc(100% + 24px); flex-shrink: 0; margin: 32px -12px 24px; }
  .arrival-point-mark { transform: scale(1.35); }
  .arrival-trail { stroke-width: 2.7; }
  .arrival-tail { stroke-width: 4.2; }
  .arrival-name { font-size: 28px; }
  .arrival-union-name { font-size: 26px; }
  .arrival-captions { min-height: 100px; }
  .arrival-copy { min-height: 146px; }
  .arrival-invitation-lead { font-size: 12px; }
  .arrival-start { min-height: 52px; padding: 12px 22px; font-size: 16px; gap: 12px; }
  .arrival-start-note { font-size: 9px; letter-spacing: .1em; }
  .arrival-caption span { font-size: 10px; letter-spacing: .13em; }
  .arrival-caption strong { font-size: clamp(20px, 5.8vw, 29px); letter-spacing: .08em; padding-left: .08em; }
  .arrival-footer { font-size: 8px; gap: 12px; }
}
@media (max-height: 550px) and (min-width: 521px) {
  .arrival { padding-top: 10px; padding-bottom: 14px; }
  .arrival-story { padding: 0; }
  .arrival-eyebrow { margin-top: 0; }
  .arrival-scene { min-height: 130px; max-height: 42svh; }
  .arrival-captions { min-height: 74px; }
  .arrival-copy { min-height: 116px; }
  .arrival-invitation-lead { margin-bottom: 8px; }
  .arrival-start { min-height: 44px; padding: 9px 22px; font-size: 16px; }
  .arrival-start-note { margin-top: 8px; }
  .arrival-caption span { margin-bottom: 5px; }
  .arrival-caption strong { font-size: 25px; }
}
.ambient-glow { position: fixed; inset: -15%; z-index: 0; pointer-events: none; opacity: .2; background: radial-gradient(ellipse at 35% 30%, #ff8fb91c, transparent 43%), radial-gradient(ellipse at 68% 65%, #f8bfce14, transparent 40%); animation: ambient-drift 18s ease-in-out infinite alternate; transition: opacity .8s ease; }
.heart-lit .ambient-glow { opacity: .85; }
#particles { z-index: 2; }
.journey { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .65s ease; }
.journey.is-running { opacity: 1; }
.journey-path { fill: none; stroke: #ff91b3; stroke-width: 1.5; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.journey-path-two { stroke: #ffe0ea; stroke-opacity: .45; }
.journey-dot { fill: #ff91b3; filter: drop-shadow(0 0 5px #ff91b3); }
.journey-dot-two { fill: #ffe0ea; filter: drop-shadow(0 0 5px #ffe0ea); }
.heart-button { transition: opacity .85s ease, transform .85s cubic-bezier(.22,1,.36,1); }
.heart-stage.is-arriving .heart-button { opacity: .28; transform: scale(.88); }
.heart-stage.is-tapped .heart-svg { animation: heart-double-tap 1s ease-out; }
.heart-stage.is-tapped .heart-ripple { animation: ripple-out .85s ease-out both; }
.heart-stage.is-tapped .ripple-one { animation-delay: .03s; }
.heart-stage.is-tapped .ripple-two { animation-delay: .31s; }
.heart-stage.is-tapped .halo { animation: encounter-glow 1.1s ease-out; }
.message { opacity: 1; transform: none; transition: none; }
.motion-ready .message:not(.visible) { opacity: 0; }
.title-character { display: inline-block; }
.note-line { display: block; }
.motion-ready .message.visible:not(.is-immediate) .prelude { animation: story-in .7s both; }
.motion-ready .message.visible:not(.is-immediate) .title-character { animation: story-in .85s calc(.3s + var(--order) * .13s) both; }
.motion-ready .message.visible:not(.is-immediate) .translation { animation: story-in .85s .8s both; }
.motion-ready .message.visible:not(.is-immediate) .divider { animation: line-in .9s .95s both; }
.motion-ready .message.visible:not(.is-immediate) .note-line { animation: story-in .85s 1.1s both; }
.motion-ready .message.visible:not(.is-immediate) .note-line + .note-line { animation-delay: 1.4s; }
.motion-ready .message.visible:not(.is-immediate) .keepsakes { animation: story-in .75s 1.65s both; }
.audio-entry { transition: border-color .3s; }
.audio-entry.is-playing .audio-label { color: #f1c8d7; }
.audio-entry.is-playing .audio-label span { color: #ff91b3; }
.audio-error { margin: 10px 4px 0; color: #e2b5c6; font-size: 11px; line-height: 1.6; }
.is-background *, .is-background *::before, .is-background *::after { animation-play-state: paused !important; }
@keyframes ambient-drift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(3%, 2%, 0); } }
@keyframes story-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes line-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes heart-double-tap { 0% { transform: scale(.97); } 10% { transform: scale(1.15); } 25% { transform: scale(.99); } 38% { transform: scale(1.1); } 63%, 100% { transform: scale(1); } }
@keyframes encounter-glow { 0% { opacity: .5; transform: scale(.9); } 15% { opacity: 1; transform: scale(1.15); } 28% { opacity: .65; transform: scale(1); } 42% { opacity: 1; transform: scale(1.1); } 100% { opacity: .5; transform: scale(1); } }
@media (max-width: 360px) { .heart-stage { width: 100%; } .orbit { max-width: 96%; } .orbit.second { max-width: 90%; } .eyebrow { letter-spacing: .3em; } footer { flex-wrap: wrap; gap: 9px; } }

/* Give the narrow layout enough scale for reading and touch interaction. */
@media (max-width: 520px) {
  .arrival, .arrival-header, .arrival-story, .arrival-copy, .arrival-footer,
  .arrival-invitation, .arrival-captions { min-width: 0; }
  .page { padding: 18px 16px 24px; }
  .topbar { padding-bottom: 16px; font-size: 10px; letter-spacing: .13em; }
  .brand { gap: 8px; }
  .brand-heart { font-size: 20px; }
  .edition { font-size: 11px; }
  main { padding: 34px 0 46px; }
  .eyebrow { margin-bottom: 18px; font-size: 11px; letter-spacing: .28em; }
  .heart-stage { width: min(100%, 390px); height: 300px; }
  .orbit { width: min(360px, 94vw); height: 220px; }
  .orbit.second { width: min(326px, 88vw); height: 236px; }
  .orbit::after { width: 5px; height: 5px; box-shadow: 0 0 15px #ffbcd9; }
  .heart-button { width: min(260px, 76vw); height: min(260px, 76vw); padding: 10px; }
  .heart-ripple { width: 158px; height: 158px; }
  .halo { width: 180px; height: 180px; box-shadow: 0 0 120px 48px #fc528f24; }
  .whisper { margin-top: 12px; font-size: 12px; letter-spacing: .16em; }
  .message { width: 100%; margin-top: 30px; }
  .prelude { margin-bottom: 14px; font-size: 15px; letter-spacing: .15em; }
  h1 { font-size: clamp(52px, 14vw, 72px); line-height: 1.25; letter-spacing: .12em; padding-left: .12em; }
  .translation { margin: 10px 0 26px; font-size: 20px; }
  .divider { width: 50px; margin-bottom: 26px; }
  .note { font-size: 14px; line-height: 2.1; letter-spacing: .1em; }
  .keepsakes { margin-top: 42px; padding: 30px 16px 24px; }
  .keepsakes-kicker { font-size: 10px; }
  .keepsakes-title { margin-bottom: 21px; font-size: 16px; }
  .media-tabs { width: min(240px, 86vw); height: 52px; }
  .media-tab { font-size: 15px; }
  .tab-icon { width: 21px; font-size: 19px; }
  .media-panel { margin-top: 26px; }
  .audio-entry { padding: 18px 2px 20px; }
  .audio-label { margin-bottom: 11px; font-size: 14px; }
  .audio-label span { font-size: 12px; }
  .audio-entry audio { height: 48px; }
  .image-panel > p:first-child { margin-bottom: 17px; font-size: 16px; }
  .image-panel .secret-hint { margin-bottom: 22px; padding: 9px 14px; font-size: 13px; }
  .video-link { min-height: 52px; padding: 0 24px; font-size: 14px; }
  .image-panel small { margin-top: 14px; font-size: 10px; }
  footer { margin-top: 18px; font-size: 10px; }
  .footer-note { font-size: 13px; }

  .arrival { padding: 16px 16px 22px; }
  .arrival-header { gap: 8px; font-size: 10px; letter-spacing: .1em; }
  .arrival-header .brand { gap: 7px; }
  .arrival-actions { gap: 6px; }
  .arrival-skip, .arrival-music { min-height: 46px; padding: 0 12px; font-size: 11px; letter-spacing: .05em; }
  .arrival-eyebrow { margin-top: 14px; font-size: 10px; letter-spacing: .18em; }
  .arrival-story { padding: 8px 0 24px; }
  .arrival-scene { width: min(100%, calc(100vw - 20px)); min-height: 238px; max-height: none; margin: 18px auto 20px; aspect-ratio: auto; }
  .arrival-map { transform: scale(1.1); transform-origin: 50% 50%; }
  .arrival-point-mark { transform: scale(1.8); }
  .arrival-trail { stroke-width: 3.2; }
  .arrival-tail { stroke-width: 4.8; }
  .arrival-name { font-size: 42px; }
  .arrival-union-name { font-size: 36px; }
  .arrival-copy { min-height: 170px; }
  .arrival-invitation-lead { margin-bottom: 22px; font-size: 15px; }
  .arrival-start { min-height: 64px; padding: 14px 24px; font-size: 19px; gap: 14px; }
  .arrival-start span:last-child { font-size: 19px; }
  .arrival-start-note { margin-top: 15px; font-size: 11px; letter-spacing: .08em; }
  .arrival-captions { min-height: 122px; }
  .arrival-caption span { margin-bottom: 16px; font-size: 13px; letter-spacing: .1em; }
  .arrival-caption strong { font-size: clamp(29px, 7.8vw, 38px); line-height: 1.45; letter-spacing: .06em; padding-left: .06em; }
  .arrival-footer { font-size: 10px; gap: 12px; }
  .arrival-footer > span:last-child { font-size: 13px; }
  .arrival-progress { width: min(200px, 28vw); }
}

@media (max-width: 360px) {
  .page { padding-left: 14px; padding-right: 14px; }
  .topbar { font-size: 9px; }
  .edition { font-size: 10px; }
  .heart-stage { height: 278px; }
  .heart-button { width: min(244px, 78vw); height: min(244px, 78vw); }
  .arrival { padding-left: 12px; padding-right: 12px; }
  .arrival-header { font-size: 9px; }
  .arrival-skip, .arrival-music { min-height: 44px; padding: 0 9px; font-size: 10px; }
  .arrival-scene { width: min(100%, calc(100vw - 16px)); min-height: 224px; margin-left: auto; margin-right: auto; }
  .arrival-name { font-size: 44px; }
  .arrival-union-name { font-size: 38px; }
  .arrival-start { padding-left: 18px; padding-right: 18px; font-size: 17px; }
  .arrival-caption strong { font-size: clamp(27px, 8.4vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  .journey, .ambient-glow, .float-heart { display: none; }
  .motion-ready .message:not(.visible), .heart-stage.is-arriving .heart-button { opacity: 1; transform: none; }
  .motion-ready .message.visible > *, .title-character, .note-line { opacity: 1; transform: none; filter: none; }
}

/* Mobile reading scale: keep the opening and the main message prominent, then
   let the optional sound/image section extend the document below the fold. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .topbar { min-height: 48px; padding-bottom: 18px; font-size: 12px; letter-spacing: .12em; }
  .brand { gap: 10px; }
  .brand-heart { font-size: 24px; }
  .edition { font-size: 13px; letter-spacing: .06em; }
  main { justify-content: flex-start; padding: 48px 0 64px; }
  .eyebrow { margin-bottom: 26px; font-size: 12px; letter-spacing: .25em; }
  .heart-stage { height: 348px; overflow: hidden; }
  .heart-button { width: min(300px, 82vw); height: min(300px, 82vw); padding: 8px; }
  .orbit { width: min(390px, 96vw); height: 245px; }
  .orbit.second { width: min(352px, 90vw); height: 260px; }
  .halo { width: 205px; height: 205px; }
  .whisper { margin-top: 14px; font-size: 13px; }
  .message { margin-top: 38px; }
  .prelude { font-size: 17px; }
  h1 { font-size: clamp(62px, 16vw, 86px); line-height: 1.2; }
  .translation { font-size: 22px; }
  .note { font-size: 15px; }
  .keepsakes { width: 100%; margin-top: 52px; padding: 34px 18px 28px; }
  .keepsakes-kicker { font-size: 11px; }
  .keepsakes-title { margin-bottom: 22px; font-size: 18px; }
  .keepsakes-hint { font-size: 12px; }
  .media-tabs { width: min(300px, 90vw); height: 58px; }
  .media-tab { font-size: 17px; }
  .tab-icon { width: 24px; font-size: 21px; }
  .media-panel { margin-top: 30px; }
  .audio-entry { padding: 20px 2px 22px; }
  .audio-label { font-size: 15px; }
  .audio-entry audio { height: 52px; }
  .image-panel > p:first-child { font-size: 17px; }
  .video-link { min-height: 56px; font-size: 15px; }
  footer { margin-top: 24px; font-size: 11px; }
  .footer-note { font-size: 14px; }

  .arrival-header { font-size: 12px; letter-spacing: .08em; }
  .arrival-header .brand-heart { font-size: 23px; }
  .arrival-skip, .arrival-music { min-height: 50px; padding: 0 12px; font-size: 12px; }
  .arrival-music-icon { font-size: 15px; }
}

@media (max-width: 360px) {
  .topbar { font-size: 11px; }
  .edition { font-size: 11px; }
  .heart-stage { height: 320px; }
  .heart-button { width: min(280px, 84vw); height: min(280px, 84vw); }
  .keepsakes { padding-left: 14px; padding-right: 14px; }
  .arrival-header { font-size: 10px; }
  .arrival-skip, .arrival-music { min-height: 46px; padding: 0 9px; font-size: 11px; }
}

@media (max-width: 360px) and (min-height: 560px) {
  .arrival-header { align-items: flex-start; }
  .arrival-actions { flex-direction: column; align-items: stretch; gap: 5px; }
  .arrival-skip, .arrival-music { min-height: 40px; }
}

/* Some Android WebViews expose a tablet-sized CSS viewport while still being
   used on a phone. Keep that range touch-readable instead of falling back to
   the compact desktop measurements above. */
@media (min-width: 701px) and (max-width: 1200px) {
  .page { width: 100%; padding: 46px 52px 38px; }
  .topbar { min-height: 66px; padding-bottom: 24px; font-size: 16px; letter-spacing: .14em; }
  .brand { gap: 15px; }
  .brand-heart { font-size: 29px; }
  .edition { font-size: 17px; }
  main { padding: 76px 0 86px; }
  .eyebrow { margin-bottom: 36px; font-size: 16px; letter-spacing: .28em; }
  .heart-stage { width: min(650px, 82vw); height: 470px; overflow: hidden; }
  .orbit { width: min(530px, 76vw); height: 320px; }
  .orbit.second { width: min(485px, 70vw); height: 340px; }
  .orbit::after { width: 7px; height: 7px; box-shadow: 0 0 20px #ffbcd9; }
  .heart-button { width: min(380px, 46vw); height: min(380px, 46vw); padding: 12px; }
  .heart-ripple { width: 220px; height: 220px; }
  .halo { width: 285px; height: 285px; box-shadow: 0 0 160px 64px #fc528f2b; }
  .whisper { margin-top: 18px; font-size: 17px; letter-spacing: .16em; }
  .message { width: min(760px, 88vw); margin-top: 52px; }
  .prelude { margin-bottom: 18px; font-size: 22px; }
  h1 { font-size: clamp(82px, 9vw, 106px); line-height: 1.25; letter-spacing: .14em; }
  .translation { margin: 12px 0 32px; font-size: 28px; }
  .divider { width: 64px; margin-bottom: 32px; }
  .note { font-size: 20px; line-height: 2.1; letter-spacing: .12em; }
  .keepsakes { margin-top: 62px; padding: 42px 34px 34px; }
  .keepsakes-kicker { margin-bottom: 10px; font-size: 13px; }
  .keepsakes-title { margin-bottom: 26px; font-size: 22px; }
  .keepsakes-hint { margin-bottom: 21px; font-size: 14px; }
  .media-tabs { width: min(360px, 70vw); height: 70px; }
  .media-tab { font-size: 20px; }
  .tab-icon { width: 28px; font-size: 25px; }
  .media-panel { margin-top: 34px; }
  .audio-entry { padding: 24px 3px 26px; }
  .audio-label { margin-bottom: 14px; font-size: 18px; }
  .audio-label span { font-size: 15px; }
  .audio-entry audio { height: 62px; }
  .image-panel > p:first-child { margin-bottom: 20px; font-size: 21px; }
  .image-panel .secret-hint { margin-bottom: 26px; padding: 11px 17px; font-size: 16px; }
  .video-link { min-height: 66px; padding: 0 30px; font-size: 18px; }
  .image-panel small { margin-top: 16px; font-size: 12px; }
  footer { margin-top: 30px; font-size: 13px; }
  .footer-note { font-size: 17px; }

  .arrival { padding: 38px 52px 36px; }
  .arrival-header, .arrival-footer { width: 100%; font-size: 16px; letter-spacing: .1em; }
  .arrival-header { min-height: 66px; }
  .arrival-header .brand { gap: 14px; }
  .arrival-header .brand-heart { font-size: 29px; }
  .arrival-actions { gap: 12px; }
  .arrival-skip, .arrival-music { min-height: 64px; padding: 0 24px; font-size: 16px; letter-spacing: .08em; }
  .arrival-music-icon { font-size: 20px; }
  .arrival-story { padding: 24px 0 48px; }
  .arrival-eyebrow { margin-top: 20px; font-size: 15px; letter-spacing: .27em; }
  .arrival-scene { width: min(1080px, 100%); min-height: 320px; max-height: 58svh; }
  .arrival-point-mark { transform: scale(1.8); }
  .arrival-trail { stroke-width: 3; }
  .arrival-tail { stroke-width: 5; }
  .arrival-name { font-size: 38px; }
  .arrival-union-name { font-size: 34px; }
  .arrival-copy { min-height: 190px; }
  .arrival-invitation-lead { margin-bottom: 26px; font-size: 21px; }
  .arrival-start { min-height: 72px; padding: 16px 32px; font-size: 23px; gap: 18px; }
  .arrival-start span:last-child { font-size: 22px; }
  .arrival-start-note { margin-top: 17px; font-size: 14px; }
  .arrival-captions { min-height: 148px; }
  .arrival-caption span { margin-bottom: 18px; font-size: 16px; }
  .arrival-caption strong { font-size: clamp(34px, 4.5vw, 49px); line-height: 1.45; letter-spacing: .1em; }
  .arrival-footer { gap: 20px; font-size: 13px; }
  .arrival-footer > span:last-child { font-size: 17px; }
  .arrival-progress { width: min(300px, 34vw); }
}