@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap");:root{--ink:#2f2630;--muted:#8d7f8d;--accent:#cc5e72;--accent-dark:#a9475b;--paper:#fffaf6;--blush:#f5dfe0;--line:#ead9d5}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 80% 12%,#fff 0 8%,transparent 30%),var(--blush);font-family:DM Mono,monospace}.celebration,.shell{min-height:100vh;display:grid;place-items:center;padding:32px;position:relative;overflow:hidden}.shell:after,.shell:before{content:"✦";position:absolute;color:var(--accent);opacity:.35;font-size:32px}.shell:before{top:14%;left:10%}.shell:after{right:14%;bottom:18%}.card{width:min(100%,520px);background:var(--paper);padding:clamp(38px,8vw,72px);box-shadow:0 28px 80px #a15b6830;border:1px solid #fff;text-align:center}.countdown-label,.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:10px;color:var(--accent)}.eyebrow{margin:0 0 24px}h1{font:500 clamp(47px,9vw,72px)/.98 Playfair Display,serif;margin:0 0 22px;letter-spacing:-.04em}h1 em{color:var(--accent)}.subtitle{color:var(--muted);font-size:12px;line-height:1.8;margin:0 auto 34px;max-width:290px}form{text-align:left}label{display:block;font-size:10px;color:var(--muted);margin-bottom:9px;text-transform:uppercase;letter-spacing:.08em}input{width:100%;border:1px solid var(--line);background:#fff;padding:16px;font:inherit;font-size:13px;outline:none;color:var(--ink)}input:focus{border-color:var(--accent)}button{width:100%;border:0;background:var(--accent);color:#fff;padding:17px;margin-top:12px;font:inherit;font-size:11px;cursor:pointer}button:hover{background:var(--accent-dark)}button span{float:right;font-size:18px;line-height:10px}.error{color:var(--accent-dark);font-size:10px;margin:12px 0 0}.rule{height:1px;background:var(--line);margin:38px 0 24px}.countdown-label{color:var(--muted);margin:0 0 18px}.countdown{display:flex;justify-content:center;gap:clamp(12px,4vw,28px)}.unit strong{display:block;font:500 26px Playfair Display,serif}.unit span{color:var(--muted);font-size:9px}.footer-note{position:absolute;bottom:22px;color:#9d7c82;font-size:10px}.celebration{background:var(--accent);color:#fff;text-align:center}.celebration .eyebrow{color:#ffe4e1}.celebration h1{font-size:clamp(58px,12vw,110px)}.celebration .subtitle,.confetti{color:#ffe4e1}.confetti{font-size:32px;letter-spacing:1.5em;margin-bottom:28px}.popper{position:absolute;font-size:42px;color:#ffe4e1;animation:pop 2.4s ease-out infinite}.popper-one{top:18%;left:18%}.popper-two{right:18%;bottom:20%;animation-delay:1.2s}.confetti{animation:pulse 1.2s ease-in-out infinite}@keyframes pop{0%,to{opacity:0;transform:scale(.4) translateY(20px) rotate(0deg)}25%,70%{opacity:1;transform:scale(1.2) translateY(0) rotate(25deg)}}@keyframes pulse{50%{transform:scale(1.18);opacity:.7}}.countdown-screen{min-height:100vh;display:grid;place-content:center;text-align:center;padding:32px;background:var(--paper)}.countdown-screen h1{font-size:clamp(72px,14vw,150px);margin-bottom:42px}.countdown-large{gap:clamp(22px,7vw,80px)}.countdown-large .unit strong{font-size:clamp(48px,8vw,92px)}.countdown-large .unit span{font-size:11px}.birthday-card{width:min(100%,560px);background:var(--paper);padding:clamp(34px,7vw,64px);text-align:center;box-shadow:0 28px 80px #7d263a45}.birthday-card form{text-align:left}.birthday-card,.birthday-card h1{color:var(--ink)}.birthday-card .eyebrow,.birthday-card h1 em{color:var(--accent-dark)}.birthday-card .subtitle{color:var(--muted)}.celebration{background:var(--blush);color:var(--ink)}.celebration-login{padding:32px}.birthday-card{position:relative;z-index:1}.celebration .eyebrow{color:var(--accent-dark)}.celebration .subtitle{color:var(--muted)}.message-page{min-height:100vh;padding:80px 24px 100px;text-align:center;background:var(--paper);background-image:radial-gradient(circle at 8% 12%,#f5dfe0 0 2px,transparent 3px),radial-gradient(circle at 92% 18%,#f5dfe0 0 2px,transparent 3px);position:relative;overflow:hidden}.message-content{position:relative;z-index:1}.message-page h1{font-size:clamp(56px,10vw,100px);margin-bottom:28px}.message-page h1 em,.message-sparkle{color:var(--accent)}.message-sparkle{font-size:24px;margin-bottom:28px;letter-spacing:.2em}.love-note{max-width:520px;margin:0 auto;color:var(--muted);font:500 15px/2 Playfair Display,serif}.signature{color:var(--accent-dark);font:italic 16px Playfair Display,serif;margin:24px 0 56px}.photo-grid{margin:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px}.photo-slot{min-height:230px;display:grid;place-items:center;background:#f5dfe0;border:8px solid #fff;box-shadow:0 12px 30px #a15b6818;color:#ad7d87;font:italic 16px/1.5 Playfair Display,serif;transform:rotate(-2deg)}.photo-slot:nth-child(2n){transform:rotate(2deg);background:#f8e9e3}.photo-slot span{opacity:.8}.photo-2,.photo-5{min-height:280px}.heart-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.5}.heart-field i{position:absolute;bottom:-30px;color:#e9aeba;font:normal clamp(20px,3vw,34px) Playfair Display,serif;animation:float-heart 14s linear infinite}.heart-field i:first-child{left:7%;animation-delay:0s}.heart-field i:nth-child(2){left:18%;animation-delay:5s}.heart-field i:nth-child(3){left:30%;animation-delay:2s}.heart-field i:nth-child(4){left:43%;animation-delay:8s}.heart-field i:nth-child(5){left:56%;animation-delay:3s}.heart-field i:nth-child(6){left:68%;animation-delay:10s}.heart-field i:nth-child(7){left:80%;animation-delay:6s}.heart-field i:nth-child(8){left:91%;animation-delay:1s}.heart-field i:nth-child(n+9){left:50%;animation-delay:4s}.heart-field i:nth-child(3n){font-size:22px;animation-duration:17s}.heart-field i:nth-child(4n){animation-duration:12s}@keyframes float-heart{0%{opacity:0;transform:translate(0) scale(.8) rotate(-8deg)}12%{opacity:.6}50%{transform:translate(70px,-50vh) scale(1) rotate(8deg)}88%{opacity:.35}to{opacity:0;transform:translate(-55px,-115vh) scale(.9) rotate(-10deg)}}@media (max-width:640px){.photo-grid{grid-template-columns:repeat(2,1fr);gap:12px}.photo-2,.photo-5,.photo-slot{min-height:180px;border-width:5px;font-size:13px}}.heart-field{opacity:.82}.heart-field i{color:#d48799}.heart-field i:nth-child(n+12){left:50%;animation-delay:4s}.heart-field i:nth-child(12n+1){left:8%}.heart-field i:nth-child(12n+2){left:18%}.heart-field i:nth-child(12n+3){left:28%}.heart-field i:nth-child(12n+4){left:38%}.heart-field i:nth-child(12n+5){left:48%}.heart-field i:nth-child(12n+6){left:58%}.heart-field i:nth-child(12n+7){left:68%}.heart-field i:nth-child(12n+8){left:78%}.heart-field i:nth-child(12n+9){left:88%}.heart-field i:nth-child(odd){animation-delay:1.5s}.heart-field i:nth-child(3n){animation-name:float-heart-left}.heart-field i:nth-child(3n+1){animation-name:float-heart-right}.heart-field i:nth-child(5n){animation-name:float-heart-wave}@keyframes float-heart-left{0%{opacity:0;transform:translate(0) rotate(-8deg)}15%{opacity:.8}45%{transform:translate(-110px,-42vh) rotate(-20deg)}75%{transform:translate(80px,-78vh) rotate(12deg)}to{opacity:0;transform:translate(-40px,-115vh) rotate(-18deg)}}@keyframes float-heart-right{0%{opacity:0;transform:translate(0) rotate(8deg)}15%{opacity:.8}45%{transform:translate(120px,-40vh) rotate(20deg)}75%{transform:translate(-70px,-80vh) rotate(-12deg)}to{opacity:0;transform:translate(60px,-115vh) rotate(16deg)}}@keyframes float-heart-wave{0%{opacity:0;transform:translate(0) scale(.8)}15%{opacity:.8}25%{transform:translate(90px,-25vh) scale(1)}50%{transform:translate(-100px,-52vh) scale(.9)}75%{transform:translate(120px,-82vh) scale(1.05)}to{opacity:0;transform:translate(-80px,-115vh) scale(.85)}}.message-content:after,.message-content:before,.message-page:after,.message-page:before,.photo-grid:after,.photo-grid:before{display:none}.message-content{max-width:980px;margin:0 auto}.sticky-notes{display:none}.sticky-note{position:absolute;z-index:3;width:145px;padding:24px 16px;color:#855f68;box-shadow:2px 8px 18px #9d687020;font:italic 16px/1.5 Playfair Display,serif;text-align:left;white-space:pre-line}.sticky-left{left:max(24px,calc(50% - 630px))}.sticky-right{right:max(24px,calc(50% - 630px))}.sticky-peach{background:#f5d7c7}.sticky-pink{background:#f2cfd0}.sticky-yellow{background:#f6e1a9}.sticky-green{background:#dce8c7}body:has(.message-page) .sticky-notes{display:block;position:absolute;inset:0;min-height:2100px;pointer-events:none}@media (max-width:1100px){.sticky-left{left:24px}.sticky-right{right:24px}}@media (max-width:760px){.sticky-notes{display:none!important}}.message-content:after,.message-content:before{position:absolute;z-index:-1;width:132px;padding:20px 14px;color:#855f68;box-shadow:2px 8px 18px #9d687020;font:italic 15px/1.5 Playfair Display,serif;text-align:left;white-space:pre-line}.message-content:before{content:"your smile\nis my favorite\nkind of magic ♡";top:760px;left:-155px;background:#f6e1a9;transform:rotate(5deg)}.message-content:after{content:"lucky me,\nI get to love\nyou ✦";top:980px;right:-155px;background:#dce8c7;transform:rotate(-6deg)}.photo-grid{position:relative}.photo-grid:after,.photo-grid:before{position:absolute;z-index:-1;width:125px;padding:18px 13px;color:#855f68;box-shadow:2px 8px 18px #9d687020;font:italic 14px/1.5 Playfair Display,serif;text-align:left;white-space:pre-line}.photo-grid:before{content:"I love\nyour laugh ♡\n\nso much";background:#f3c9c0;transform:rotate(-8deg)}.photo-grid:after{content:"beautiful\ninside and\nout ✦";background:#f7e3a8;transform:rotate(7deg)}.photo-slot{position:relative}.photo-slot:after,.photo-slot:before{position:absolute;z-index:2;width:100px;padding:14px 10px;color:#855f68;box-shadow:2px 6px 15px #9d687020;font:italic 13px/1.4 Playfair Display,serif;white-space:pre-line}.photo-slot:before{content:"you make\nme smile ♡";top:-42px;left:-68px;background:#dce8c7;transform:rotate(-8deg)}.photo-slot:after{content:"my favorite\nkind of beautiful ✦";right:-72px;bottom:-38px;background:#f1ced3;transform:rotate(7deg)}.photo-slot:nth-child(2):before{content:"so much\nlight in you";background:#f7e3a8;transform:rotate(6deg)}.photo-slot:nth-child(3):after{content:"always\nadorable ♡";background:#f3c9c0;transform:rotate(-6deg)}.invitation-card:after,.invitation-card:before{display:none}@media (max-width:1100px){.message-page:before{left:24px}.message-page:after{right:24px}}@media (max-width:760px){.message-page:after,.message-page:before{position:relative;display:block;top:auto;left:auto;right:auto;width:min(180px,70vw);margin:0 auto 24px}.message-page:after{margin:0 auto 32px}}.invitation-card:after,.invitation-card:before,.photo-grid:after,.photo-grid:before{pointer-events:none}@media (max-width:760px){.invitation-card:after,.invitation-card:before,.photo-grid:after,.photo-grid:before{display:none}}.photo-slot:after,.photo-slot:before{display:none}.photo-grid{width:min(100%,900px);padding:0;border:0;background:transparent;box-shadow:none}.photo-grid:before{top:100px;left:-150px}.photo-grid:after{top:300px;right:-150px}.photo-slot:first-child:before,.photo-slot:nth-child(3):before,.photo-slot:nth-child(5):after{display:block;position:absolute;z-index:2;width:108px;padding:15px 11px;color:#855f68;box-shadow:2px 7px 16px #9d687020;font:italic 14px/1.45 Playfair Display,serif;white-space:pre-line}.photo-slot:first-child:before{content:"your eyes\nare magic ♡";top:20px;left:-160px;background:#f6e1a9;transform:rotate(-7deg)}.photo-slot:nth-child(3):before{content:"the prettiest\npart of my day ✦";top:45px;left:-174px;background:#dce8c7;transform:rotate(6deg)}.photo-slot:nth-child(5):after{content:"you are\nmy favorite ♡";right:-170px;bottom:28px;background:#f1ced3;transform:rotate(-6deg)}@media (max-width:760px){.photo-slot:first-child:before,.photo-slot:nth-child(3):before,.photo-slot:nth-child(5):after{display:none}}.photo-slot img{width:100%;height:100%;min-height:inherit;object-fit:cover;display:block}.photo-slot:has(img:not([style*="display: none"])) span{display:none}.invitation-card{max-width:620px;margin:90px auto 0;padding:clamp(32px,6vw,58px);background:#f8e9e3;border:1px solid #efd2d0;box-shadow:0 18px 50px #a15b6815}.invitation-card h2{margin:0 0 20px;color:var(--ink);font:500 clamp(32px,5vw,52px)/1.12 Playfair Display,serif}.invitation-card .eyebrow{margin-bottom:18px}.invitation-copy{color:var(--muted);font:15px/1.9 Playfair Display,serif}.invitation-copy strong{color:var(--accent-dark);font-weight:600}.invitation-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}.invitation-actions button{width:auto;min-width:170px;margin:0}.invitation-actions .button-soft{background:#fff;color:var(--accent-dark);border:1px solid #e4bfc1}.invitation-actions .button-soft:hover{background:#fff5f2}.response{margin:26px 0 0;color:var(--accent-dark);font:italic 18px Playfair Display,serif}.yes-response{color:#a9475b}.invitation-card>button{width:auto;min-width:210px;margin-top:12px}.invitation-overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#4c263080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fade-in .25s ease-out}.invitation-modal{position:relative;width:min(100%,540px);padding:clamp(38px,7vw,70px) 32px;text-align:center;background:#fffaf6;border:8px solid #f5dfe0;box-shadow:0 25px 80px #4c263050;animation:invitation-pop .35s cubic-bezier(.2,.8,.2,1)}.invitation-modal:after,.invitation-modal:before{content:"✦";position:absolute;color:var(--accent);font-size:26px}.invitation-modal:before{top:15px;left:18px}.invitation-modal:after{right:18px;bottom:15px}.modal-decoration{color:var(--accent);font-size:22px;margin-bottom:22px}.invitation-modal h2{margin:0 0 22px;font:500 clamp(38px,7vw,58px) Playfair Display,serif;color:var(--ink)}.close-invitation{position:absolute;top:8px;right:12px;width:auto;margin:0;padding:0 8px;background:transparent;color:var(--muted);font:28px/1 Arial,sans-serif}.close-invitation:hover{background:transparent;color:var(--accent-dark)}@keyframes invitation-pop{0%{opacity:0;transform:scale(.82) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sticky-note{width:125px;min-height:105px;padding:18px 13px;font-size:14px;line-height:1.45}.sticky-left{left:max(24px,calc(50% - 560px))}.sticky-right{right:max(24px,calc(50% - 560px))}.sticky-left{left:max(24px,calc(50% - 620px))}.sticky-right{right:max(24px,calc(50% - 500px));right:max(24px,calc(50% - 620px))}body:has(.message-page) .sticky-notes{max-height:1850px}body:has(.message-page) .sticky-notes{height:1600px;min-height:0;max-height:none;overflow:hidden}