:root{--cream:#fffaf7;--blush:#f8dce5;--rose:#c45b7a;--deep:#77384e;--text:#49343b;--line:#f0d9e0}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--cream);color:var(--text);font-family:Georgia,"Times New Roman",serif;text-align:center;line-height:1.8}
main{max-width:560px;margin:0 auto;padding:calc(34px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px))}
.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 22px;box-shadow:0 8px 24px rgba(119,56,78,.08)}
.step{animation:fade .5s ease both}
h1,h2{color:var(--deep);font-weight:normal;line-height:1.25;margin:8px 0 16px}
h1{font-size:clamp(28px,8vw,38px)}h2{font-size:clamp(25px,7vw,32px)}
p{font-size:16px;margin:0 0 14px}
.eyebrow{font-family:Arial,sans-serif;font-size:11px;letter-spacing:3px;color:var(--rose)}
.hint{display:block;margin-top:22px;font-family:Arial,sans-serif;font-size:13px;color:#866c74}
input{width:100%;margin-top:10px;padding:15px 16px;font:inherit;font-size:16px;text-align:center;letter-spacing:3px;color:var(--text);background:var(--cream);border:1px solid var(--line);border-radius:30px;outline:none}
input:focus{border-color:var(--rose)}
.error{min-height:22px;margin:10px 0 0;font-family:Arial,sans-serif;font-size:14px;color:var(--rose)}
.btn{display:block;width:100%;min-height:52px;margin-top:12px;border:0;border-radius:30px;background:var(--rose);color:#fff;font:inherit;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn.ghost{background:#fff;color:var(--rose);border:1px solid var(--rose)}
.nav{display:flex;gap:10px}.nav .btn{flex:1}
.pics{display:grid;gap:10px;margin:6px 0 16px}
.pics img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover;border-radius:16px;box-shadow:0 6px 18px rgba(119,56,78,.15)}
.caption{font-size:13px;color:#866c74;font-style:italic}
.dua{margin:18px 0;padding:18px;background:var(--cream);border-radius:16px;font-style:italic}
.dua p{margin:0}
.last{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);animation:fade .5s ease both}
.ameen{color:var(--rose);font-style:italic;margin:0}
.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 .5s ease}
.hidden{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}