:root{--paper:#f5eee2;--ink:#482c32;--wine:#783549;--gold:#ac8755;--muted:#8d7773;--line:#d7c7b4;--white:#fffcf6;font-family:Tajawal,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;overflow-x:hidden}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}button:disabled{cursor:default;opacity:.55}[hidden]{display:none!important}button{border:0;background:none}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:'Aref Ruqaa',serif;font-weight:400}input,textarea,select{width:100%;border:1px solid var(--line);background:var(--white);border-radius:12px;padding:14px 16px;color:var(--ink);outline-offset:4px;min-width:0}textarea{resize:vertical}label{display:block;text-align:right;font-size:15px;font-weight:500}label input,label textarea{margin-top:9px}small{font-size:12px;color:var(--muted)}.svg-library{width:0;height:0;position:absolute;overflow:hidden}.intro{position:fixed;inset:0;background:var(--paper);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;min-height:420px;transition:opacity .65s,transform .8s}.intro.leaving{opacity:0;transform:scale(1.06);pointer-events:none}.skip{position:absolute;top:max(24px,env(safe-area-inset-top));left:22px;z-index:4;font-size:13px;border-bottom:1px solid #ab8c75;padding:8px 0;color:var(--muted)}.skip span{margin-right:8px}.story-grain,.hero:after{pointer-events:none;position:absolute;inset:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23866547' opacity='.35' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.story-arch{width:min(80vw,390px);height:70%;max-height:660px;border:1px solid #d6c6ae;border-radius:220px 220px 8px 8px;position:absolute;bottom:12%;background:radial-gradient(ellipse at 50% 35%,#fff9ef 0%,#ebdfce80 75%)}.story-arch:before{content:'';position:absolute;inset:10px;border:1px solid #d6c6ae88;border-radius:inherit}.story-stars{position:absolute;top:17%;width:280px;display:flex;justify-content:space-between;color:var(--gold);font-size:25px;animation:breathe 4s ease-in-out infinite}.story-stars span{margin-top:-25px;font-size:19px}.story-next{position:relative;width:min(100%,480px);height:100%;max-height:870px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 25px 85px;z-index:2}.envelope{position:absolute;top:25%;width:270px;height:185px;direction:ltr;filter:drop-shadow(0 20px 25px #6c45231c);animation:float 5s ease-in-out infinite;transition:opacity .4s,transform .7s;perspective:800px}.envelope-back{position:absolute;inset:0;background:#d5b994;border-radius:7px}.envelope-paper{position:absolute;inset:-47px 17px 16px;background:#fffcf4;border:1px solid #e5d6c1;z-index:1;transform:rotate(-5deg);padding:25px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;direction:rtl}.envelope-paper span{font-size:12px;color:var(--gold)}.envelope-paper strong{font-family:'Aref Ruqaa';font-size:23px;font-weight:400;max-width:100%;overflow-wrap:anywhere}.envelope-paper small{font-family:'Aref Ruqaa';font-size:19px}.envelope-front{position:absolute;inset:0;background:#e5ceb0;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:3;border-radius:6px}.envelope-flap{position:absolute;inset:0;background:#dbc09b;clip-path:polygon(0 0,100% 0,50% 60%);z-index:4;transform-origin:top;transition:transform .7s}.wax{position:absolute;z-index:5;left:calc(50% - 26px);top:80px;width:52px;height:52px;display:grid;place-items:center;border:4px double #a15d6c;border-radius:50%;background:var(--wine);color:#f3d7ae;font-family:'Aref Ruqaa';font-size:22px;box-shadow:0 3px 10px #44212525}.story-copy{position:relative;text-align:center;width:100%;z-index:3;min-height:140px}.story-copy>p:first-child{font-size:13px;letter-spacing:.2px;color:var(--gold);margin-bottom:14px}.story-copy h1{font-size:45px;line-height:1.65;margin-bottom:8px}.story-copy>p:last-child{font-size:16px;line-height:1.8;color:var(--muted);max-width:330px;margin:auto}.tap-hint{display:flex;align-items:center;gap:10px;color:var(--wine);font-size:12px;margin-top:23px;min-height:30px}.tap-ring{display:grid;place-items:center;width:30px;height:30px;border:1px solid #b48b7180;border-radius:50%;animation:breathe 2s infinite}.story-progress{position:absolute;bottom:35px;display:flex;gap:7px;direction:ltr;z-index:3}.story-progress i{width:22px;height:3px;border-radius:3px;background:#d7c7b4;transition:width .4s,background .4s}.story-progress i.active{width:40px;background:var(--wine)}.story-cast{position:absolute;top:18%;height:43%;max-height:365px;width:330px;left:calc(50% - 165px);pointer-events:none}.character{position:absolute;height:100%;width:205px;bottom:0;opacity:0;transition:transform .85s cubic-bezier(.18,.9,.25,1.15),opacity .6s}.groom{right:60px;transform:translateX(200px) rotate(12deg)}.bride{left:0;transform:translateX(-200px) rotate(-12deg)}.cast-heart{position:absolute;font-size:46px;color:var(--wine);top:12%;left:45%;opacity:0;transition:opacity .5s;animation:float 3s infinite}.intro[data-step="1"] .envelope,.intro[data-step="2"] .envelope,.intro[data-step="3"] .envelope{opacity:0;transform:translateY(120px) rotate(8deg) scale(.6);pointer-events:none}.intro[data-step="1"] .groom{opacity:1;right:60px;transform:translateX(0)}.intro[data-step="2"] .groom,.intro[data-step="3"] .groom{opacity:1;transform:translateX(50px) rotate(3deg)}.intro[data-step="2"] .bride,.intro[data-step="3"] .bride{opacity:1;transform:translateX(-12px) rotate(-3deg)}.intro[data-step="3"] .cast-heart{opacity:1}.intro[data-step="3"] .story-copy h1{font-size:34px;line-height:1.8}.groom-head{transform-origin:110px 145px;animation:headTilt 5s ease-in-out infinite}.bride-head{transform-origin:120px 145px;animation:headTilt 6s ease-in-out infinite reverse}.topbar{height:76px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d7c7b477;position:relative;z-index:2;max-width:1100px;margin:auto}.monogram{direction:ltr;font-family:Georgia,serif;font-size:24px;letter-spacing:-1px}.monogram span{font-size:17px;color:var(--wine);margin:0 4px}.topbar>span{font-size:12px;color:var(--muted)}.music-button{display:flex;align-items:center;gap:7px;font-size:11px;padding:10px 0}.music-bars{display:flex;gap:2px;height:16px;align-items:center}.music-bars i{height:6px;width:2px;background:var(--wine)}.music-bars i:nth-child(2){height:14px}.playing .music-bars i{animation:equalize .6s alternate infinite}.playing .music-bars i:nth-child(2){animation-delay:.2s}.playing .music-bars i:nth-child(3){animation-delay:.4s}.hero{position:relative;overflow:hidden;padding:44px 20px 26px;text-align:center;isolation:isolate}.hero:after{content:'';z-index:-1}.hero-arch{position:absolute;z-index:-2;top:90px;bottom:100px;width:min(80%,460px);left:50%;transform:translateX(-50%);border:1px solid #d6c6ae;border-radius:250px 250px 0 0;background:linear-gradient(#eee0cc60,#e5d1b880)}.hero-arch:after{content:'';position:absolute;inset:11px;border:1px solid #d6c6ae88;border-radius:inherit}.eyebrow{font-size:11px;line-height:2;color:var(--muted);margin-bottom:20px}.personal-tag{border:1px solid #b38e6c66;display:inline-block;padding:8px 17px;border-radius:30px;font-size:12px;max-width:95%;overflow-wrap:anywhere}.names{font-family:'Aref Ruqaa';display:flex;direction:rtl;align-items:center;justify-content:center;gap:15px;margin:12px auto 16px;font-size:clamp(68px,11vw,112px);color:var(--wine);line-height:1.7}.names i{font-family:Georgia;font-size:36px;font-style:italic;color:var(--gold);font-weight:400;margin-top:24px}.hero-verse{font-size:16px;line-height:1.9;color:#79605b}.hero-couple{position:relative;width:290px;height:245px;margin:22px auto 0;direction:ltr}.hero-couple svg{position:absolute;bottom:0;height:245px;width:155px}.hero-groom{left:13px;transform:rotate(-2deg)}.hero-bride{right:8px;transform:rotate(2deg)}.little-heart{position:absolute;top:15px;left:45%;color:var(--wine);font-size:29px;animation:float 3s infinite}.date-ribbon{position:relative;margin:0 auto;background:var(--wine);color:#f9efde;display:flex;justify-content:center;align-items:center;gap:23px;padding:18px 20px;width:min(100%,470px);transform:rotate(-2deg);box-shadow:0 10px 25px #6e293315}.date-ribbon>span{font-size:12px;white-space:nowrap}.date-ribbon strong{font-family:Georgia;font-size:20px;direction:ltr;font-weight:400;white-space:nowrap}.date-ribbon b{color:#d5b789;margin:0 3px;font-weight:400}.scroll-hint{display:flex;flex-direction:column;gap:7px;align-items:center;font-size:11px;color:var(--muted);margin-top:33px}.scroll-hint span{font-size:22px}.bloom{position:absolute;color:#c7a98a;width:105px;height:105px;z-index:-1}.bloom-one{left:-42px;top:190px;transform:rotate(20deg)}.bloom-two{right:-40px;bottom:170px;width:125px;height:125px;transform:rotate(-20deg)}.letter-section{max-width:650px;margin:auto;text-align:center;padding:70px 27px 80px}.section-number{font-size:11px;color:var(--gold);letter-spacing:1px;display:block;margin-bottom:19px}.letter-section h2{font-size:34px;margin-bottom:26px;overflow-wrap:anywhere}.letter-section p{font-size:17px;line-height:2.1;margin-bottom:19px;color:#80635e}.letter-section strong{font-weight:500;color:var(--wine)}.signature{font-family:'Aref Ruqaa';font-size:24px;margin-top:28px}.signature span{display:block;font-family:Georgia;font-size:28px;color:var(--wine);margin-top:14px}.details-section{background:#eee3d3;padding:58px 22px 52px;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.section-heading{text-align:center}.section-heading h2{font-size:42px;line-height:1.5;margin-bottom:14px}.section-heading p{font-size:14px;color:var(--muted)}.event-card{position:relative;background:var(--white);border:1px solid #d0baa0;max-width:440px;margin:34px auto 0;padding:25px 28px 17px;text-align:center;box-shadow:8px 8px 0 #dfceb955}.event-card:before{content:'';pointer-events:none;position:absolute;inset:7px;border:1px solid #d7c7b480}.event-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}.tiny-flower{font-size:21px;color:var(--gold)}.event-date{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:9px;padding:15px 0 6px}.event-date>span{font-size:13px;line-height:1.8}.event-date strong{font-family:Georgia;font-size:86px;color:var(--wine);font-weight:400;line-height:1.25}.event-divider{height:22px;display:flex;align-items:center;gap:10px;color:var(--gold);margin:2px 0 20px}.event-divider:after,.event-divider:before{content:'';height:1px;background:var(--line);flex:1}.event-card h3{font-size:34px;margin-bottom:12px}.event-card>p{font-size:14px;color:var(--muted);margin-bottom:25px}.primary-button,.secondary-button{min-height:51px;padding:15px 21px;border-radius:8px;display:flex;gap:14px;align-items:center;justify-content:center;width:100%;font-size:15px;font-weight:500;transition:transform .2s,background .2s}.primary-button{background:var(--wine);color:#fffaee;border:1px solid var(--wine)}.primary-button:hover{background:#612b3c}.primary-button:active,.secondary-button:active{transform:scale(.98)}.primary-button span{font-size:21px;font-weight:400}.secondary-button{border:1px solid #b69d8b;background:transparent}.text-button{font-size:12px;padding:16px 10px;text-decoration:underline;text-underline-offset:5px;color:var(--muted);min-height:44px}.countdown-wrap{text-align:center;padding-top:43px}.countdown-wrap>p{color:var(--muted);font-size:13px}.countdown{display:flex;direction:rtl;justify-content:center;gap:30px;margin-top:22px}.countdown>div{display:flex;flex-direction:column;gap:8px;min-width:40px}.countdown strong{font-family:Georgia;font-weight:400;font-size:34px;color:var(--wine);font-variant-numeric:tabular-nums}.countdown span{font-size:11px;color:var(--muted)}.rsvp-section{padding:68px 25px 70px;text-align:center;max-width:500px;margin:auto}.rsvp-mark{font-family:Georgia;color:var(--wine);font-size:65px;margin-bottom:3px}.rsvp-section h2{font-size:34px;margin-bottom:20px}.rsvp-section>p{font-size:16px;line-height:1.9;color:var(--muted)}.rsvp-buttons{display:grid;gap:12px;margin-top:28px}.saved-reply{font-size:12px!important;margin-top:17px}footer{position:relative;text-align:center;background:var(--wine);color:var(--paper);padding:43px 25px 106px}footer:before{content:'✧';position:absolute;top:-18px;right:calc(50% - 18px);width:36px;height:36px;background:var(--paper);border-radius:50%;color:var(--gold);display:grid;place-items:center;font-size:25px}.footer-names{font-family:'Aref Ruqaa';font-size:36px}.footer-names span{font-family:Georgia;font-size:22px;color:#d7b486;margin:0 10px}footer p{font-size:14px;margin:17px 0 12px}footer small{color:#d1b7ad}footer .text-button{display:block;margin:10px auto 0;color:#e1c7b6}.sticky-rsvp{position:fixed;z-index:5;bottom:0;left:0;right:0;background:#fffaf0ed;backdrop-filter:blur(12px);border-top:1px solid #d0baa077;padding:12px 22px max(12px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:10px;transform:translateY(110%);transition:transform .4s}.sticky-rsvp.visible{transform:translateY(0)}.sticky-rsvp a{padding:11px 15px;background:var(--wine);color:var(--paper);border-radius:6px}.reply-dialog{border:1px solid var(--line);border-radius:28px 28px 0 0;background:var(--paper);color:var(--ink);width:min(100%,490px);max-width:100%;max-height:90dvh;padding:32px 26px max(28px,env(safe-area-inset-bottom));margin:auto auto 0;overflow-y:auto}.reply-dialog[open]{animation:sheetIn .35s ease-out}.reply-dialog::backdrop{background:#2c18265e;backdrop-filter:blur(5px)}.close-dialog{position:absolute;top:12px;left:15px;width:44px;height:44px;border-radius:50%;font-size:28px;color:var(--muted);z-index:2}.reply-dialog form>h2,.reply-dialog #replySuccess h2{font-size:30px;text-align:center;line-height:1.6;overflow-wrap:anywhere}.reply-dialog form>p{font-size:14px;text-align:center;color:var(--muted);line-height:1.8;margin:12px 0 22px}.modal-flower{display:block;font-size:40px;color:var(--gold);text-align:center;margin-bottom:8px}.reply-dialog label{margin:19px 0}.optional{font-size:12px;color:var(--muted);font-weight:400}.reply-dialog small{display:block;text-align:center;line-height:1.7;margin-top:16px}.error{color:#a23346!important;font-size:13px!important;line-height:1.8;min-height:4px;margin:10px 0!important}.success-heart{font-size:85px;font-family:Georgia;text-align:center;color:var(--wine);animation:breathe 2s infinite}.reply-dialog #replySuccess p{text-align:center;line-height:1.9;color:var(--muted);margin:20px 0 28px}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}#confetti i{position:absolute;width:7px;height:13px;top:-20px;animation:confetti 2.8s ease-in forwards}.toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:45;padding:13px 22px;background:var(--ink);color:var(--paper);border-radius:10px;font-size:13px;max-width:90%;width:max-content;text-align:center}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s,transform .8s}.reveal.shown{opacity:1;transform:translateY(0)}.admin{max-width:1000px;margin:auto;min-height:100dvh;padding:0 22px 50px}.admin-top{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.admin-top>span{font-family:'Aref Ruqaa';font-size:22px}.login-card{max-width:370px;margin:70px auto;text-align:center}.login-card h1{font-size:48px;line-height:1.7}.login-card>p{margin:20px 0 30px;color:var(--muted)}.login-card small{display:block;margin-top:20px}.dashboard-heading{text-align:center;margin:40px 0 30px}.dashboard-heading h1{font-size:42px;margin-bottom:15px}.dashboard-heading p{color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:32px}.stats>div{padding:22px 8px;background:#ede1d0;border:1px solid var(--line);text-align:center;border-radius:12px;display:grid;gap:10px}.stats strong{font-size:31px;color:var(--wine);font-weight:500}.stats span{font-size:12px;line-height:1.6}.link-maker{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--white);margin-bottom:28px}.link-maker h2{font-size:26px;margin-bottom:20px}.link-maker label{margin-bottom:10px}.link-row{display:flex;gap:10px}.link-row button{width:145px;flex-shrink:0;font-size:13px}.link-maker p{font-size:12px;color:var(--muted);margin-top:12px;overflow-wrap:anywhere;line-height:1.8}.reply-tools{display:grid;grid-template-columns:1fr 160px 100px;gap:10px;margin-bottom:22px}.reply-tools button{padding:10px;font-size:13px}.reply-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.guest-card{background:#fffaf1;border:1px solid var(--line);border-radius:12px;padding:22px;overflow-wrap:anywhere}.guest-card header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.guest-card h2{font-family:Tajawal;font-size:18px;font-weight:700}.guest-card .badge{background:#e3eadb;color:#536347;border-radius:20px;padding:6px 9px;font-size:11px;white-space:nowrap}.guest-card .badge.no{background:#eee0dd;color:#8d625b}.guest-card p{line-height:1.9;margin:20px 0;font-size:16px;white-space:pre-wrap}.guest-card time{font-size:11px;color:var(--muted)}.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;line-height:2;color:var(--muted)}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(1deg)}}@keyframes breathe{0%,100%{opacity:.65;scale:.95}50%{opacity:1;scale:1.05}}@keyframes headTilt{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}@keyframes equalize{to{height:16px}}@keyframes sheetIn{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes confetti{to{transform:translate(var(--drift),105vh) rotate(700deg);opacity:0}}
@media(min-width:700px){.hero{padding-top:55px}.hero-arch{width:480px;top:90px}.names{margin:7px auto 0}.hero-couple{height:280px}.hero-couple svg{height:280px;width:175px}.hero-groom{left:0}.hero-bride{right:0}.hero-verse{font-size:19px}.bloom-one{left:calc(50% - 360px);width:155px;height:155px}.bloom-two{right:calc(50% - 340px);width:160px;height:160px}.letter-section{padding:80px 25px 90px}.letter-section h2{font-size:42px}.reply-dialog{margin:auto;border-radius:24px}.sticky-rsvp{justify-content:center;gap:70px}.story-copy h1{font-size:48px}}
@media(max-height:700px){.story-next{padding-bottom:62px}.story-cast{top:14%;height:40%}.envelope{top:23%;scale:.85}.story-copy{min-height:120px}.story-copy h1{font-size:37px}.story-copy>p:first-child{margin-bottom:4px}.tap-hint{margin-top:8px}.story-progress{bottom:22px}.story-stars{top:14%}.intro[data-step="3"] .story-copy h1{font-size:29px}}
@media(max-width:370px){.topbar{padding:0 16px}.topbar>span{font-size:10px}.names{gap:10px;font-size:65px}.date-ribbon{gap:14px;padding:16px 12px}.date-ribbon>span{font-size:10px}.date-ribbon strong{font-size:18px}.story-copy h1{font-size:39px}.intro[data-step="3"] .story-copy h1{font-size:29px}.rsvp-section h2{font-size:29px}.event-card{padding:23px 21px 16px}.stats span{font-size:10px}.link-row{flex-direction:column}.link-row button{width:100%}}
@media(max-width:600px){.reply-list{grid-template-columns:1fr}.reply-tools{grid-template-columns:1fr 95px}.reply-tools input{grid-column:1/-1}.reply-tools select{width:100%}.link-maker{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}

.envelope-address{position:absolute;bottom:18px;left:15px;right:15px;z-index:4;direction:rtl;text-align:center;font-size:13px;color:#7c4c40;overflow-wrap:anywhere}.intro:not([data-step="0"]) .envelope-flap{transform:rotateX(180deg)}.intro:not([data-step="0"]) .envelope{animation:none}.story-copy h1{overflow-wrap:anywhere}.intro.long-name[data-step="3"] .story-copy h1{font-size:24px}