:root {
  --ink: #fff8ef;
  --plum: #241332;
  --rose: #e85d83;
  --gold: #ffc96b;
  --sky: #86e0df;
  --screen: 100vh;
}

@supports (height: 100dvh) { :root { --screen: 100dvh; } }
* { box-sizing: border-box; }
html { background: var(--plum); scroll-behavior: smooth; }
body { margin: 0; min-width: 0; overflow-x: hidden; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; }
button { font: inherit; }

.intro { position: fixed; z-index: 10; inset: 0; min-height: var(--screen); display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 22% 14%, #713a6b 0, transparent 26%), radial-gradient(circle at 78% 84%, #c55d61 0, transparent 31%), linear-gradient(135deg, #1d102b, #43204b 52%, #753450); transition: opacity .9s ease, visibility .9s ease; }
.intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro::before { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 28px; pointer-events: none; }
.intro-card { position: relative; z-index: 1; display: grid; place-items: center; animation: rise .9s ease-out both; }
.eyebrow, .tap-note { margin: 0; font: 600 clamp(.68rem, 1.8vw, .84rem)/1.4 Arial, sans-serif; letter-spacing: .23em; text-transform: uppercase; color: #ffd99a; }
.intro h1 { margin: 14px 0 8px; font-size: clamp(4rem, 15vw, 9rem); line-height: .9; letter-spacing: -.07em; text-shadow: 0 8px 36px rgba(0,0,0,.26); }
.intro-copy { max-width: 340px; margin: 0 auto 30px; font-size: clamp(1rem, 3.5vw, 1.25rem); line-height: 1.55; color: rgba(255,248,239,.85); }
.play-button { display: grid; place-items: center; width: clamp(104px, 20vw, 142px); height: clamp(104px, 20vw, 142px); padding: 0; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; color: #32172f; background: #fff8ef; box-shadow: 0 16px 38px rgba(0,0,0,.23), 0 0 0 14px rgba(255,255,255,.08); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.play-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 46px rgba(0,0,0,.3); }.play-button:focus-visible,.sound-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.play-icon { display: grid; place-items: center; width: clamp(76px, 14vw, 100px); height: clamp(76px, 14vw, 100px); border-radius: 50%; background: linear-gradient(135deg, #f2a05e, #d94979); }.play-icon::after { content: ''; margin-left: 7px; border-left: clamp(22px, 4vw, 30px) solid white; border-top: clamp(14px, 2.5vw, 19px) solid transparent; border-bottom: clamp(14px, 2.5vw, 19px) solid transparent; }
.tap-note { margin-top: 15px; color: rgba(255,255,255,.59); font-size: .62rem; }
.ambient-orb { position: absolute; width: 34vmax; height: 34vmax; filter: blur(5px); border-radius: 50%; opacity: .35; animation: drift 9s ease-in-out infinite alternate; }.orb-one { top: -13vmax; left: -8vmax; background: #f7a55c; }.orb-two { bottom: -17vmax; right: -10vmax; background: #f25f8b; animation-delay: -3s; }
.intro-stars, .intro-stars::before, .intro-stars::after { position: absolute; inset: 0; content: ''; background-image: radial-gradient(#fff 1px, transparent 1.7px), radial-gradient(#ffe09c 1px, transparent 1.7px); background-size: 83px 83px, 137px 137px; background-position: 14px 22px, 38px 56px; opacity: .5; animation: twinkle 3.5s ease-in-out infinite alternate; }
.intro-stars::before { transform: rotate(23deg) scale(1.2); opacity: .28; }.intro-stars::after { transform: rotate(-17deg) scale(.82); opacity: .23; }

.presentation { height: var(--screen); overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; overscroll-behavior-y: contain; opacity: 0; transition: opacity .8s ease .2s; }.presentation.is-visible { opacity: 1; }
.letter-screen { position: relative; isolation: isolate; width: 100%; min-height: var(--screen); height: var(--screen); display: grid; place-items: center; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: var(--bg, #251434); }
.letter-screen::before { content: ''; position: absolute; z-index: -2; inset: -20%; background: radial-gradient(circle at var(--glow-x, 75%) var(--glow-y, 20%), var(--glow, #d85a86) 0, transparent 31%), radial-gradient(circle at 15% 84%, #40296d 0, transparent 32%), linear-gradient(140deg, var(--bg), #181127); }.letter-screen::after { content: ''; position: absolute; z-index: -1; inset: 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 26px; pointer-events: none; }
.word-start::after { inset: 9px; border-color: rgba(255,207,121,.56); box-shadow: inset 0 0 44px rgba(255,183,91,.1); }
.sparkles { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(#fff 1px, transparent 1.7px), radial-gradient(#ffdc90 1.3px, transparent 2px); background-size: 76px 76px, 129px 129px; background-position: 21px 43px, 52px 11px; opacity: .3; animation: glitter 6s linear infinite; }
.letter-wrap { position: relative; width: min(82vw, 74vh); height: min(82vw, 74vh); display: grid; place-items: center; transform: scale(.86); opacity: .15; filter: blur(8px); transition: transform 1s cubic-bezier(.18,.9,.25,1), opacity .8s ease, filter .8s ease; }.letter-screen.is-active .letter-wrap { transform: scale(1); opacity: 1; filter: blur(0); }
.photo-letter { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 18px 25px rgba(0,0,0,.28)); }
.photo-letter text { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 1160px; font-weight: 900; text-anchor: middle; dominant-baseline: central; }
.photo-letter .letter-stroke { fill: none; stroke: rgba(255,246,224,.96); stroke-width: 9px; stroke-linejoin: round; paint-order: stroke fill; }
.caption { position: absolute; bottom: clamp(28px, 7vh, 64px); left: 20px; right: 20px; z-index: 2; text-align: center; font: 600 .65rem/1 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,249,237,.65); opacity: 0; transform: translateY(10px); transition: opacity .6s ease .25s, transform .6s ease .25s; }.is-active .caption { opacity: 1; transform: translateY(0); }
.sound-button { position: fixed; z-index: 8; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; background: rgba(28,13,38,.56); backdrop-filter: blur(10px); color: var(--ink); cursor: pointer; font: 700 .7rem/1 Arial, sans-serif; letter-spacing: .06em; }.sound-button.is-muted { opacity: .7; }.sound-button.is-muted span:first-child { text-decoration: line-through; }
.final-message { position: absolute; z-index: 3; width: min(88%, 650px); top: 65%; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .8s ease .5s, transform .8s ease .5s; }.is-active .final-message { opacity: 1; transform: none; }.final-message h2 { margin: 0; font-size: clamp(1.35rem, 5vw, 2.3rem); }.final-message p { margin: 10px auto 0; max-width: 480px; font-size: clamp(.85rem, 2.8vw, 1.05rem); line-height: 1.55; color: rgba(255,248,239,.84); }
.finale-screen .final-message { top: 50%; transform: translateY(-40%); }.finale-screen.is-active .final-message { transform: translateY(-50%); }
.finale-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }.confetti { position: absolute; top: -8%; width: 8px; height: 15px; border-radius: 3px; background: var(--c); animation: fall var(--d) linear var(--delay) infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }@keyframes drift { to { transform: translate(9vmax, 7vmax) scale(1.15); } }@keyframes twinkle { to { opacity: .7; transform: scale(1.04); } }@keyframes glitter { to { background-position: 97px 125px, -70px 178px; } }@keyframes fall { to { transform: translate3d(var(--x), 120vh, 0) rotate(660deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }
@media (max-width: 480px) { .letter-wrap { width: min(89vw, 65vh); height: min(89vw, 65vh); }.final-message { top: 67%; }.letter-screen::after { inset: 8px; border-radius: 18px; } }