:root{--bur:#5B1024;--red:#A51F38;--blk:#10090D;--gold:#D5B477;--pearl:#FFF9F5;--ivory:#F3E9DC;--sf:'Cormorant Garamond',Georgia,serif;--pf:'Playfair Display',Georgia,serif}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--blk);color:var(--pearl);font:300 16px/1.75 'DM Sans',system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
h1,h2,h3{font-family:var(--sf);font-weight:300;line-height:1.05}
h1{font-size:clamp(2.8rem,12vw,7rem);letter-spacing:.05em}
h2{font-size:clamp(2rem,7vw,3.8rem);margin:.5rem 0 1rem}
.it{font-family:var(--pf);font-style:italic;color:#e9d6d0}
.eb{font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold)}
.gold{color:var(--gold)}
.slide{position:fixed;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden;padding:calc(3.5rem + env(safe-area-inset-top,0px)) 1.2rem calc(6rem + env(safe-area-inset-bottom,0px));display:flex;text-align:center;opacity:0;visibility:hidden;transform:scale(1.04);filter:blur(6px);transition:opacity 1.1s,transform 1.5s,filter 1.1s,visibility 0s 1.1s;background:radial-gradient(ellipse at 50% 105%,rgba(91,16,36,.95),transparent 70%),radial-gradient(ellipse at 50% -10%,rgba(165,31,56,.22),transparent 60%),var(--blk)}
.slide.on{opacity:1;visibility:visible;transform:none;filter:none;transition-delay:0s}
.in{margin:auto;width:100%;max-width:1000px;position:relative}
.on .a{animation:up 1.1s both;animation-delay:calc(var(--i,0)*.17s)}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:1rem 2rem;letter-spacing:.28em;font-size:.72rem;text-transform:uppercase;margin-top:1.8rem;transition:.5s;background:rgba(165,31,56,.12)}
.btn:hover,.btn:active{background:var(--gold);color:var(--blk);box-shadow:0 0 34px rgba(213,180,119,.4)}
.pulse{animation:glow 3s infinite}
@keyframes glow{50%{box-shadow:0 0 36px rgba(213,180,119,.4)}}
.emw{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.em{position:absolute;opacity:0;animation:fl 7s ease-in-out infinite}
@keyframes fl{0%{opacity:0;transform:translateY(20px)}30%,70%{opacity:.85}50%{transform:translateY(-14px)}100%{opacity:0;transform:translateY(-30px)}}
.heart{position:absolute;bottom:12%;animation:hr 4s ease-out forwards;pointer-events:none}
@keyframes hr{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-55vh) scale(1.4)}}
/* countdown */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:640px;margin:2rem auto 0}
.grid4 div{border-top:1px solid rgba(213,180,119,.45);padding-top:.7rem}
.grid4 b{display:block;font:300 clamp(2.4rem,11vw,5rem)/1 var(--sf);color:var(--gold);font-variant-numeric:tabular-nums}
.grid4 small{font-size:.6rem;letter-spacing:.3em;color:#c9a8aa}
#cd{opacity:0;animation:up 1.5s 4s both}
/* two col */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;text-align:left}
.cols.r .ph{order:2}
.fr{border:1px solid var(--gold);padding:10px;background:rgba(16,9,13,.55);box-shadow:0 25px 60px rgba(0,0,0,.6),0 0 40px rgba(165,31,56,.15)}
.fr img{display:block;width:100%;height:auto;max-height:64vh;object-fit:contain}
.nop{min-height:240px;display:grid;place-items:center;font-size:2.4rem;background:linear-gradient(145deg,var(--bur),var(--blk))}
.cap{text-align:center;margin-top:1rem;letter-spacing:.3em;font-size:.7rem;color:var(--gold)}
.tw{white-space:pre-line;font-size:1.02rem;color:#eadcd4;margin-top:1rem}
.tw span{opacity:0}
.xs{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}.xs .fr{width:30%;padding:5px}
.no{font:300 clamp(4rem,14vw,8rem)/.9 var(--sf);color:rgba(213,180,119,.28)}
.st p{margin-bottom:.9rem;color:#eadcd4}
.st h2{color:var(--pearl)}
/* letter */
.lt{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem;text-align:left;align-items:start;margin-top:1.5rem}
.pl{background:rgba(91,16,36,.5);border:1px solid var(--gold);padding:1.6rem;text-align:center;backdrop-filter:blur(6px)}
.pl .disc{font-size:2.4rem;margin-bottom:.6rem}
.pb{width:70px;height:70px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:1.5rem;margin:.8rem 0;transition:.4s}
.pb:hover{background:var(--gold);color:var(--blk)}
.pl input[type=range]{width:100%;accent-color:var(--gold)}
.tm{display:flex;justify-content:space-between;font-size:.75rem;color:var(--gold);letter-spacing:.1em}
.vl{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:.8rem;font-size:.75rem;letter-spacing:.2em;color:#c9a8aa}
.vl button{width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;color:var(--gold);font-size:1.2rem;line-height:1}
.paper{background:var(--ivory);color:#4a1a28;padding:clamp(1.4rem,5vw,2.6rem);outline:1px solid var(--gold);outline-offset:-10px;box-shadow:0 30px 70px rgba(0,0,0,.6);font-family:var(--pf);font-size:1.02rem;line-height:1.85;position:relative}
.paper h3{font-style:italic;font-size:1.7rem;color:var(--bur);margin-bottom:.8rem}
.paper .lb{max-height:52vh;overflow-y:auto}
.paper p{margin-bottom:.9rem}
.paper .rs{position:absolute;right:1rem;top:.6rem;opacity:.7}
/* video */
#cin{display:none;position:relative;margin:2rem auto 0;max-width:820px;border:1px solid var(--gold);background:#000;overflow:hidden}
#cin video{display:block;width:100%;max-height:70vh}
.cur{position:absolute;top:0;bottom:0;width:51%;background:linear-gradient(var(--bur),#2a0812);z-index:3;transition:transform 2s cubic-bezier(.7,0,.2,1)}
.cur.l{left:0;border-right:1px solid var(--gold)}.cur.r{right:0;border-left:1px solid var(--gold)}
#cin.open .l{transform:translateX(-101%)}#cin.open .r{transform:translateX(101%)}
#fs{position:absolute;right:8px;top:8px;z-index:4;background:rgba(16,9,13,.6);border:1px solid var(--gold);color:var(--gold);padding:.2rem .6rem;font-size:.8rem}
/* cake */
.cakew{position:relative;width:min(78vw,300px);margin:1rem auto 0}
.glow{position:absolute;left:50%;top:5%;width:140%;height:70%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,190,90,.35),transparent 65%);transition:opacity 1.5s;pointer-events:none}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:fk .35s ease-in-out infinite alternate;transition:opacity .7s,transform .7s}
.fl:nth-of-type(2){animation-delay:.12s}.fl:nth-of-type(3){animation-delay:.2s}
@keyframes fk{from{transform:scale(1,1) skewX(-3deg)}to{transform:scale(.88,1.1) skewX(4deg)}}
.out .fl{animation:none;opacity:0;transform:scale(.2)}.out+.glow,.out ~ .glow{opacity:0}
.smoke{position:absolute;top:14%;width:10px;height:10px;border-radius:50%;background:rgba(255,249,245,.5);filter:blur(5px);animation:sm 3.5s ease-out forwards}
@keyframes sm{to{transform:translate(12px,-90px) scale(5);opacity:0}}
#wm{opacity:0;transform:translateY(14px);transition:1.6s;margin-top:1.2rem}#wm.show{opacity:1;transform:none}
/* final */
.petal{position:absolute;top:-5%;width:14px;height:18px;background:linear-gradient(135deg,var(--red),var(--bur));border-radius:150% 0 150% 0;opacity:.8;animation:pt linear infinite}
@keyframes pt{to{transform:translate(60px,110vh) rotate(540deg)}}
.big{font:italic 300 clamp(1.4rem,5vw,2.4rem)/1.35 var(--pf);color:var(--pearl);margin:1rem auto;max-width:24ch}
.love{font:300 clamp(3.2rem,15vw,8rem)/1 var(--sf);color:var(--gold);letter-spacing:.1em;margin:1.2rem 0 .5rem}
/* ui */
#top{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;background:rgba(213,180,119,.15)}
#pg{display:block;height:100%;width:0;background:var(--gold);transition:width 1s}
#mc{position:fixed;top:calc(.7rem + env(safe-area-inset-top,0px));right:.7rem;z-index:30;display:flex;align-items:center;gap:.3rem;background:rgba(16,9,13,.7);border:1px solid rgba(213,180,119,.4);padding:.2rem .5rem;backdrop-filter:blur(6px)}
#mc[hidden],#nv[hidden]{display:none}
#mc button{width:30px;height:30px;color:var(--gold);font-size:.85rem}
.eq{display:flex;gap:2px;align-items:flex-end;height:16px;margin-left:.3rem}
.eq b{width:3px;height:30%;background:var(--gold);transition:height .3s}
.eq.on b{animation:eq .9s ease-in-out infinite alternate}.eq.on b:nth-child(2){animation-delay:.2s}.eq.on b:nth-child(3){animation-delay:.4s}.eq.on b:nth-child(4){animation-delay:.1s}
@keyframes eq{to{height:100%}}
#nv{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(16,9,13,.92) 45%)}
#nv button{font-size:.7rem;letter-spacing:.25em;color:var(--gold);padding:.9rem .6rem;min-width:100px}
#nv button:disabled{opacity:.25}
#nx{text-align:right}#ct{font:300 1rem var(--sf);letter-spacing:.3em;color:#c9a8aa}
@media(max-width:760px){.cols,.lt{grid-template-columns:1fr;gap:1.4rem}.cols.r .ph{order:0}#nv button{min-width:80px;padding:.9rem .2rem}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}