*{box-sizing:border-box}html,body{margin:0;min-width:280px}body{font-family:Arial,sans-serif;background:#e9e6df}
.invitation{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:900px}
.wrap{position:relative;z-index:2;width:min(100%,700px);min-height:900px;margin:auto;display:flex;flex-direction:column;padding:40px clamp(18px,5vw,54px)}
.eyebrow{font:700 11px/1.4 Arial,sans-serif;letter-spacing:.25em;text-transform:uppercase}
h1{font:normal clamp(43px,9vw,76px)/.98 Georgia,serif;letter-spacing:-.045em;overflow-wrap:anywhere;margin:0}
.message{font:normal clamp(17px,2.6vw,21px)/1.42 Georgia,serif;overflow-wrap:anywhere}
.details{margin-top:auto;position:relative;z-index:2}.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px}.facts>div{min-width:0}.facts span{display:block;font:700 10px Arial,sans-serif;letter-spacing:.18em;margin-bottom:8px}.facts strong{display:block;font:normal 19px/1.25 Georgia,serif;overflow-wrap:anywhere}.facts small{display:block;font:14px/1.4 Arial,sans-serif;margin-top:5px;overflow-wrap:anywhere}.dress{font:15px/1.4 Georgia,serif;overflow-wrap:anywhere}.rsvp{font:700 11px Arial,sans-serif;letter-spacing:.18em;text-align:center;padding-top:15px;border-top:1px solid currentColor}
@media(max-width:420px){.wrap{padding:28px 18px}.facts strong{font-size:17px}.facts small{font-size:13px}h1{font-size:clamp(40px,12vw,54px)}}
@media(max-width:330px){.facts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.invitation{background:#081a38 url("/templates/under-the-same-stars/creator-asset?path=assets%2Fart.png&v=1") center/cover;color:#f6f2f4;border:8px solid #0c1730;outline:1px solid #c9c9d5;outline-offset:-17px}.wrap{text-align:center;padding-top:32px}.eyebrow{color:#dbd6eb;margin:0}.sky{position:relative;height:300px;margin:4px auto 18px;width:min(100%,440px)}.star{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 11px 4px #d5c6fb;animation:twinkle 3s ease-in-out infinite alternate}.star:nth-child(1){left:12%;top:50%}.star:nth-child(2){left:30%;top:26%;animation-delay:.5s}.star:nth-child(3){left:50%;top:47%;animation-delay:1s}.star:nth-child(4){left:72%;top:22%;animation-delay:1.5s}.star:nth-child(5){left:88%;top:53%;animation-delay:2s}.line{position:absolute;height:1px;background:#e9e6ff6e;transform-origin:left;animation:draw 2.8s ease-out both}.l1{left:12%;top:50%;width:29%;transform:rotate(-31deg)}.l2{left:30%;top:26%;width:29%;transform:rotate(31deg);animation-delay:.5s}.l3{left:50%;top:47%;width:33%;transform:rotate(-29deg);animation-delay:1s}.l4{left:72%;top:22%;width:28%;transform:rotate(34deg);animation-delay:1.5s}.intro{animation:rise 1.2s 1.4s both}.intro h1{font-size:clamp(43px,8vw,70px);text-transform:uppercase}.message{color:#ddd5ec;margin:16px auto}.details{background:#0a1632b8;border:1px solid #c9bfe055;padding:18px 24px 6px;backdrop-filter:blur(4px)}.facts{text-align:left}.facts span{color:#d0c2e6}.dress{margin:15px 0}.rsvp{margin:0}@keyframes twinkle{from{opacity:.3;transform:scale(.7)}to{opacity:1;transform:scale(1.3)}}@keyframes draw{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@media(max-width:420px){.sky{height:260px}.details{padding:15px}.intro h1{font-size:clamp(40px,11vw,54px)}}