*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--pk:#F5C5D6;--pk2:#ECA9C3;--gd:#D4AF69;--gd2:#C6A15B;--ink:#7a4a60;--px:0;--py:0}
html,body{height:100%;overflow:hidden;background:#FFFDFE;font-family:Poppins,system-ui,sans-serif;color:var(--ink)}
#app{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;touch-action:none;background:radial-gradient(circle at 15% 8%,#FFE6F0,transparent 46%),radial-gradient(circle at 90% 92%,#FBF0D8,transparent 42%),#FFFDFE}
button{font-family:inherit}

/* top bar */
#top{position:absolute;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 0}
.ib{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(212,175,105,.55);background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--gd2);font-size:16px;cursor:pointer;display:grid;place-items:center}
#back{opacity:0;pointer-events:none;transition:opacity .4s;font-size:20px}
#prog{flex:1;display:flex;gap:4px}
#prog i{flex:1;height:3px;border-radius:3px;background:rgba(236,169,195,.35);transition:background .6s}
#prog i.on{background:linear-gradient(90deg,var(--pk2),var(--gd))}
#mus{display:flex;gap:6px}

/* scenes */
.sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(8px,2dvh,16px);padding:calc(58px + env(safe-area-inset-top)) 20px calc(18px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.15);filter:blur(14px);transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.2,1),filter .8s,visibility 0s .9s}
.sc.past{transform:scale(.86)}
.sc.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition:opacity .8s .15s,transform .9s .15s cubic-bezier(.2,.7,.2,1),filter .8s .15s,visibility 0s}
:where(.sc>*:not(.fl)){position:relative;z-index:2}

/* type */
h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;line-height:1.25;color:#8a4f68}
h1{font-size:clamp(26px,8vw,40px)}
h2{font-size:clamp(21px,6.2vw,32px);max-width:16em}
p{font-size:clamp(13px,3.7vw,16px);line-height:1.6;max-width:32ch;font-weight:300}
.sg{font-family:'Dancing Script',cursive;font-size:clamp(22px,6.4vw,30px);color:var(--gd2)}
.msg{min-height:3.4em;max-width:32ch;font-size:clamp(13px,3.6vw,15px);line-height:1.55;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(236,169,195,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}

/* buttons */
.btn{border:0;border-radius:40px;padding:13px 28px;min-height:48px;font-size:15px;font-weight:400;color:#fff;background:linear-gradient(135deg,var(--gd),#EBD299 50%,var(--gd2));box-shadow:0 8px 22px rgba(198,161,91,.4),inset 0 1px 0 rgba(255,255,255,.6);cursor:pointer;transition:transform .2s;text-shadow:0 1px 2px rgba(120,90,30,.3)}
.btn:active{transform:scale(.94)}
.btn.pk{background:linear-gradient(135deg,#F2A9C4,var(--pk2) 50%,#DD8FB0);box-shadow:0 8px 22px rgba(221,143,176,.45),inset 0 1px 0 rgba(255,255,255,.6)}

/* hearts + floating decor (CSS 3D parallax) */
.h{display:block;width:var(--s,80px);height:var(--s,80px);filter:drop-shadow(0 10px 12px rgba(201,112,143,.35))}
.h.beat{animation:beat 1.3s ease-in-out infinite}
.fl{position:absolute;z-index:0;pointer-events:none;transform:translate3d(calc(var(--px)*var(--d,10)*1px),calc(var(--py)*var(--d,10)*1px),0);transition:transform .35s ease-out}
.fl>*{animation:fy var(--t,6s) ease-in-out infinite alternate}
@keyframes fy{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-14px) rotate(5deg)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pr,.gd{display:block;width:var(--s);height:var(--s);border-radius:50%}
.pr{background:radial-gradient(circle at 30% 28%,#fff,#F9E8EF 45%,#E4B3C7);box-shadow:0 6px 10px rgba(201,112,143,.25)}
.gd{background:radial-gradient(circle at 35% 30%,#FBEBC4,#D4AF69 60%,#A67F35);box-shadow:0 0 10px rgba(212,175,105,.7)}

/* 1 intro */
.hero{transform:translate3d(calc(var(--px)*24px),calc(var(--py)*24px),0);transition:transform .35s ease-out}
.hero::before{content:"";position:absolute;inset:-45%;z-index:-1;background:radial-gradient(circle,rgba(245,197,214,.65),transparent 65%);animation:beat 3s ease-in-out infinite}
.hero .h{--s:clamp(110px,34vw,160px);animation:fy 4s ease-in-out infinite alternate}
.opening .hero{animation:op .9s ease-in forwards}
@keyframes op{to{transform:scale(2.6);opacity:0}}

/* 2 world */
.comp{position:relative;width:min(80vw,280px);height:min(34dvh,200px)}

/* 3 cards */
.grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:10px;width:min(100%,340px);height:min(52dvh,430px)}
.cd{perspective:700px;cursor:pointer}
.ci{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.cd.f .ci{transform:rotateY(180deg)}
.cf,.cb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;font-size:clamp(10.5px,3vw,13px);line-height:1.35;box-shadow:0 10px 20px rgba(201,112,143,.2)}
.cf{font-family:'Playfair Display',serif;background:linear-gradient(145deg,#fff,#FCE9F0);border:1px solid rgba(212,175,105,.6);color:#8a4f68}
.cf b{color:var(--gd2);font-size:16px}
.cb{transform:rotateY(180deg);background:linear-gradient(145deg,#FBDDE8,#fff);border:1px solid rgba(236,169,195,.7);font-weight:300}

/* 4 letter */
.es{position:relative;width:min(86vw,340px);height:min(50dvh,290px)}
.ev{position:absolute;left:50%;top:50%;width:min(76vw,300px);aspect-ratio:3/2;transform:translate(-50%,-50%);cursor:pointer;filter:drop-shadow(0 14px 18px rgba(201,112,143,.3));transition:transform .9s,opacity .9s}
.ev i{position:absolute}
.eb{inset:0;background:linear-gradient(#fff,#FBE6EE);border-radius:6px 6px 12px 12px}
.ep{inset:0;background:linear-gradient(160deg,#fff,#F8D9E5);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border-radius:6px 6px 12px 12px}
.ef{left:0;top:0;width:100%;height:58%;background:linear-gradient(#F5C5D6,#ECA9C3);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .7s}
.seal{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:20px;background:radial-gradient(circle at 35% 30%,#F6E2AE,#D4AF69 60%,#A67F35);box-shadow:0 4px 10px rgba(120,90,30,.4);transition:.5s;animation:beat 1.8s infinite}
.es.o1 .ef{transform:perspective(500px) rotateX(180deg)}
.es.o1 .seal{opacity:0;transform:scale(.3)}
.es.o2 .ev{transform:translate(-50%,40%) scale(.8);opacity:0;pointer-events:none}
.lt{position:absolute;inset:0;background:#FFFEFA;border:1px solid rgba(212,175,105,.5);border-radius:8px;padding:16px 18px;overflow-y:auto;touch-action:pan-y;text-align:left;font-family:'Dancing Script',cursive;font-size:clamp(16px,4.6vw,20px);color:#8a4f68;box-shadow:0 14px 30px rgba(201,112,143,.25);opacity:0;pointer-events:none;transform:translateY(40%) scale(.7);transition:opacity .9s,transform 1s cubic-bezier(.2,.8,.2,1)}
.lt p{max-width:none;font-size:inherit;font-weight:500;line-height:1.4;margin-bottom:.5em}
.es.o2 .lt{opacity:1;pointer-events:auto;transform:none}
.lb{transition:opacity .8s}
.lb.lk{opacity:0;pointer-events:none}

/* 5 polaroids */
.pg{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;width:min(100%,330px);height:min(54dvh,420px)}
.pl{position:relative;display:flex;flex-direction:column;gap:5px;padding:7px 7px 6px;background:#fff;border-radius:3px;box-shadow:0 10px 20px rgba(201,112,143,.25);transform:rotate(var(--r));cursor:pointer;min-height:0;font-family:'Dancing Script',cursive;font-size:clamp(12px,3.6vw,15px);color:#8a4f68;animation:fy 6s ease-in-out infinite alternate}
.pl::before{content:"";position:absolute;top:-7px;left:50%;width:44px;height:14px;margin-left:-22px;background:linear-gradient(90deg,#D4AF69,#EBD299);opacity:.85;transform:rotate(-3deg)}
.ph{flex:1;min-height:0;border-radius:2px;background:linear-gradient(135deg,#FBE3EC,#F5C5D6) center/cover;display:grid;place-items:center;color:#fff;font-size:30px}
.pl span{line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 6 bubbles */
.bs{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;max-width:340px}
.bb{border:1px solid rgba(212,175,105,.55);border-radius:30px;padding:9px 14px;font-size:clamp(12px,3.4vw,14px);color:#8a4f68;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 14px rgba(236,169,195,.3);cursor:pointer;animation:fy 4s ease-in-out infinite alternate;transition:background .3s,color .3s}
.bb.on{background:linear-gradient(135deg,var(--pk2),var(--pk));color:#fff}
#lm{min-height:5.2em}

/* 7 gift */
.gs{height:min(30dvh,240px);width:min(70vw,260px);display:flex;align-items:flex-end;justify-content:center}
.gb{position:relative;width:min(42vw,160px);height:min(42vw,160px);cursor:pointer;animation:fy 3s ease-in-out infinite alternate}
.gb.o{animation:none}
.gbase{position:absolute;left:4%;right:4%;bottom:0;height:64%;border-radius:6px 6px 14px 14px;background:linear-gradient(135deg,#fff,#F5C5D6);box-shadow:0 14px 24px rgba(201,112,143,.3),inset 0 0 0 1px rgba(212,175,105,.4)}
.gbase::after,.glid::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:16%;transform:translateX(-50%);background:linear-gradient(90deg,#C6A15B,#F3DEA6,#C6A15B)}
.glid{position:absolute;left:-2%;right:-2%;bottom:60%;height:26%;border-radius:8px;background:linear-gradient(135deg,#fff,#F0B6CC);box-shadow:0 4px 10px rgba(0,0,0,.08);transform-origin:left bottom;transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.bow{position:absolute;left:50%;bottom:84%;width:52%;height:22%;transform:translateX(-50%);transition:.8s;z-index:2}
.bow i{position:absolute;bottom:0;width:48%;height:100%;border:4px solid var(--gd);border-radius:60% 60% 10% 60%}
.bow i:first-child{left:0}.bow i:last-child{right:0;transform:scaleX(-1)}
.gheart{position:absolute;left:50%;bottom:30%;opacity:0;transform:translateX(-50%) scale(.3);transition:transform 1.2s .5s cubic-bezier(.2,.8,.2,1),opacity .6s .5s;filter:drop-shadow(0 0 16px rgba(236,169,195,.95))}
.gheart .h{--s:clamp(54px,16vw,78px)}
.gb.o .glid{transform:translate(-30%,-90%) rotate(-24deg)}
.gb.o .bow{opacity:0;transform:translate(-50%,-30px) rotate(30deg) scale(.4)}
.gb.o .gheart{opacity:1;transform:translate(-50%,-95%) scale(1)}
.gm{min-height:8.5em;max-width:34ch}

/* 8 secrets */
.sk{width:100%;flex:1;min-height:90px}
.sh,.gh{pointer-events:auto;cursor:pointer}
.sh::after{content:"";position:absolute;inset:-10px}
.sh.fd .h{opacity:.35}
.gh{opacity:.6}
#toast{min-height:3.6em}
.love{width:min(54vw,200px);height:56px;border:0;border-radius:30px;font:500 20px 'Playfair Display',serif;letter-spacing:.3em;padding-left:.3em;color:#fff;cursor:pointer;background:linear-gradient(180deg,#F6B3CB,#E48AAE);box-shadow:0 6px 0 #C46A8E,0 14px 24px rgba(196,106,142,.45),inset 0 2px 0 rgba(255,255,255,.55),0 0 0 3px #fff,0 0 0 4.5px var(--gd);transition:transform .12s,box-shadow .12s}
.love:active{transform:translateY(5px);box-shadow:0 1px 0 #C46A8E,0 4px 10px rgba(196,106,142,.45),inset 0 2px 0 rgba(255,255,255,.55),0 0 0 3px #fff,0 0 0 4.5px var(--gd)}

/* 9 final */
.big{position:relative;width:min(46vw,190px);height:min(46vw,190px)}
.big>.h{position:absolute;inset:0;--s:100%}
.hp1{animation:beat 2s ease-in-out infinite;transition:opacity 1s,scale 1s}
.hg1{opacity:0;transition:opacity 1.2s}
.big.o .hg1{opacity:1;animation:glow 2.4s ease-in-out infinite alternate}
.big.o .hp1{opacity:0;scale:1.25}
@keyframes glow{from{filter:drop-shadow(0 0 8px #D4AF69)}to{filter:drop-shadow(0 0 28px #ECA9C3)}}

/* overlays */
#md{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(255,253,254,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
#md.on{opacity:1;pointer-events:auto}
.mb{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;width:min(88vw,360px);max-height:90dvh;padding:20px 18px 16px;text-align:center;background:#fff;border:1px solid rgba(212,175,105,.5);border-radius:20px;box-shadow:0 20px 50px rgba(201,112,143,.25)}
.mb .ph.big{width:100%;flex:none;aspect-ratio:1;max-height:50dvh;font-size:60px}
.mb .x{position:absolute;top:-12px;right:-12px}
.pn{display:flex;align-items:center;gap:16px;font-size:13px}
#ov{position:fixed;inset:0;z-index:45;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(circle,rgba(255,255,255,.94),rgba(255,236,244,.7))}
#ov.on{opacity:1}
#ov div{font-family:'Dancing Script',cursive;font-size:clamp(34px,11vw,56px);color:var(--gd2);text-shadow:0 4px 20px rgba(236,169,195,.8);padding:0 20px;text-align:center}
#ov .h{margin:0 auto 10px;--s:90px}
#fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.pt{position:absolute;width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px #fff}
.rn{position:absolute}

@media(max-height:600px){.hero .h{--s:100px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}}