:root { --ink:#fff8fc; --pink:#ff86bd; --peach:#ffbd9e; --plum:#17051d; --violet:#3a113e; --gold:#ffd377; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; background:var(--plum); color:var(--ink); font-family:"DM Sans",sans-serif; }
body { overflow:hidden; } #app { height:100dvh; isolation:isolate; position:relative; }
#app::before { content:""; pointer-events:none; position:fixed; z-index:-1; inset:-20%; background:radial-gradient(circle at 20% 20%,#7f236d88,transparent 31%),radial-gradient(circle at 78% 70%,#d05b7b77,transparent 31%),linear-gradient(150deg,#130416,#310d3b 55%,#16051d); animation:drift 12s ease-in-out infinite alternate; }
.screen { position:absolute; inset:0; padding:calc(28px + env(safe-area-inset-top)) 26px calc(22px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; opacity:0; visibility:hidden; transform:translateY(20px) scale(.985); transition:opacity .65s ease,transform .65s ease,visibility .65s; overflow:auto; }
.screen.is-active { opacity:1; visibility:visible; transform:none; } .eyebrow { color:#ffc5dc; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; font-weight:700; }
h1,h2 { font-family:"Playfair Display",serif; line-height:1.07; margin:15px 0; letter-spacing:-.045em; } h1 { font-size:clamp(2.8rem,12vw,4.7rem); } h2 { font-size:clamp(2.45rem,10vw,4rem); } em { color:var(--pink); font-weight:600; } p { line-height:1.55; max-width:27rem; }
.sparkles,.final-stars { color:var(--gold); letter-spacing:.3em; font-size:1.4rem; animation:twinkle 2s infinite alternate; }.opening { gap:8px; }.opening h1 { margin:12px 0 0; }.opening p { margin:0 0 15px; color:#f6d8e8; }.hint { font-size:.72rem; margin:9px 0; color:#d9aac6; }
.primary-button { border:0; border-radius:999px; padding:15px 21px; font:700 .9rem "DM Sans",sans-serif; color:#3b102e; background:linear-gradient(100deg,var(--peach),#ff8fc1); box-shadow:0 12px 35px #f75a9c48; cursor:pointer; transition:transform .2s,box-shadow .2s; }.primary-button:hover,.primary-button:focus-visible { transform:translateY(-2px); box-shadow:0 16px 42px #f75a9c6b; }.primary-button span { margin-left:8px; font-size:1.1em; }
.sound-button { position:absolute; top:calc(22px + env(safe-area-inset-top)); right:21px; border:1px solid #ffffff44; background:#ffffff16; color:#fff; width:39px; height:39px; border-radius:50%; cursor:pointer; font-size:1.1rem; }.clock-label { font-family:"Playfair Display",serif; color:#ffc5dc; margin:17px 0 5px; }.countdown { display:flex; align-items:flex-start; justify-content:center; gap:7px; margin:15px 0; }.countdown div { min-width:48px; display:flex; flex-direction:column; }.countdown strong { font-size:clamp(2rem,10vw,3.15rem); letter-spacing:-.08em; }.countdown span { color:#dfaecc; text-transform:uppercase; font-size:.58rem; letter-spacing:.1em; }.countdown i { color:var(--pink); font-size:1.5rem; font-style:normal; padding-top:7px; }.text-button { background:none; border:0; color:#ffd1e3; text-decoration:underline; margin-top:15px; cursor:pointer; font:inherit; font-size:.8rem; }
.midnight-screen { background:linear-gradient(180deg,#07040d,#2b082f); }.time-flip { font-size:clamp(3.7rem,17vw,6rem); font-family:"Playfair Display",serif; color:#f7e4f0; letter-spacing:-.07em; }.time-flip b { font:700 .8rem "DM Sans"; color:#f2a5c8; letter-spacing:.1em; }.midnight-copy { margin:25px 0; }.midnight-copy h2 { font-size:4.5rem; margin:0; color:var(--pink); }.midnight-copy p { margin:5px; color:#dfc5d7; }
.cake-screen h2 { margin-bottom:0; }.cake-screen > p { margin-top:0; }.cake-wrap { height:230px; width:250px; margin:5px auto 18px; position:relative; }.plate { position:absolute; bottom:12px; left:19px; width:212px; height:19px; border-radius:50%; background:#ffc6de; box-shadow:0 4px 0 #ad3f7a; }.cake-bottom,.cake-middle,.cake-top { position:absolute; left:50%; transform:translateX(-50%); border-radius:12px 12px 20px 20px; background:linear-gradient(#ffb9d8 0 25%,#ef629e 26% 100%); box-shadow:inset 0 -9px #cf3c7e; }.cake-bottom { width:183px; height:64px; bottom:28px; }.cake-middle { width:144px; height:54px; bottom:84px; }.cake-top { width:106px; height:46px; bottom:137px; }.cake-bottom::after,.cake-middle::after,.cake-top::after { content:""; position:absolute; inset:12px 6px auto; height:8px; border-radius:50%; background:#fff5fa; }.candle { position:absolute; z-index:2; bottom:180px; width:11px; height:37px; background:repeating-linear-gradient(45deg,#ffe175 0 4px,#ff8eaf 4px 8px); border-radius:4px; }.c1{left:91px}.c2{left:119px;height:44px}.c3{left:148px}.candle span { position:absolute; top:-18px; left:-4px; width:19px; height:22px; background:#ffcc54; border-radius:70% 30% 65% 35%; transform:rotate(45deg); animation:flame .65s infinite alternate; box-shadow:0 0 18px #ffbf3d; }
.memories-screen { justify-content:flex-start; padding-top:calc(39px + env(safe-area-inset-top)); }.memories-screen h2 { margin:9px 0 16px; font-size:clamp(2.2rem,9vw,3.3rem); }.memory-grid { width:min(100%,390px); display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }.memory { position:relative; aspect-ratio:.78; border-radius:18px; overflow:hidden; background:linear-gradient(145deg,#d96096,#562055); box-shadow:0 8px 20px #0003; }.memory:nth-child(2){margin-top:24px}.memory:nth-child(3){margin-top:-24px}.memory img { width:100%;height:100%;object-fit:cover; display:block; }.memory .placeholder { height:100%; display:grid; place-items:center; font:600 3.2rem "Playfair Display"; color:#fff8; background:linear-gradient(145deg,#ff9dc4,#7b326e); }.memory span { position:absolute; left:0;right:0;bottom:0; padding:19px 9px 8px; font-size:.7rem; background:linear-gradient(transparent,#17051dbd); }
.message-screen { align-items:center; }.letter-mark { color:#ffa6ca; font:6rem "Playfair Display"; height:62px; }.message { font:italic 1.15rem/1.7 "Playfair Display",serif; margin:10px 0 15px; }.signature { color:#ffbdd9; font-family:"Playfair Display",serif; }.final-screen { background:radial-gradient(circle at center,#862159 0,transparent 48%),#210520; }.final-screen h2 { margin:13px 0; }.final-screen h2 span { color:var(--gold); }.final-screen p { color:#f3d0e3; }.final-stars { margin-bottom:14px; } #fireworks { pointer-events:none; position:fixed; z-index:10; inset:0; width:100%;height:100%; }
.heart { position:fixed; z-index:8; top:-30px; color:#ff9fc7; font-size:20px; animation:fall linear forwards; pointer-events:none; }
@keyframes drift{to{transform:translate(4%,3%) rotate(8deg)}} @keyframes twinkle{to{transform:scale(1.13);opacity:.55}} @keyframes flame{to{transform:rotate(45deg) scale(.77,1.1)}} @keyframes fall{to{transform:translate(var(--drift),110vh) rotate(420deg);opacity:0}}
@media (min-width:600px){ #app{max-width:460px;margin:auto;box-shadow:0 0 80px #0008}.screen{border-inline:1px solid #ffffff13} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;} }