:root{
  --cream:#fffaf7; --blush:#f8dce5; --blush-soft:#fdeff3; --rose:#c45b7a; --rose-dark:#a8476a; --gold:#c9a45c;
  --deep:#77384e; --text:#49343b; --muted:#866c74; --line:#f0d9e0; --white:#fff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:18px; --radius:24px; --btn-h:54px; --shadow:0 12px 34px rgba(119,56,78,.12); --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);font-family:var(--serif);line-height:1.75;text-align:center;overflow-x:hidden;min-height:100vh;
  background:radial-gradient(130% 55% at 50% 0%,var(--blush-soft),var(--cream) 65%) fixed,var(--cream)}
main{width:100%;max-width:34rem;margin:0 auto}
.screen{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(30px + env(safe-area-inset-top,0px)) var(--gutter) calc(36px + env(safe-area-inset-bottom,0px));animation:fade .6s var(--ease) both}
.hidden{display:none!important}
p{margin:0 0 14px;font-size:1.04rem}
h1,h2{margin:4px 0 12px;font-weight:400;color:var(--deep);line-height:1.2}
h1{font-size:clamp(2.2rem,10vw,3rem)} h2{font-size:clamp(1.6rem,7vw,2.2rem)} h2.big{font-size:clamp(2.1rem,10vw,3rem)}
.eyebrow{margin:0 0 6px;font-family:var(--sans);font-size:.68rem;letter-spacing:.28em;color:var(--gold);font-weight:600}
.lead{max-width:27rem;font-size:1.08rem;color:var(--text)}
.orn{position:relative;height:14px;width:120px;margin:4px auto 18px}
.orn::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.orn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--white);border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg)}

.paper{width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;box-shadow:var(--shadow)}
.hint{display:block;margin-top:20px;text-align:left;font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--muted)}
.field{position:relative;margin-top:8px}
.field input{width:100%;height:var(--btn-h);padding:0 74px 0 20px;font:inherit;font-size:1rem;letter-spacing:.12em;color:var(--text);background:var(--cream);border:1px solid var(--line);border-radius:999px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{letter-spacing:.02em;color:#b79ca6}
.field input:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(196,91,122,.15)}
.toggle{position:absolute;right:8px;top:8px;height:calc(var(--btn-h) - 16px);padding:0 14px;border:0;border-radius:999px;background:var(--blush-soft);color:var(--rose-dark);font-family:var(--sans);font-size:.78rem;font-weight:600;cursor:pointer}
.error{min-height:1.6em;margin:10px 0 4px;font-family:var(--sans);font-size:.86rem;color:var(--rose-dark)}
.shake{animation:shake .4s}

.btn{display:block;width:100%;min-height:var(--btn-h);padding:0 22px;border-radius:999px;border:1px solid var(--rose);font:inherit;font-size:1rem;letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,transform .15s,box-shadow .2s,opacity .2s}
.btn.primary{background:var(--rose);color:#fff;box-shadow:0 6px 16px rgba(196,91,122,.28)}
.btn.primary:hover{background:var(--rose-dark)}
.btn.ghost{background:var(--white);color:var(--rose-dark)}
.btn.ghost:hover{background:var(--blush-soft)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6;cursor:default}
.btn:focus-visible,.link:focus-visible,.toggle:focus-visible{outline:3px solid rgba(196,91,122,.45);outline-offset:3px}
.link{margin-top:14px;background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:.84rem;text-decoration:underline;cursor:pointer;padding:12px}
.actions{width:100%;max-width:22rem;margin-top:16px}
.actions .btn+.btn{margin-top:10px}
.rise{animation:rise .6s var(--ease) both}

/* cake */
.cake{width:min(94vw,420px);height:auto;display:block;margin:6px auto 0;overflow:visible}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .9s ease-in-out infinite alternate}
.c1 .flame{animation-delay:-.3s}.c2 .flame{animation-delay:-.6s}
.smoke{fill:#cfc5c9;opacity:0;transform-box:fill-box;transform-origin:center}
.out .flame{animation:none;transform:scale(.05);opacity:0;transition:transform .45s,opacity .45s}
.out .smoke{animation:smoke 1.6s ease-out forwards}
.out .smoke:nth-of-type(2){animation-delay:.15s}.out .smoke:nth-of-type(3){animation-delay:.3s}
#slice{transform-origin:267px 205px;transition:transform 1.1s var(--ease)}
#cake.cut #slice{transform:translate(72px,14px) rotate(5deg)}
#slicePlate{opacity:0;transition:opacity .8s}
#cake.cut #slicePlate{opacity:1}
#knife{opacity:0;transform:translateY(-110px)}
#cake.cutting #knife{animation:knife 1.5s ease-in-out forwards}

/* frame + photos */
.count{font-family:var(--sans);font-size:.8rem;letter-spacing:.18em;color:var(--muted);margin-bottom:12px}
.frame{margin:0 auto;padding:10px;width:fit-content;max-width:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.frame img{display:block;width:auto;height:auto;max-width:min(calc(100vw - 2*var(--gutter) - 22px),30rem);max-height:58vh;max-height:58svh;border-radius:16px}
.caption{max-width:26rem;margin:20px auto 4px;font-size:1.12rem;font-style:italic;color:var(--deep)}
.nav{display:flex;gap:12px;width:100%;max-width:22rem;margin-top:16px}.nav .btn{flex:1}
.nav .btn.hidden+.btn{flex:1}

/* letter */
.letter{width:100%;padding:34px 26px;text-align:left;background:linear-gradient(#fffdf9,#fff8f1);border:1px solid #ecd9b8;border-radius:6px 6px 18px 18px;box-shadow:var(--shadow),inset 0 0 0 6px #fffdf9,inset 0 0 0 7px #f1e3c6;transform-origin:top center;animation:unfold 1.1s var(--ease) both}
.letter .eyebrow{text-align:center;margin-bottom:14px}
.salute{font-size:1.25rem;font-style:italic;color:var(--deep)}
.letter p{line-height:1.8}
.dua{margin:18px 0 8px;padding:16px 16px 4px;background:var(--cream);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;font-style:italic;color:var(--deep);text-align:left}
.sign{margin:14px 0 0;text-align:right;font-style:italic;color:var(--rose)}

/* welcome bokeh */
.bokeh{position:absolute;border-radius:50%;background:var(--blush);opacity:.55;animation:float 7s ease-in-out infinite;z-index:-1}
.b1{width:120px;height:120px;left:-30px;top:12%}.b2{width:70px;height:70px;right:8%;top:20%;animation-delay:-2s;background:#f3e4c4}
.b3{width:90px;height:90px;right:-20px;bottom:18%;animation-delay:-4s}.b4{width:50px;height:50px;left:12%;bottom:14%;animation-delay:-1s;background:#f3e4c4}

/* gift */
.gift{width:min(62vw,240px);height:auto;margin:10px auto 0;overflow:visible}
#glow{opacity:0;transition:opacity .8s}
#lid{transition:transform .9s var(--ease),opacity .9s;transform-origin:100px 90px}
#gift.open #glow{opacity:1}
#gift.open #lid{transform:translateY(-70px) rotate(-14deg);opacity:0}
.reveal{display:flex;flex-direction:column;align-items:center;animation:rise .9s var(--ease) both}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.confetti span{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;opacity:.9;animation:fall linear forwards}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes flicker{from{transform:scale(1,1) skewX(-2deg)}to{transform:scale(.93,1.07) skewX(2deg)}}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.7}100%{opacity:0;transform:translate(6px,-34px) scale(2.4)}}
@keyframes knife{0%{opacity:0;transform:translateY(-110px)}20%{opacity:1;transform:translateY(-110px)}55%{opacity:1;transform:translateY(18px)}75%{opacity:1;transform:translateY(18px)}100%{opacity:0;transform:translateY(-110px)}}
@keyframes unfold{from{opacity:0;transform:perspective(900px) rotateX(-80deg)}to{opacity:1;transform:perspective(900px) rotateX(0)}}
@keyframes float{50%{transform:translateY(-18px)}}
@keyframes fall{to{transform:translate3d(var(--dx),108vh,0) rotate(560deg);opacity:.9}}
@media (min-width:700px){.screen{padding-top:50px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}