:root{--primary-rose:#ff5c8a;--primary-deep:#e21251;--dark-burgundy:#5c0a25;--warm-gold:#f6c955;--pastel-pink:#ffebf0;--cream-white:#fffdfa;--glass-bg:#ffffff8c;--glass-border:#ffffffb3;--glass-shadow:#a4133c1f;--font-serif:"Playfair Display", Georgia, serif;--font-handwritten:"Caveat", cursive;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--transition-smooth:all .5s cubic-bezier(.25, .8, .25, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--dark-burgundy);background:linear-gradient(135deg,#fff0f4 0%,#ffd6dd 50%,#f1c6d3 100%);min-height:100vh;position:relative;overflow-x:hidden}#hearts-canvas{pointer-events:none;z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0}#app-container{z-index:1;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:1200px;min-height:100vh;margin:0 auto;padding:1.5rem;display:flex;position:relative}.scene{width:100%;transition:var(--transition-smooth);opacity:1}.scene.hidden{opacity:0;pointer-events:none;display:none!important}#scene-envelope{justify-content:center;align-items:center;min-height:90vh;display:flex}.envelope-container{perspective:1200px;width:420px;height:300px;margin:0 auto}.envelope{cursor:pointer;width:100%;height:100%;transform-style:preserve-3d;transition:var(--transition-smooth);background:#f65583;border-radius:0 0 10px 10px;position:relative;box-shadow:0 20px 40px #880e2c40}.envelope:hover{transform:translateY(-8px)rotateX(5deg);box-shadow:0 30px 50px #880e2c4d}.flap{z-index:3;border-style:solid;width:0;height:0;position:absolute}.flap-top{transform-origin:top;z-index:4;border-width:150px 210px 0;border-color:#f4346a #0000 #0000;transition:transform .5s ease-in-out .3s,z-index .2s ease-in-out .3s;top:0;left:0}.pocket{z-index:3;background:0 0;width:100%;height:100%;position:absolute;top:0;left:0}.pocket:before{content:"";border-top:150px solid #0000;border-bottom:150px solid #f04c7a;border-left:210px solid #f04c7a;border-right:0 solid #0000;border-radius:0 0 0 10px;width:0;height:0;position:absolute;bottom:0;left:0}.pocket:after{content:"";border-top:150px solid #0000;border-bottom:150px solid #f04c7a;border-left:0 solid #0000;border-right:210px solid #f04c7a;border-radius:0 0 10px;width:0;height:0;position:absolute;bottom:0;right:0}.wax-seal{z-index:5;width:64px;height:64px;transition:var(--transition-smooth);background:radial-gradient(circle at 30% 30%,#cf1736,#910831);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:150px;left:50%;transform:translate(-50%,-50%)scale(1);box-shadow:0 4px 10px #0000004d,inset 0 2px 4px #ffffff4d}.wax-seal:hover{transform:translate(-50%,-50%)scale(1.15)rotate(10deg)}.seal-heart{color:var(--pastel-pink);text-shadow:1px 1px 2px #00000080;font-size:1.8rem;animation:1.5s infinite pulse-heart}.envelope-letter{background:var(--cream-white);width:90%;height:85%;transition:var(--transition-smooth);z-index:2;text-align:center;border:1px solid #a4133c26;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:absolute;bottom:15px;left:5%;box-shadow:0 4px 15px #00000014}.letter-preview{flex-direction:column;gap:.8rem;display:flex}.letter-title{font-family:var(--font-serif);color:var(--dark-burgundy);font-size:1.8rem;font-weight:700}.letter-click-prompt{color:var(--primary-deep);font-size:.9rem;font-weight:600;animation:1.5s infinite alternate bounce-text}.envelope.open .flap-top{z-index:1;transition:transform .4s ease-in-out,z-index .1s ease-in-out .1s;transform:rotateX(180deg)}.envelope.open .wax-seal{opacity:0;pointer-events:none;transform:translate(-50%,-50%)scale(0)}.envelope.open .envelope-letter{z-index:5;height:110%;transition:transform .6s cubic-bezier(.175,.885,.32,1.275) .4s,height .6s cubic-bezier(.175,.885,.32,1.275) .4s;transform:translateY(-130px);box-shadow:0 15px 35px #00000026}#scene-surprise{z-index:2;width:100%;max-width:800px;margin:0 auto;padding:2rem 0}.romantic-header{text-align:center;margin-bottom:3rem}.kicker{text-transform:uppercase;letter-spacing:.2em;color:var(--primary-deep);margin-bottom:.5rem;font-size:1rem;font-weight:600;display:block}.main-title{font-family:var(--font-serif);background:linear-gradient(to right, var(--dark-burgundy), var(--primary-deep), var(--primary-rose));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:3rem;font-weight:800}.divider-hearts{color:var(--primary-deep);justify-content:center;align-items:center;gap:.5rem;display:flex}.heart-icon{font-size:1.2rem;animation:2s infinite alternate pulse-heart}.heart-icon.large{font-size:1.8rem;animation-delay:.3s}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:0 15px 30px var(--glass-shadow);border-radius:20px;margin-bottom:3rem;padding:2.5rem;position:relative;overflow:hidden}.letter-paper{background-color:var(--cream-white);background-image:radial-gradient(var(--glass-border) 1px, transparent 0);background-size:24px 24px;border:1px dashed #a4133c26;border-radius:12px;padding:2rem;box-shadow:inset 0 0 20px #a4133c0d}.letter-handwritten{font-family:var(--font-handwritten);color:var(--dark-burgundy);min-height:150px;font-size:2rem;line-height:1.5}.glass-widget{z-index:100;background:var(--glass-bg);-webkit-backdrop-filter:blur(8px);border:1px solid var(--glass-border);transition:var(--transition-smooth);border-radius:50px;align-items:center;gap:.8rem;padding:.5rem 1.2rem;display:flex;position:fixed;top:20px;right:20px;box-shadow:0 8px 20px #a4133c14}.glass-widget.hide{opacity:0;pointer-events:none;transform:translateY(-20px)}.music-btn{cursor:pointer;color:var(--dark-burgundy);background:0 0;border:none;outline:none;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;display:flex}.music-btn:focus-visible{outline:2px solid var(--primary-deep)}.music-visualizer{align-items:flex-end;gap:3px;width:20px;height:16px;display:flex}.music-visualizer .bar{background-color:var(--primary-deep);border-radius:3px;width:3px;height:20%;transition:height .15s}.playing .music-visualizer .bar{animation:.8s ease-in-out infinite alternate bounce-bar}.playing .music-visualizer .bar:nth-child(2){animation-delay:.15s}.playing .music-visualizer .bar:nth-child(3){animation-delay:.3s}.playing .music-visualizer .bar:nth-child(4){animation-delay:.45s}.timeline-section{margin-bottom:4rem}.section-title{font-family:var(--font-serif);text-align:center;color:var(--dark-burgundy);margin-bottom:3rem;font-size:2.2rem;font-weight:700}.timeline{flex-direction:column;gap:4rem;display:flex;position:relative}.timeline:before{content:"";background:linear-gradient(to bottom, var(--primary-rose), var(--primary-deep), var(--warm-gold));opacity:.5;border-radius:2px;width:4px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.timeline-item{z-index:2;align-items:center;width:100%;display:flex;position:relative}.timeline-item.reverse{flex-direction:row-reverse}.timeline-img-wrapper{justify-content:center;width:45%;padding:0 2rem;display:flex}.timeline-img{aspect-ratio:1;object-fit:cover;border:4px solid var(--cream-white);width:100%;max-width:320px;transition:var(--transition-smooth);border-radius:16px;transform:rotate(-3deg);box-shadow:0 10px 25px #0000001f}.timeline-item:hover .timeline-img{transform:rotate(0)scale(1.05);box-shadow:0 15px 35px #a4133c33}.timeline-item.reverse .timeline-img{transform:rotate(3deg)}.timeline-item.reverse:hover .timeline-img{transform:rotate(0)scale(1.05)}.timeline-content{width:45%;margin:0}.timeline-date{color:var(--primary-deep);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-size:.85rem;font-weight:700;display:block}.timeline-content h3{font-family:var(--font-serif);color:var(--dark-burgundy);margin-bottom:.8rem;font-size:1.5rem}.timeline-content p{color:#661933;font-size:.95rem;line-height:1.6}.scroll-reveal{opacity:0;transition:opacity .8s,transform .8s;transform:translateY(40px)}.scroll-reveal.active{opacity:1;transform:translateY(0)}.proposal-section{text-align:center;border:2px solid var(--primary-rose);background:radial-gradient(circle at 100% 0,#ffffffb3,#ffe6eb8c)}.proposal-title{font-family:var(--font-serif);margin-bottom:1rem;font-size:1.8rem}.proposal-text{margin-bottom:2rem;font-size:1.1rem;line-height:1.5}.proposal-buttons{justify-content:center;align-items:center;gap:2rem;min-height:80px;display:flex;position:relative}.btn{cursor:pointer;border:none;border-radius:50px;outline:none;padding:.9rem 2.2rem;font-size:1.05rem;font-weight:600;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s}.btn-primary{background:linear-gradient(135deg, var(--primary-rose) 0%, var(--primary-deep) 100%);color:#fff;animation:2s infinite pulse-btn;box-shadow:0 6px 20px #e6394640}.btn-primary:hover{transform:scale(1.08);box-shadow:0 10px 25px #e6394659}.btn-secondary{background:var(--cream-white);color:var(--primary-deep);border:1px solid var(--primary-rose);box-shadow:0 4px 10px #0000000d}.btn-secondary.escaping{z-index:1000;transition:top .15s ease-out,left .15s ease-out;position:fixed}.overlay{-webkit-backdrop-filter:blur(15px);z-index:2000;opacity:1;width:100vw;height:100vh;transition:var(--transition-smooth);background:#880e2c73;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.overlay.hidden{opacity:0;pointer-events:none;display:none!important}.success-card{text-align:center;background:radial-gradient(circle at 10% 10%,#fffc,#fff0f3b3);border:2px solid #fffc;width:90%;max-width:480px;padding:3rem 2rem;box-shadow:0 25px 60px #00000040}.scale-in{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards scale-in-card}.close-btn{color:var(--primary-deep);cursor:pointer;opacity:.7;background:0 0;border:none;font-size:2rem;transition:opacity .2s;position:absolute;top:15px;right:20px}.close-btn:hover{opacity:1}.success-heart-animation{margin-bottom:1.5rem;font-size:4.5rem;animation:1.2s cubic-bezier(.25,.8,.25,1) infinite alternate beat-grow;display:inline-block}.success-title{font-family:var(--font-serif);color:var(--dark-burgundy);margin-bottom:1rem;font-size:2rem}.success-message{color:#521429;margin-bottom:2rem;font-size:1.05rem;line-height:1.6}.love-counter-wrapper{border-top:1px dashed #a4133c33;padding-top:1.5rem}.love-counter-wrapper p{margin-bottom:.8rem;font-size:.9rem;font-weight:600}.love-click-btn{background:linear-gradient(135deg, var(--primary-rose) 0%, var(--primary-deep) 100%);color:#fff;cursor:pointer;border:none;border-radius:30px;align-items:center;gap:.5rem;padding:.7rem 1.8rem;font-size:.95rem;font-weight:700;transition:transform .1s;display:inline-flex;box-shadow:0 4px 12px #e6394633}.love-click-btn:active{transform:scale(.95)}@keyframes pulse-heart{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes beat-grow{0%{transform:scale(.9)}to{transform:scale(1.15)}}@keyframes bounce-text{0%{transform:translateY(0)}to{transform:translateY(-6px)}}@keyframes bounce-bar{0%{height:20%}to{height:100%}}@keyframes pulse-btn{0%{box-shadow:0 6px 20px #e6394640}50%{box-shadow:0 6px 30px #e639468c}to{box-shadow:0 6px 20px #e6394640}}@keyframes scale-in-card{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.envelope-container{width:340px;height:240px}.flap-top{border-width:120px 170px 0}.pocket:before{border-width:120px 0 120px 170px}.pocket:after{border-width:120px 170px 120px 0}.wax-seal{width:50px;height:50px;top:120px}.seal-heart,.letter-title{font-size:1.4rem}.main-title{font-size:2.2rem}.timeline:before{left:20px}.timeline-item,.timeline-item.reverse{flex-direction:column;align-items:flex-start;gap:1.5rem}.timeline-img-wrapper,.timeline-content{width:100%;padding:0 0 0 40px}.timeline-img{max-width:260px}.proposal-buttons{flex-direction:column;gap:1rem}.btn{width:100%}}