@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#130a10;color:#fff;font-family:'DM Sans',sans-serif;overflow:hidden}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 70% 20%,#5d263b55,transparent 35%),radial-gradient(circle at 20% 80%,#a34d6a35,transparent 38%),linear-gradient(160deg,#1d0d17,#0d090c);z-index:-2}.noise{position:fixed;inset:0;opacity:.05;pointer-events:none;z-index:10;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 22px 58px;opacity:0;transform:translateY(28px) scale(.98);pointer-events:none;transition:.75s cubic-bezier(.2,.8,.2,1)}.screen.active{opacity:1;transform:none;pointer-events:auto}.photo{position:relative;overflow:hidden;box-shadow:0 25px 80px #0008}.photo img{width:100%;height:100%;object-fit:cover;display:block}.hero{width:min(72vw,330px);height:min(52vh,460px);border-radius:170px 170px 28px 28px;border:1px solid #ffffff26}.hero img{object-position:center 28%}.halo{position:absolute;width:370px;height:370px;border:1px solid #d990aa33;border-radius:50%;top:7%;animation:pulse 4s ease-in-out infinite}.copy{text-align:center;max-width:520px;margin-top:-35px;position:relative;z-index:2}.eyebrow{font-size:10px;letter-spacing:.24em;font-weight:700;color:#e9a9c0}.copy h1,.copy h2,.proposal h1,.celebration h1{font-family:'Playfair Display',serif;margin:10px 0 8px;line-height:.98;letter-spacing:-.03em}.copy h1{font-size:clamp(38px,9vw,62px)}.copy h2{font-size:clamp(35px,8vw,55px)}em{color:#f3a6c0;font-weight:700}.copy p,.proposal p,.celebration p{color:#d8cbd1;line-height:1.55;font-size:14px;margin:10px auto 18px;max-width:430px}.primary,.yes,.ghost{border:0;border-radius:999px;padding:14px 22px;font:700 13px 'DM Sans';cursor:pointer;transition:.25s}.primary,.yes{background:linear-gradient(135deg,#ffb5cd,#f06e9a);color:#30101d;box-shadow:0 10px 35px #e85b8c44}.primary:active,.yes:active{transform:scale(.96)}.polaroids{position:relative;width:min(88vw,410px);height:45vh}.card{position:absolute;margin:0;background:#f9f0f3;padding:8px 8px 30px;color:#3b1724;box-shadow:0 20px 60px #0009;border-radius:4px;width:56%;animation:float 4s ease-in-out infinite}.card img{width:100%;height:34vh;object-fit:cover}.card figcaption{font-family:'Playfair Display';font-style:italic;text-align:center;font-size:13px;padding-top:7px}.c1{left:2%;top:3%;transform:rotate(-7deg)}.c2{right:1%;top:9%;transform:rotate(7deg);animation-delay:-2s}.lower{margin-top:4px}.tiny-baby{position:absolute;top:7%;right:7%;background:#fff0f5;color:#431828;border-radius:22px;padding:8px 11px;font-size:24px;transform:rotate(7deg);box-shadow:0 12px 30px #0005;animation:bob 2.5s infinite}.tiny-baby span{display:block;font-size:8px;font-weight:700;letter-spacing:.06em}.ring{width:min(62vw,290px);height:min(43vh,390px);border-radius:50% 50% 45% 45%;border:1px solid #ffb5cd44}.ring img{object-position:center 30%}.orbit{position:absolute;top:50%;left:50%;font-size:26px;animation:orbit 6s linear infinite}.finalcopy{margin-top:16px}.proposal{text-align:center}.mini-photo{width:128px;height:128px;border-radius:50%;overflow:hidden;border:3px solid #eaa2ba;box-shadow:0 0 0 8px #ffffff0a,0 20px 50px #0008;margin-bottom:22px}.mini-photo img{width:100%;height:100%;object-fit:cover}.proposal h1{font-size:clamp(58px,15vw,92px);margin:12px 0}.actions{display:flex;gap:10px;align-items:center;justify-content:center;min-height:58px}.yes{font-size:15px;padding:17px 25px}.no{border:1px solid #ffffff22;background:#ffffff0c;color:#bcaeb4;border-radius:999px;padding:12px 18px;font-size:12px;position:relative;transition:.2s}.proposal small{margin-top:15px;color:#7f6d75;font-size:9px}.sparkle{font-size:35px;color:#f7c8d8;animation:spin 5s linear infinite}.celebration{text-align:center}.celebration .small{height:280px;width:210px;margin-bottom:22px}.celebration h1{font-size:48px;color:#f5b0c7}.seal{margin:15px auto;border:1px solid #f1a6bf66;width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Playfair Display';font-size:30px;color:#f6bfd2;transform:rotate(-7deg)}.seal span{font:8px 'DM Sans';letter-spacing:.1em;text-transform:uppercase}.ghost{margin-top:20px;background:transparent;border:1px solid #ffffff24;color:#d8cbd1}.bigheart{position:absolute;font-size:70vw;color:#c23f6a10;animation:pulse 3s infinite}.progress{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:20}.progress i{display:block;width:20px;height:2px;background:#ffffff1c;border-radius:2px;transition:.4s}.progress i.on{background:#f3a6c0;width:34px}#hearts span{position:fixed;bottom:-40px;z-index:30;pointer-events:none;animation:rise var(--d) ease-in forwards;font-size:var(--s);opacity:.85}
@keyframes pulse{50%{transform:scale(1.07);opacity:.65}}@keyframes float{50%{margin-top:-8px}}@keyframes bob{50%{transform:rotate(2deg) translateY(-8px)}}@keyframes orbit{from{transform:rotate(0deg) translateX(170px) rotate(0)}to{transform:rotate(360deg) translateX(170px) rotate(-360deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-115vh) rotate(25deg);opacity:0}}
@media(max-height:700px){.hero{height:330px;width:230px}.copy{margin-top:-25px}.copy h1{font-size:36px}.copy p{font-size:12px;margin:7px auto 12px}.polaroids{height:330px}.card img{height:250px}.tiny-baby{top:3%}.ring{height:300px;width:220px}.proposal h1{font-size:58px}.mini-photo{width:100px;height:100px;margin-bottom:10px}}
@media(min-width:700px){.screen[data-screen="0"],.screen[data-screen="2"]{flex-direction:row;gap:60px}.screen[data-screen="0"] .copy,.screen[data-screen="2"] .copy{margin:0;text-align:left}.hero{width:340px;height:520px}.ring{width:330px;height:470px}.tiny-baby{right:14%}}