:root{
  /* palette */
  --cream:#fffaf7; --blush:#f8dce5; --blush-soft:#fdeff3; --rose:#c45b7a; --rose-dark:#a8476a;
  --deep:#77384e; --text:#49343b; --muted:#866c74; --line:#f0d9e0; --white:#fff;
  /* type */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* space & shape */
  --gutter:16px; --pad:28px; --radius:24px; --radius-sm:16px; --btn-h:54px;
  --shadow:0 10px 30px rgba(119,56,78,.10); --shadow-lg:0 16px 44px rgba(119,56,78,.16);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.55s;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;color:var(--text);font-family:var(--serif);line-height:1.75;text-align:center;
  background:radial-gradient(120% 60% at 50% 0%,var(--blush-soft) 0%,var(--cream) 62%) fixed,var(--cream);overflow-x:hidden}
main{width:100%;max-width:34rem;margin:0 auto;padding:calc(36px + env(safe-area-inset-top,0px)) var(--gutter) calc(48px + env(safe-area-inset-bottom,0px))}
p{margin:0 0 14px;font-size:1.04rem}
h1,h2{margin:6px 0 14px;font-weight:400;color:var(--deep);line-height:1.22;letter-spacing:.01em}
h1{font-size:clamp(1.9rem,8.2vw,2.6rem)} h2{font-size:clamp(1.8rem,7.5vw,2.4rem)}
.eyebrow{margin:0 0 6px;font-family:var(--sans);font-size:.68rem;letter-spacing:.28em;color:var(--rose);font-weight:600}
.hidden{display:none!important}

.paper{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad) calc(var(--pad) - 4px);box-shadow:var(--shadow-lg)}
.orn{height:14px;margin:6px auto 18px;width:120px;position:relative}
.orn::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--rose),transparent)}
.orn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;background:var(--white);border:1px solid var(--rose);transform:translate(-50%,-50%) rotate(45deg)}

/* password */
.hint{display:block;margin-top:22px;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}
.toggle:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.error{min-height:1.6em;margin:10px 0 4px;font-family:var(--sans);font-size:.86rem;color:var(--rose-dark)}
.shake{animation:shake .4s}

/* buttons */
.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,color .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:focus-visible,.link:focus-visible,.music:focus-visible{outline:3px solid rgba(196,91,122,.45);outline-offset:3px}
.link{margin-top:18px;background:none;border:0;color:var(--muted);font-family:var(--sans);font-size:.82rem;text-decoration:underline;cursor:pointer;padding:10px}

/* photo screen */
.dots{display:flex;justify-content:center;gap:7px;margin:8px 0 20px}
.dots span{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.dots span.done{background:#e6a9bb} .dots span.now{background:var(--rose);transform:scale(1.35)}
.frame{margin:0 auto;padding:10px;width:fit-content;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.frame img{display:block;width:auto;height:auto;max-width:min(calc(100vw - 2*var(--gutter) - 22px),30rem);max-height:60vh;max-height:60svh;border-radius:var(--radius-sm)}
.message{max-width:26rem;margin:24px auto 6px;font-size:1.14rem;font-style:italic;color:var(--deep);line-height:1.7}
.nav{display:flex;gap:12px;margin-top:22px}.nav .btn{flex:1}
.nav .btn.hidden+.btn{flex:1}

/* final */
.dua{margin:20px 0;padding:18px 18px 6px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);font-style:italic;color:var(--deep)}
.last{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);animation:rise .8s var(--ease) both}
.ameen{margin:0;color:var(--rose);font-style:italic}
.crest{position:relative;width:54px;height:54px;margin:0 auto 12px}
.crest i{position:absolute;inset:0;border:1px solid var(--rose);border-radius:50%;opacity:.6}
.crest i+i{inset:9px;opacity:.9;background:var(--blush-soft)}

/* music */
.music{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--rose-dark);font-family:var(--sans);font-size:.8rem;box-shadow:var(--shadow);cursor:pointer;z-index:6}

/* progress bar */
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:var(--blush);z-index:5}
.progress span{display:block;height:100%;width:0;background:var(--rose);transition:width var(--dur) var(--ease)}

/* motion */
.enter-next{animation:inNext var(--dur) var(--ease) both}
.enter-prev{animation:inPrev var(--dur) var(--ease) both}
.enter{animation:rise .6s var(--ease) both}
#final.on .reveal{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i)*.3s)}
#final:not(.on) .reveal{opacity:0}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes inNext{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes inPrev{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (min-width:700px){
  main{padding-top:60px} .paper{padding:44px 48px} .frame img{max-height:66vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}