@import"https://fonts.googleapis.com/css2?family=Estedad:wght@300;400;500;600;700;800&family=Lalezar&display=swap";:root{color-scheme:dark;font-family:Estedad,sans-serif;font-synthesis:none}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}button{font:inherit}.page{--wine: #260d18;--wine-deep: #12070d;--rose: #dca0a8;--cream: #f8eddd;--gold: #d9b66f;min-height:100svh;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;padding:38px 20px 30px;color:var(--cream);background:radial-gradient(circle at 50% 38%,rgba(120,48,70,.5),transparent 36%),linear-gradient(145deg,#32101f 0%,var(--wine) 42%,var(--wine-deep) 100%)}.grain{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;opacity:.07;pointer-events:none;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='.8'/%3E%3C/svg%3E")}.aurora{position:absolute;z-index:-2;width:46vw;height:46vw;border-radius:50%;filter:blur(80px);opacity:.17;animation:drift 12s ease-in-out infinite alternate}.aurora--one{top:-25%;right:-10%;background:#d47d91}.aurora--two{bottom:-30%;left:-10%;background:#d9b66f;animation-delay:-5s}.star{position:absolute;z-index:-1;border-radius:50%;background:#fff2d3;box-shadow:0 0 10px #f4cc7a;animation:twinkle 3.2s ease-in-out infinite}.mote{position:absolute;z-index:-1;bottom:-20px;width:4px;height:4px;border:1px solid rgba(232,194,118,.7);transform:rotate(45deg);animation:float-up linear infinite}.invitation{width:min(100%,620px);position:relative;padding:clamp(34px,6vw,58px) clamp(26px,7vw,70px) clamp(28px,5vw,46px);border:1px solid rgba(224,190,126,.26);border-radius:32px 10px;text-align:center;background:linear-gradient(135deg,#ffffff13,#ffffff04),#21081273;box-shadow:0 40px 100px #00000075,inset 0 1px #ffffff17;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);animation:reveal 1.1s cubic-bezier(.16,1,.3,1) both}.invitation:before{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;pointer-events:none;border:1px solid rgba(224,190,126,.1);border-radius:25px 7px}.corner{position:absolute;width:72px;height:72px;pointer-events:none}.corner:before,.corner:after{content:"";position:absolute;border-color:var(--gold);opacity:.52}.corner--top-right{top:18px;right:18px}.corner--top-right:before{top:0;right:0;bottom:0;left:0;border-top:1px solid;border-right:1px solid;border-radius:0 10px 0 0}.corner--top-right:after{top:9px;right:9px;bottom:9px;left:9px;border-top:1px solid;border-right:1px solid}.corner--bottom-left{bottom:18px;left:18px;transform:rotate(180deg)}.corner--bottom-left:before{top:0;right:0;bottom:0;left:0;border-top:1px solid;border-right:1px solid;border-radius:0 10px 0 0}.corner--bottom-left:after{top:9px;right:9px;bottom:9px;left:9px;border-top:1px solid;border-right:1px solid}.kicker{display:block;margin-bottom:10px;color:var(--gold);font-size:11px;font-weight:500;letter-spacing:.12em}.names{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,28px);font-family:Lalezar,cursive;font-size:clamp(42px,10vw,70px);line-height:1;text-shadow:0 8px 30px rgba(0,0,0,.35)}.ampersand{display:inline-grid;place-items:center;width:34px;height:34px;color:var(--rose);font-family:Estedad,sans-serif;font-size:17px;font-weight:300;border:1px solid rgba(220,160,168,.44);border-radius:50%;animation:heartbeat 2.8s ease-in-out infinite}.ornament{display:flex;align-items:center;justify-content:center;gap:9px;width:190px;margin:15px auto 21px;color:var(--gold)}.ornament span{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.ornament span:last-child{transform:rotate(180deg)}.ornament b{font-size:10px}.lead{margin:0 0 14px;color:#f8edddad;font-size:clamp(12px,3.5vw,14px);font-weight:300}.hero-count{display:flex;align-items:center;justify-content:center;gap:18px;direction:ltr}.day-number{color:transparent;font-size:clamp(82px,20vw,128px);font-weight:800;line-height:.95;letter-spacing:-.07em;background:linear-gradient(115deg,#fff8e9 10%,#d9b66f 50%,#fff4d5 82%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 10px 24px rgba(218,174,94,.18));animation:gold-shine 5s linear infinite}.day-copy{display:flex;flex-direction:column;align-items:flex-start;direction:rtl;text-align:right}.day-copy strong{color:var(--rose);font-size:23px}.day-copy span{width:64px;color:#f8eddd75;font-size:10px;line-height:1.8}.time-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;width:min(100%,390px);margin:22px auto 25px}.time-unit{display:flex;flex-direction:column;gap:3px}.time-unit b{font-size:clamp(23px,6vw,31px);font-weight:600;font-variant-numeric:tabular-nums}.time-unit span{color:#f8eddd73;font-size:10px}.separator{padding:0 9px;color:var(--gold);opacity:.5;font-size:23px}.journey{width:min(100%,390px);margin:auto}.journey-meta{display:flex;justify-content:space-between;margin-bottom:8px;color:#f8eddd70;font-size:9px}.journey-track{height:2px;border-radius:10px;background:#ffffff1a}.journey-fill{position:relative;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ad6574,var(--gold));transition:width 1s ease}.journey-fill i{position:absolute;top:50%;right:-8px;display:grid;place-items:center;width:17px;height:17px;color:#f4cf8b;font-size:10px;font-style:normal;transform:translateY(-50%);filter:drop-shadow(0 0 7px rgba(244,207,139,.8))}.footer{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-top:30px;padding-top:22px;border-top:1px solid rgba(224,190,126,.14)}.date{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.date span{color:var(--rose);font-size:10px}.date strong{font-size:14px;font-weight:500}.note-button{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;color:var(--cream);border:1px solid rgba(224,190,126,.26);border-radius:999px;outline:none;background:#ffffff0a;cursor:pointer;transition:.3s ease}.note-button span{font-size:10px}.note-button i{color:var(--rose);font-size:17px;font-style:normal}.note-button:hover,.note-button:focus-visible{border-color:#e0be7ea6;background:#e0be7e17;transform:translateY(-2px)}.signature{position:absolute;bottom:13px;margin:0;color:#f8eddd45;font-size:8px;letter-spacing:.08em}.after{display:flex;flex-direction:column;align-items:center;padding:24px 0 14px}.rings{color:var(--gold);font-size:86px;line-height:1}.after h1{margin:6px 0 12px;font-family:Lalezar,cursive;font-size:clamp(32px,8vw,48px);font-weight:400}.after p{margin:0 0 28px;color:#f8eddd8c;font-size:13px}.note-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#0a0206c2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.love-note{width:min(100%,420px);position:relative;padding:50px 42px 38px;color:#4b2330;border-radius:7px;text-align:center;background:#f3e7d5;box-shadow:0 35px 90px #0000008c;transform:rotate(-1deg)}.love-note:before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;border:1px solid rgba(117,68,78,.18);pointer-events:none}.close{position:absolute;z-index:1;top:14px;left:16px;width:32px;height:32px;color:#6e3c49;border:0;border-radius:50%;background:transparent;cursor:pointer;font-size:26px}.note-mark{color:#9e5363;font-size:26px}.love-note p{margin:12px 0;color:#8a5460;font-size:13px}.love-note h2{margin:0;font-family:Lalezar,cursive;font-size:clamp(24px,7vw,34px);font-weight:400;line-height:1.8}.note-rule{width:50px;height:1px;margin:20px auto 13px;background:#b88c65}.note-sign{font-family:Lalezar,cursive;font-size:25px}.note-enter-active,.note-leave-active{transition:opacity .35s ease}.note-enter-active .love-note,.note-leave-active .love-note{transition:transform .35s cubic-bezier(.16,1,.3,1)}.note-enter-from,.note-leave-to{opacity:0}.note-enter-from .love-note,.note-leave-to .love-note{transform:translateY(25px) rotate(-3deg) scale(.95)}@keyframes reveal{0%{opacity:0;transform:translateY(28px) scale(.97)}}@keyframes twinkle{0%,to{opacity:.12;transform:scale(.7)}50%{opacity:.85;transform:scale(1.35)}}@keyframes float-up{0%{opacity:0;transform:translateY(0) rotate(45deg)}15%{opacity:.45}85%{opacity:.4}to{opacity:0;transform:translateY(-110vh) rotate(225deg)}}@keyframes heartbeat{0%,to{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(1)}}@keyframes gold-shine{to{background-position:-200% center}}@keyframes drift{to{transform:translate(8%,10%) scale(1.12)}}@media (max-width: 540px){.page{align-items:center;padding:18px 14px 28px}.invitation{padding:35px 23px 29px;border-radius:25px 8px}.corner{width:52px;height:52px}.names{gap:13px}.ampersand{width:29px;height:29px;font-size:14px}.ornament{margin-bottom:17px}.hero-count{gap:12px}.day-copy strong{font-size:19px}.time-grid{margin:17px auto 22px}.footer{margin-top:25px}.signature{bottom:8px}}@media (max-height: 720px) and (min-width: 541px){.page{padding-block:18px}.invitation{padding-block:27px 24px}.ornament{margin-block:10px 13px}.day-number{font-size:88px}.time-grid{margin-block:14px 17px}.footer{margin-top:19px;padding-top:16px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
