@import"https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&family=Great+Vibes&display=swap";:root{font-family:Manrope,system-ui,sans-serif;line-height:1.6;font-weight:400;color:#5d4353;background-color:#fff8fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--accent: #f28cb4;--accent-strong: #e86fa5;--text-strong: #4b2a3d;--text-soft: #7a5a6a}*{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top,#fff1f7,#ffe8f2,#fff8fb 70%)}#root{min-height:100vh}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.app{min-height:100vh;position:relative;overflow-x:hidden}.envelope-screen{min-height:100vh;display:grid;place-items:center;cursor:pointer;transition:opacity .5s ease;position:relative;overflow:hidden;padding:2.5rem 1.5rem;background:radial-gradient(circle at top,#fff3f9e6,#ffe8f2e6)}.envelope-screen:hover .envelope-wrapper{transform:translateY(-10px)}.envelope-background{position:absolute;inset:0;pointer-events:none}.bg-orb{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#f9d2e599,#f9d2e500);filter:blur(2px);opacity:.7}.orb-1{top:-40px;left:-20px}.orb-2{bottom:-60px;right:10%;width:260px;height:260px}.orb-3{top:25%;right:-60px;width:180px;height:180px}.bg-sparkle{position:absolute;color:#e86fa580;font-size:1.6rem;animation:sparkleFloat 6s ease-in-out infinite}.sparkle-1{top:15%;left:12%}.sparkle-2{top:60%;right:18%;animation-delay:-2s}.sparkle-3{bottom:18%;left:40%;animation-delay:-4s}@keyframes sparkleFloat{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-12px);opacity:.9}}.envelope-card{position:relative;z-index:2;text-align:center;padding:2.5rem 2.5rem 2rem;border-radius:32px;background:#ffffffbf;border:1px solid rgba(249,210,229,.6);box-shadow:0 30px 80px #f7b5d140,0 10px 30px #ed98bd26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.envelope-eyebrow{margin:0 0 1.5rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:#a24a76}.envelope-container{text-align:center}.envelope-wrapper{position:relative;width:300px;height:200px;margin:0 auto 2rem;transition:transform .3s ease}.envelope-back{position:absolute;inset:0;background:linear-gradient(135deg,#f9d4e6,#f7b9d4);border-radius:16px;box-shadow:0 20px 60px #e86fa54d}.envelope-front{position:absolute;inset:0;background:linear-gradient(145deg,#fbe3ef,#f6c9df);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 50%,50% 70%,100% 50%,100% 0);border-radius:16px}.envelope-flap{position:absolute;top:0;left:0;width:100%;height:55%;background:linear-gradient(160deg,#f9d7e8,#f4b6d3);clip-path:polygon(0 0,100% 0,50% 80%);border-radius:16px 16px 0 0;box-shadow:inset 0 -8px 16px #fff6}.envelope-seal{position:absolute;top:25%;left:50%;transform:translate(-50%,-50%);font-size:3rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}}.envelope-hint{font-size:1.1rem;color:#a24a76;font-weight:500;animation:bounce 2s ease-in-out infinite}.envelope-subhint{margin:.5rem 0 0;font-size:.95rem;color:#7a5a6a}.draw-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:min(920px,160vw);height:min(820px,150vw);opacity:.45;pointer-events:none;z-index:1}.draw-heart-svg{width:100%;height:100%}.draw-heart-path{fill:none;stroke:#e86fa5cc;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 8px 18px rgba(232,111,165,.15));stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawHeart 5.5s ease-in-out infinite}@keyframes drawHeart{0%{stroke-dashoffset:1200;filter:drop-shadow(0 8px 18px rgba(232,111,165,.15));opacity:.35}55%{stroke-dashoffset:0;filter:drop-shadow(0 14px 32px rgba(232,111,165,.4));opacity:.7}60%{filter:drop-shadow(0 18px 36px rgba(255,176,210,.65));opacity:.8}65%{stroke-dashoffset:0;filter:drop-shadow(0 8px 18px rgba(232,111,165,.15));opacity:.35}75%{stroke-dashoffset:1200;filter:drop-shadow(0 8px 18px rgba(232,111,165,.15));opacity:.35}to{stroke-dashoffset:1200;filter:drop-shadow(0 8px 18px rgba(232,111,165,.15));opacity:.35}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(max-width:640px){.envelope-card{width:min(92vw,360px);padding:2rem 1.5rem 1.8rem}.envelope-wrapper{width:240px;height:160px}}.landing{animation:fadeIn .8s ease;padding:4rem clamp(1.5rem,5vw,5rem) 2rem;display:flex;flex-direction:column;gap:5rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hero{text-align:center;max-width:800px;margin:0 auto}.hero-content{animation:slideUp .8s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.badge{display:inline-block;padding:.5rem 1.5rem;background:#f7b5d14d;border-radius:999px;color:#a24a76;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1.5rem}.title{font-family:Playfair Display,serif;font-size:clamp(2.5rem,6vw,4.5rem);margin:0 0 1.5rem;color:#4b2a3d;line-height:1.2}.highlight{color:#e86fa5;display:inline-block}.subtitle{font-size:1.2rem;color:#7a5a6a;line-height:1.8;max-width:600px;margin:0 auto}.reasons{max-width:1100px;margin:0 auto}.section-title{font-family:Playfair Display,serif;font-size:clamp(2rem,4vw,3rem);text-align:center;color:#4b2a3d;margin-bottom:3rem}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.card{background:linear-gradient(135deg,#fffffff2,#fef5fae6);border:1px solid rgba(249,210,229,.4);border-radius:28px;padding:2.8rem 2.2rem;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #f7b5d11f,0 4px 12px #f5c4d614;position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0;border-radius:28px;padding:1px;background:linear-gradient(135deg,#f9d2e580,#f3c6dc4d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s ease}.card:hover{transform:translateY(-12px) scale(1.02);box-shadow:0 20px 60px #f7b5d140,0 10px 30px #f5c4d626;border-color:#f9d2e599}.card:hover:before{opacity:1}.card-icon{font-size:3rem;display:block;margin-bottom:1rem}.card h3{font-size:1.5rem;color:#4b2a3d;margin:0 0 .8rem}.card p{color:#7a5a6a;line-height:1.6;margin:0}.reasons-note{grid-column:1 / -1;margin:.5rem auto 0;padding:1.2rem 1.6rem;text-align:center;font-weight:600;color:#a24a76;background:linear-gradient(135deg,#ffffffe6,#fff8fce6);border:1px solid rgba(249,210,229,.5);border-radius:18px;box-shadow:0 10px 30px #f7b5d126}.question{max-width:600px;margin:0 auto}.question-box{background:linear-gradient(135deg,#fffffffa,#fff8fcf2);border:1px solid rgba(249,210,229,.6);border-radius:36px;padding:3.5rem 3rem;text-align:center;box-shadow:0 30px 80px #f7b5d133,0 15px 40px #ed98bd26,inset 0 1px #fff,inset 0 -1px #f9d2e533;position:relative;overflow:hidden}.question-box:before{content:"";position:absolute;inset:-100%;background:conic-gradient(from 0deg at 50% 50%,rgba(247,181,209,.1) 0deg,transparent 60deg,transparent 300deg,rgba(247,181,209,.1) 360deg);animation:questionRotate 8s linear infinite;z-index:0}.question-box>*{position:relative;z-index:1}@keyframes questionRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.question-box h2{font-family:Playfair Display,serif;font-size:2rem;color:#4b2a3d;margin:0 0 .5rem}.question-text{font-size:1.4rem;color:#a24a76;font-weight:600;margin:0 0 2rem}.buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:1rem 2.5rem;border-radius:999px;font-size:1.1rem;font-weight:600;border:none;cursor:pointer;transition:all .3s ease}.btn-yes{background:linear-gradient(135deg,#f7b5d1,#f9d2e5);color:#6c2a4f;box-shadow:0 8px 20px #f7b5d166}.btn-yes:hover{transform:translateY(-3px);box-shadow:0 12px 30px #f7b5d180}.btn-no{background:#fffc;color:#8a3f64;border:2px solid rgba(242,140,180,.4)}.btn-no:hover{background:#fff;transform:translateY(-3px)}.btn-no:disabled{opacity:.5;cursor:not-allowed;transform:none}.no-hint{margin-top:1rem;font-weight:600;color:#a24a76}.footer{text-align:center;color:#7a5a6a;padding:2rem 0;font-size:1rem}.letter-section{max-width:800px;margin:0 auto}.letter-box{background:linear-gradient(135deg,#fffffff2,#fff8fbe6),repeating-linear-gradient(0deg,#fff9 0 26px,#f9e6f059 27px 27px);background-blend-mode:soft-light;border:1px solid rgba(249,210,229,.5);border-radius:32px;padding:3.5rem;box-shadow:0 20px 60px #f7b5d126,0 10px 30px #ed98bd1a,inset 0 1px #fffc;position:relative;overflow:hidden}.letter-box:before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#fbe3ef,#f9d4e6,#fbe3ef);border-radius:32px;z-index:-1;opacity:.3}.letter-box:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(255,255,255,.65),transparent 55%);opacity:.6;pointer-events:none}.letter-title{font-family:Playfair Display,serif;font-size:2rem;color:#4b2a3d;text-align:center;margin:0 0 1.2rem;letter-spacing:.02em}.letter-title:after{content:"✦";display:block;margin:.6rem auto 0;font-size:1.1rem;color:#e86fa599}.letter-content p{color:#5d4353;line-height:1.9;font-size:1.1rem;margin-bottom:1.5rem;text-align:justify}.letter-content p:first-child:first-letter{float:left;font-family:Playfair Display,serif;font-size:3.2rem;line-height:1;padding-right:.3rem;color:#e18bb0}.letter-content p:last-child{margin-bottom:0;text-align:center;font-weight:600;color:#a24a76}.letter-signature{margin-top:2.5rem;text-align:right;font-family:Great Vibes,cursive;font-size:2.4rem;color:#b06387;letter-spacing:.02em}.memories{max-width:900px;margin:0 auto}.timeline{display:flex;flex-direction:column;gap:2rem;margin-top:3rem}.timeline-item{display:flex;gap:2rem;align-items:flex-start;background:linear-gradient(135deg,#ffffffe6,#fffafdd9);padding:2.5rem;border-radius:24px;border:1px solid rgba(249,210,229,.4);transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 24px #f5c4d61f,0 4px 12px #f7b5d114;position:relative}.timeline-item:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:0;background:linear-gradient(180deg,#f7b5d1,#f9d2e5);border-radius:4px;transition:height .4s ease}.timeline-item:hover{transform:translate(15px);box-shadow:0 15px 50px #f5c4d633,0 8px 25px #f7b5d126;border-color:#f9d2e599}.timeline-item:hover:before{height:60%}.timeline-emoji{font-size:2.5rem;flex-shrink:0}.btn-icon{font-size:1.1rem;vertical-align:middle;margin-left:.35rem}.timeline-content h3{font-size:1.3rem;color:#4b2a3d;margin:0 0 .5rem}.timeline-content p{color:#7a5a6a;margin:0;line-height:1.6}.promises{max-width:700px;margin:0 auto}.promises-box{background:linear-gradient(135deg,#fffffff2,#fff5fae6,#feeef6d9);border:1px solid rgba(249,210,229,.5);border-radius:32px;padding:3.5rem 3rem;text-align:center;box-shadow:0 25px 70px #f7b5d126,0 15px 35px #ed98bd1a,inset 0 1px #ffffffe6;position:relative;overflow:hidden}.promises-box:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(247,181,209,.5),transparent)}.promises-box h2{font-family:Playfair Display,serif;font-size:2rem;color:#4b2a3d;margin:0 0 2rem}.promises-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.promises-list li{font-size:1.2rem;color:#5d4353;padding:1.3rem 1.5rem;background:linear-gradient(135deg,#fffc,#fffcfeb3);border-radius:16px;border:1px solid rgba(249,210,229,.3);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #f5c4d614}.promises-list li:hover{transform:scale(1.03) translate(5px);background:linear-gradient(135deg,#fffffff2,#fef8fce6);box-shadow:0 8px 24px #f5c4d626;border-color:#f9d2e580}.celebration{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(135deg,#fff1f7,#ffe8f2,#ffd9ea);animation:celebrationBg 10s ease infinite}@keyframes celebrationBg{0%,to{background:linear-gradient(135deg,#fff1f7,#ffe8f2,#ffd9ea)}50%{background:linear-gradient(135deg,#ffe8f2,#ffd9ea,#ffcce0)}}.celebration-content{text-align:center;z-index:2;animation:celebrationZoom .8s ease;padding:2rem}@keyframes celebrationZoom{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.celebration-emoji{font-size:8rem;animation:celebrationRotate 2s ease-in-out infinite;display:inline-block}@keyframes celebrationRotate{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.celebration-title{font-family:Playfair Display,serif;font-size:clamp(3rem,8vw,6rem);color:#e86fa5;margin:1rem 0;animation:celebrationPulse 2s ease-in-out infinite}@keyframes celebrationPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.celebration-text{font-size:1.4rem;color:#5d4353;max-width:600px;margin:0 auto 3rem;line-height:1.8}.love-messages{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem}.love-msg{background:#ffffffe6;padding:1.5rem 2rem;border-radius:20px;font-size:1.3rem;color:#a24a76;font-weight:600;box-shadow:0 10px 30px #f5c4d64d;animation:loveMsgFloat 3s ease-in-out infinite}.love-msg:nth-child(1){animation-delay:0s}.love-msg:nth-child(2){animation-delay:.5s}.love-msg:nth-child(3){animation-delay:1s}@keyframes loveMsgFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.celebration-footer{margin-top:2rem}.celebration-footer p{font-family:Playfair Display,serif;font-size:1.8rem;color:#4b2a3d;margin:0}@media(max-width:640px){.celebration{padding:2rem 1.25rem 3rem}.celebration-content{padding:1.25rem 1rem}.celebration-emoji{font-size:5rem}.celebration-title{font-size:clamp(2rem,9vw,3.2rem);margin:.8rem 0}.celebration-text{font-size:1.05rem;margin:0 auto 2rem}.love-messages{gap:1rem;margin-bottom:2rem}.love-msg{font-size:1.05rem;padding:1rem 1.25rem}}.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:1}.confetti{position:absolute;width:10px;height:10px;background:#f7b5d1;top:-10px;animation:confettiFall 3s linear infinite}.confetti:nth-child(odd){background:#f9d2e5}.confetti:nth-child(3n){background:#fbe3ef}.confetti:nth-child(4n){background:#e86fa5}.confetti:nth-child(5n){background:#f28cb4}.confetti:nth-child(1){left:5%;animation-duration:2.5s;animation-delay:0s}.confetti:nth-child(2){left:10%;animation-duration:3s;animation-delay:.2s}.confetti:nth-child(3){left:15%;animation-duration:2.8s;animation-delay:.4s}.confetti:nth-child(4){left:20%;animation-duration:3.2s;animation-delay:.1s}.confetti:nth-child(5){left:25%;animation-duration:2.7s;animation-delay:.6s}.confetti:nth-child(6){left:30%;animation-duration:3.1s;animation-delay:.3s}.confetti:nth-child(7){left:35%;animation-duration:2.9s;animation-delay:.5s}.confetti:nth-child(8){left:40%;animation-duration:3s;animation-delay:.2s}.confetti:nth-child(9){left:45%;animation-duration:2.6s;animation-delay:.7s}.confetti:nth-child(10){left:50%;animation-duration:3.3s;animation-delay:.1s}.confetti:nth-child(11){left:55%;animation-duration:2.8s;animation-delay:.4s}.confetti:nth-child(12){left:60%;animation-duration:3.1s;animation-delay:.6s}.confetti:nth-child(13){left:65%;animation-duration:2.7s;animation-delay:.3s}.confetti:nth-child(14){left:70%;animation-duration:3.2s;animation-delay:.5s}.confetti:nth-child(15){left:75%;animation-duration:2.9s;animation-delay:.2s}.confetti:nth-child(16){left:80%;animation-duration:3s;animation-delay:.7s}.confetti:nth-child(17){left:85%;animation-duration:2.8s;animation-delay:.1s}.confetti:nth-child(18){left:90%;animation-duration:3.1s;animation-delay:.4s}.confetti:nth-child(19){left:95%;animation-duration:2.7s;animation-delay:.6s}.confetti:nth-child(20){left:8%;animation-duration:3.3s;animation-delay:.8s}.confetti:nth-child(21){left:12%;animation-duration:2.9s;animation-delay:.3s}.confetti:nth-child(22){left:18%;animation-duration:3.2s;animation-delay:.5s}.confetti:nth-child(23){left:23%;animation-duration:2.6s;animation-delay:.2s}.confetti:nth-child(24){left:28%;animation-duration:3.1s;animation-delay:.7s}.confetti:nth-child(25){left:33%;animation-duration:2.8s;animation-delay:.1s}.confetti:nth-child(26){left:38%;animation-duration:3s;animation-delay:.4s}.confetti:nth-child(27){left:43%;animation-duration:2.7s;animation-delay:.6s}.confetti:nth-child(28){left:48%;animation-duration:3.3s;animation-delay:.3s}.confetti:nth-child(29){left:53%;animation-duration:2.9s;animation-delay:.8s}.confetti:nth-child(30){left:58%;animation-duration:3.2s;animation-delay:.2s}.confetti:nth-child(31){left:63%;animation-duration:2.6s;animation-delay:.5s}.confetti:nth-child(32){left:68%;animation-duration:3.1s;animation-delay:.1s}.confetti:nth-child(33){left:73%;animation-duration:2.8s;animation-delay:.7s}.confetti:nth-child(34){left:78%;animation-duration:3s;animation-delay:.4s}.confetti:nth-child(35){left:83%;animation-duration:2.7s;animation-delay:.6s}.confetti:nth-child(36){left:88%;animation-duration:3.3s;animation-delay:.3s}.confetti:nth-child(37){left:93%;animation-duration:2.9s;animation-delay:.8s}.confetti:nth-child(38){left:7%;animation-duration:3.2s;animation-delay:.2s}.confetti:nth-child(39){left:17%;animation-duration:2.6s;animation-delay:.5s}.confetti:nth-child(40){left:27%;animation-duration:3.1s;animation-delay:.1s}.confetti:nth-child(41){left:37%;animation-duration:2.8s;animation-delay:.7s}.confetti:nth-child(42){left:47%;animation-duration:3s;animation-delay:.4s}.confetti:nth-child(43){left:57%;animation-duration:2.7s;animation-delay:.6s}.confetti:nth-child(44){left:67%;animation-duration:3.3s;animation-delay:.3s}.confetti:nth-child(45){left:77%;animation-duration:2.9s;animation-delay:.8s}.confetti:nth-child(46){left:87%;animation-duration:3.2s;animation-delay:.2s}.confetti:nth-child(47){left:13%;animation-duration:2.6s;animation-delay:.5s}.confetti:nth-child(48){left:31%;animation-duration:3.1s;animation-delay:.1s}.confetti:nth-child(49){left:51%;animation-duration:2.8s;animation-delay:.7s}.confetti:nth-child(50){left:71%;animation-duration:3s;animation-delay:.4s}@keyframes confettiFall{0%{top:-10px;opacity:1;transform:rotate(0)}to{top:100vh;opacity:.3;transform:rotate(720deg)}}.hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.heart{position:absolute;width:18px;height:18px;background:#f7b5d199;transform:rotate(45deg);border-radius:4px;animation:float 12s linear infinite}.heart:before,.heart:after{content:"";position:absolute;width:18px;height:18px;background:#f7b5d199;border-radius:50%}.heart:before{top:-9px;left:0}.heart:after{left:-9px;top:0}.heart:nth-child(1){left:8%;animation-duration:10s;animation-delay:-2s}.heart:nth-child(2){left:20%;animation-duration:12s;animation-delay:-4s}.heart:nth-child(3){left:35%;animation-duration:9s;animation-delay:-1s}.heart:nth-child(4){left:50%;animation-duration:11s;animation-delay:-6s}.heart:nth-child(5){left:62%;animation-duration:13s;animation-delay:-3s}.heart:nth-child(6){left:72%;animation-duration:10.5s;animation-delay:-5s}.heart:nth-child(7){left:82%;animation-duration:12.5s;animation-delay:-7s}.heart:nth-child(8){left:90%;animation-duration:9.5s;animation-delay:-2.5s}.heart:nth-child(9){left:15%;animation-duration:14s;animation-delay:-8s}.heart:nth-child(10){left:45%;animation-duration:15s;animation-delay:-9s}@keyframes float{0%{transform:translateY(100vh) rotate(45deg);opacity:0}10%{opacity:.6}90%{opacity:.6}to{transform:translateY(-10vh) rotate(45deg);opacity:0}}.music-player{position:fixed;bottom:2rem;right:2rem;background:linear-gradient(135deg,#fffffff2,#fff8fce6);border:1px solid rgba(249,210,229,.6);border-radius:24px;padding:1.2rem 1.5rem;box-shadow:0 15px 40px #f7b5d140,0 8px 20px #ed98bd26;z-index:100;display:flex;flex-direction:column;gap:1rem;min-width:280px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .3s ease}.music-player:hover{transform:translateY(-5px);box-shadow:0 20px 50px #f7b5d14d,0 10px 25px #ed98bd33}.player-controls{display:flex;gap:.8rem;justify-content:center;align-items:center}.progress-bar{display:flex;flex-direction:column;gap:.4rem}.progress-slider{width:100%;height:6px;border-radius:999px;background:linear-gradient(to right,#f7b5d199 0% 50%,#f3c6dc33 50% 100%);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#f7b5d1,#f9d2e5);cursor:pointer;border:2px solid white;box-shadow:0 2px 8px #f7b5d166}.progress-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#f7b5d1,#f9d2e5);cursor:pointer;border:2px solid white;box-shadow:0 2px 8px #f7b5d166}.progress-time{font-size:.75rem;color:#7a5a6a;text-align:center}.player-btn{background:linear-gradient(135deg,#f7b5d133,#f9d2e526);border:1px solid rgba(249,210,229,.4);border-radius:12px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:all .3s ease;color:#a24a76}.player-btn:hover{background:linear-gradient(135deg,#f7b5d14d,#f9d2e540);transform:scale(1.1);border-color:#f9d2e599}.player-btn-main{width:48px;height:48px;background:linear-gradient(135deg,#f7b5d1,#f9d2e5);color:#6c2a4f;font-size:1.3rem}.player-btn-main:hover{background:linear-gradient(135deg,#f9d2e5,#f7b5d1);transform:scale(1.15)}.volume-control{display:flex;align-items:center;gap:.8rem}.volume-icon{font-size:1.1rem}.volume-slider{flex:1;height:6px;border-radius:3px;background:linear-gradient(to right,rgba(247,181,209,.3) 0%,rgba(247,181,209,.3) var(--volume, 50%),rgba(243,198,220,.2) var(--volume, 50%),rgba(243,198,220,.2) 100%);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#f7b5d1,#f9d2e5);cursor:pointer;border:2px solid white;box-shadow:0 2px 8px #f7b5d166;transition:transform .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#f7b5d1,#f9d2e5);cursor:pointer;border:2px solid white;box-shadow:0 2px 8px #f7b5d166;transition:transform .2s ease}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.song-info{text-align:center;font-size:.85rem;color:#7a5a6a;font-weight:500;padding-top:.5rem;border-top:1px solid rgba(249,210,229,.3)}@media(max-width:640px){.music-player{bottom:1rem;right:1rem;left:1rem;min-width:auto;padding:.8rem 1rem;flex-direction:row;align-items:center;gap:.75rem}.progress-bar{flex:1}.volume-control{display:none}.song-info{display:block;border-top:none;padding-top:0;font-size:.75rem;text-align:left;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){.heart,.envelope-seal,.envelope-hint{animation:none}}