:root{--primary:#1f4e8c;--primary-dark:#143a6b;--paper:#fbf8f3;--ink:#2b3a55;--soft:#6f86ab;--fd:'Great Vibes',cursive;--fb:'Cormorant Garamond',serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:auto}
body{font-family:var(--fb);color:var(--ink);background:#e9eef6;font-size:18px;line-height:1.6}
body.locked{overflow:hidden}
#app{max-width:480px;margin:0 auto;background-color:var(--paper);background-image:var(--bgimg,none);background-size:100% auto;background-repeat:repeat-y;min-height:100vh;position:relative;overflow:hidden;box-shadow:0 0 40px rgba(20,58,107,.15)}
.sec{padding:72px 28px;text-align:center;position:relative}
.sec>*{position:relative;z-index:1}
h1,h2{font-family:var(--fd);font-weight:400;color:var(--primary)}
h1{font-size:64px;line-height:1.05}h2{font-size:42px;margin-bottom:14px}
h3{font-weight:600;color:var(--primary);font-size:22px}
p{margin:8px 0}.soft{color:var(--soft)}
.orn{position:absolute;width:150px;pointer-events:none;z-index:0}
.orn.tl{top:0;left:0}.orn.br{bottom:0;right:0}
.divider{display:block;margin:20px auto;max-width:200px}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;background-size:cover;background-position:center}
.hero .amp{font-family:var(--fd);font-size:34px;color:var(--soft)}
.count{display:flex;justify-content:center;gap:12px;margin-top:26px}
.count div{min-width:64px;padding:10px 4px;border:1px solid var(--soft);border-radius:8px}
.count b{display:block;font-size:26px;color:var(--primary)}.count span{font-size:13px;color:var(--soft)}
.people{display:grid;gap:36px}
.avatar{width:170px;height:170px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;background:linear-gradient(135deg,#c9d8ee,#e9eef6);border:4px solid #fff;box-shadow:0 6px 20px rgba(20,58,107,.2)}
.card{background:#fff;border:1px solid #dfe7f3;border-radius:14px;padding:26px 20px;margin:18px 0;box-shadow:0 6px 24px rgba(20,58,107,.08)}
.date{font-size:20px;margin:6px 0}
iframe{width:100%;height:220px;border:0;border-radius:10px;margin-top:14px}
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:999px;padding:10px 26px;font:600 17px var(--fb);cursor:pointer;text-decoration:none;margin-top:12px;transition:background .2s,transform .2s}
.btn:hover{background:var(--primary-dark)}.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.slider{position:relative;aspect-ratio:3/4;max-width:340px;margin:0 auto;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#c9d8ee,#e9eef6);box-shadow:0 10px 30px rgba(20,58,107,.25)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s,transform 5s}
.slider img.on{opacity:1;transform:scale(1)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.dots i{width:8px;height:8px;border-radius:50%;background:#c3d0e6;cursor:pointer;transition:all .3s}.dots i.on{background:var(--primary);width:22px;border-radius:4px}
.acct b{font-size:26px;letter-spacing:1px;display:block;color:var(--primary)}
#cover{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,var(--primary-dark),var(--primary)) center/cover;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
#cover.open{transform:translateY(-100%)}
#cover .box{background:var(--paper);border-radius:12px;padding:40px 30px;text-align:center;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:rise 1.2s both}
#cover .guest{font-size:22px;font-weight:600;color:var(--primary)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s,transform .9s}
.rv.in{opacity:1;transform:none}.rv.l{transform:translateX(-30px)}.rv.r{transform:translateX(30px)}.rv.l.in,.rv.r.in{transform:none}
#fab{position:fixed;right:14px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:10px}
#fab button{width:44px;height:44px;border-radius:50%;border:0;background:var(--primary);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3)}
#fab button.on{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
button:focus-visible,a:focus-visible{outline:3px solid var(--soft);outline-offset:2px}
@media(min-width:900px){body{background:#dbe4f2}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

.hero{padding-top:48px}
.arch{display:block;width:230px;aspect-ratio:3/4;margin:0 auto 22px;object-fit:cover;border-radius:999px 999px 14px 14px;border:5px solid #fff;box-shadow:0 12px 32px rgba(20,58,107,.28)}

.leafband{display:flex;margin:-72px -28px 12px;pointer-events:none}
.leafband.r{justify-content:flex-end}
.leafband img{display:block;height:auto;max-width:none}
.leafband.flip img{transform:scaleX(-1)}
.hero .leafband{margin-top:-48px}
.leafband.bottom{margin:36px -28px -72px}