*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#090611;color:#fff}
button{font:inherit}
#app{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 25%,#251632 0,#100b18 42%,#08050c 100%)}
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.25;animation:drift 12s linear infinite}
.ambient span:nth-child(1){left:12%;top:72%;animation-delay:-2s}.ambient span:nth-child(2){left:28%;top:30%;animation-delay:-7s}.ambient span:nth-child(3){left:72%;top:62%;animation-delay:-4s}.ambient span:nth-child(4){left:86%;top:22%;animation-delay:-9s}.ambient span:nth-child(5){left:52%;top:82%;animation-delay:-5s}
@keyframes drift{50%{transform:translate3d(15px,-35px,0);opacity:.55}100%{transform:translate3d(-8px,-70px,0);opacity:0}}
.topbar{position:absolute;z-index:20;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center}
.iconBtn{width:40px;height:40px;border:1px solid #fff2;border-radius:50%;background:#ffffff0c;color:#fff;cursor:pointer;backdrop-filter:blur(10px)}
.iconBtn.on{box-shadow:0 0 24px #d66ac744;border-color:#e69bdc}
.sceneCount{font-size:11px;color:#aa9cb3;display:flex;align-items:center;gap:7px}.sceneCount i{display:block;width:20px;height:1px;background:#665a6c}
.scene{position:absolute;inset:0;padding:82px 22px 72px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .85s ease,visibility .85s ease}
.scene.active{opacity:1;visibility:visible;pointer-events:auto}
.content{position:relative;z-index:3;width:min(680px,100%)}.center{text-align:center;margin:auto}
.eyebrow{font-size:10px;letter-spacing:3px;color:#bba9c4;font-weight:700}
h1,h2,p{margin-top:0}.hero{font-size:clamp(55px,16vw,105px);line-height:.9;letter-spacing:-5px;margin:18px 0}.hero span{color:#f29bcf}
h2{font-size:clamp(35px,8vw,62px);line-height:1.03;letter-spacing:-2px;margin:15px 0 25px}
.lead{font-size:15px;line-height:1.9;color:#d9cddf}.bodyText{font-size:15px;line-height:1.9;color:#ddd2e1;max-width:600px}.bodyText.large{font-size:20px;color:#f2e9f4}.muted{color:#a99eac;font-size:13px;line-height:1.8}
.quote{font-size:clamp(19px,5vw,29px);line-height:1.6;color:#f4dced;margin:30px 0;padding:24px;border-left:1px solid #e9a0d455;border-right:1px solid #e9a0d422}
.statement{font-size:clamp(19px,5vw,27px);line-height:1.65;color:#f5e8f2;margin:28px 0}
.primary{border:1px solid #ffffff18;background:linear-gradient(135deg,#9e5add,#d95eb5);color:#fff;border-radius:999px;padding:13px 21px;cursor:pointer;font-weight:750;box-shadow:0 12px 30px #a94fc522;margin-top:22px}.primary b{margin-left:8px}
.primary:active{transform:translateY(1px)}
.orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.orbA{width:250px;height:250px;top:-100px;right:-80px;background:#c14ec522;box-shadow:0 0 90px #d05bc533}.orbB{width:220px;height:220px;bottom:-100px;left:-100px;background:#5d62e522;box-shadow:0 0 100px #6c6de533}
.lineArt{position:absolute;right:10%;top:20%;width:170px;height:170px;border:1px solid #fff1;border-radius:50%;animation:spin 18s linear infinite}.lineArt:after{content:"";position:absolute;inset:18px;border:1px solid #fff1;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}
.heartScene{position:absolute;inset:0;pointer-events:none}.heart{position:absolute;top:25%;font-size:110px;color:#f5b1df;text-shadow:0 0 40px #df70bb77;transition:transform 2.2s cubic-bezier(.2,.8,.2,1)}.heart.left{left:calc(50% - 170px);transform:translateX(-50%)}.heart.right{left:calc(50% + 170px);transform:translateX(-50%)}.scene.active .heart.left{animation:leftHeart 3.4s 1.1s both}.scene.active .heart.right{animation:rightHeart 3.4s 1.1s both}@keyframes leftHeart{0%{transform:translateX(-50%) scale(.82);opacity:.25}65%{transform:translateX(calc(-50% + 115px)) scale(1);opacity:.9}100%{transform:translateX(calc(-50% + 108px)) scale(1.05);opacity:.72}}@keyframes rightHeart{0%{transform:translateX(-50%) scale(.82);opacity:.25}65%{transform:translateX(calc(-50% - 115px)) scale(1);opacity:.9}100%{transform:translateX(calc(-50% - 108px)) scale(1.05);opacity:.72}}
.heartGlow{position:absolute;width:130px;height:130px;left:50%;top:25%;transform:translate(-50%,10%);border-radius:50%;background:#f18ac922;filter:blur(25px);animation:pulse 2.5s ease-in-out infinite}@keyframes pulse{50%{transform:translate(-50%,10%) scale(1.3);opacity:.5}}
.rainGlow{position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,#6b4d9922,transparent 35%);animation:breathe 7s ease-in-out infinite}@keyframes breathe{50%{opacity:.5}}
.starfield{position:absolute;inset:0;background-image:radial-gradient(#fff8 1px,transparent 1px);background-size:95px 95px;opacity:.08;animation:starMove 20s linear infinite}@keyframes starMove{to{background-position:95px 95px}}
.finalGlow{position:absolute;width:55vw;height:55vw;max-width:480px;max-height:480px;border-radius:50%;background:#d05db51a;filter:blur(35px);animation:pulse 5s ease-in-out infinite}
.finalTitle{margin-bottom:20px}.finalTitle span{color:#f2a4d4}.signature{margin-top:32px;color:#bbaebe;line-height:1.8}.signature strong{color:#f2c2e0;font-size:20px}
.bottomHint{position:absolute;z-index:20;bottom:16px;left:0;right:0;text-align:center;color:#72677a;font-size:10px}.bottomHint span{color:#a99aaa}
.reveal{opacity:0;transform:translateY(18px);filter:blur(7px)}.scene.active .reveal{animation:reveal .8s cubic-bezier(.2,.75,.2,1) forwards}@keyframes reveal{to{opacity:1;transform:none;filter:blur(0)}}
.delay1{animation-delay:.18s!important}.delay2{animation-delay:.35s!important}.delay3{animation-delay:.52s!important}.delay4{animation-delay:.69s!important}.delay5{animation-delay:.86s!important}
@media(max-width:520px){.scene{padding-left:17px;padding-right:17px}.heart{font-size:82px}.heart.left{left:calc(50% - 110px)}.heart.right{left:calc(50% + 110px)}@keyframes leftHeart{0%{transform:translateX(-50%) scale(.82);opacity:.25}65%{transform:translateX(calc(-50% + 72px)) scale(1);opacity:.9}100%{transform:translateX(calc(-50% + 68px)) scale(1.05);opacity:.72}}@keyframes rightHeart{0%{transform:translateX(-50%) scale(.82);opacity:.25}65%{transform:translateX(calc(-50% - 72px)) scale(1);opacity:.9}100%{transform:translateX(calc(-50% - 68px)) scale(1.05);opacity:.72}}}