*{box-sizing:border-box}.envelope-wrapper{background:linear-gradient(135deg,#fff5f9 0%,#fffbfd 50%,#fff 100%) 0 0/200% 200%;justify-content:center;align-items:center;width:100vw;height:100vh;animation:12s ease-in-out infinite subtle-gradient;display:flex;position:relative;overflow:hidden}.envelope-wrapper.envelope-preview{width:100%;height:100vh;min-height:100vh}@media (max-width:768px){.envelope-wrapper.envelope-preview{height:100vh;min-height:100vh}}@media (max-width:480px){.envelope-wrapper.envelope-preview{height:100vh;min-height:100vh}}.envelope-wrapper:before{content:"💕";opacity:.08;font-size:60px;animation:8s ease-in-out infinite gentle-float;position:absolute;top:15%;left:15%}.envelope-wrapper:after{content:"💖";opacity:.06;font-size:50px;animation:10s ease-in-out 3s infinite gentle-float;position:absolute;bottom:20%;right:20%}@keyframes subtle-gradient{0%,to{background-position:0%}50%{background-position:100%}}@keyframes gentle-float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-15px)rotate(5deg)}}.envelope{perspective:800px;cursor:pointer;background:linear-gradient(135deg,#ffc3d5 0%,#ffb3c9 100%);width:400px;height:200px;position:relative}@media (max-width:768px){.envelope{perspective:640px;width:320px;height:160px}}@media (max-width:480px){.envelope{perspective:640px;width:min(340px,85vw);height:min(170px,42.5vw)}}.envelope:after{content:"";border:0 solid;border-color:rgba(var(--theme-envelope-shadow,255,105,180),.15);z-index:2;border-width:90px 200px;border-top-color:#0000;width:0;height:0;position:absolute;top:0;left:0}@media (max-width:768px){.envelope:after{border-width:72px 160px}}@media (max-width:480px){.envelope:after{border-width:76.5px 170px}}.envelope .flap{z-index:3;border:100px solid #0000;border-width:100px 200px;width:100%;height:0;position:absolute}@media (max-width:768px){.envelope .flap{border-width:80px 160px}}@media (max-width:480px){.envelope .flap{border-width:85px 170px}}.envelope .flap.front{z-index:3;border-bottom-color:#ffc9db;border-left-color:#ffe0eb;border-right-color:#ffe0eb}.envelope .flap.front:after{content:"";border:98px solid #0000;border-width:98px 200px;border-bottom-color:var(--theme-flap-front-after,#fff0f5);width:100%;height:0;position:absolute;bottom:-100px;left:-200px}@media (max-width:768px){.envelope .flap.front:after{border-width:78.4px 160px;bottom:-80px;left:-160px}}@media (max-width:480px){.envelope .flap.front:after{border-width:83.3px 170px;bottom:-85px;left:-170px}}.envelope .flap.top{z-index:3;-webkit-transform-origin-y:top;transform-origin-y:top;perspective:800px;transform-style:preserve-3d;border-top-width:110px;border-top-color:#ffadc7;animation-duration:1s;animation-fill-mode:forwards}@media (max-width:768px){.envelope .flap.top{border-top-width:88px}}@media (max-width:480px){.envelope .flap.top{border-top-width:93.5px}}.envelope.open .flap.top{animation-name:flip}.envelope .flap.top:after{content:"";border:108px solid #0000;border-width:108px 200px;border-top-color:var(--theme-flap-top-after,#ffe6f0);width:100%;height:0;position:absolute;top:-110px;left:-200px}@media (max-width:768px){.envelope .flap.top:after{border-width:86.4px 160px;top:-88px;left:-160px}}@media (max-width:480px){.envelope .flap.top:after{border-width:91.8px 170px;top:-93.5px;left:-170px}}.envelope .letter{z-index:1;width:384px;height:168px;transform-style:preserve-3d;box-shadow:0 2px 8px rgba(var(--theme-letter-shadow,255,182,193),.2);background:linear-gradient(135deg,#fff5f8 0%,#fff 100%);border:2px solid #ffc9db;animation-duration:2s;animation-delay:1.5s;animation-fill-mode:forwards;position:absolute;top:16px;left:6px;overflow:visible}@media (max-width:768px){.envelope .letter{width:308px;height:134px;top:13px;left:5px}}@media (max-width:480px){.envelope .letter{width:calc(100% - 16px);height:calc(100% - 32px);top:8%;left:3%}}.envelope .letter-content{color:#d63384;text-align:center;width:100%;height:100%;font-size:15px;line-height:1.45;font-family:var(--font-kanit),serif;z-index:0;background:0 0;flex-direction:column;justify-content:center;align-items:center;padding:16px 20px;display:flex;position:absolute;top:0;left:0;overflow:hidden}.letter-dear{color:#ff69b4;margin-bottom:8px;font-size:16px;font-weight:600}.letter-preview-content{color:#d63384;word-wrap:break-word;max-width:100%;font-size:14px;line-height:1.5}@media (max-width:480px){.envelope .letter-content{padding:12px 14px;font-size:13px;line-height:1.4}.letter-dear{margin-bottom:6px;font-size:14px}.letter-preview-content{font-size:12px;line-height:1.45}.read-more-text{font-size:11px}}.envelope.open .letter{animation-name:remove}.envelope .letter:before,.envelope .letter:after{content:"";background:var(--theme-letter-bg,linear-gradient(135deg,#fff5f8 0%,#fff 100%));border:2px solid var(--theme-letter-border,#ffc9db);-webkit-transform-origin-y:top;transform-origin-y:top;width:384px;height:75%;transform-style:preserve-3d;animation-duration:1s;animation-delay:4s;animation-fill-mode:forwards;position:absolute;left:-1px;transform:rotateX(10deg)}@media (max-width:768px){.envelope .letter:before,.envelope .letter:after{width:308px}}@media (max-width:480px){.envelope .letter:before,.envelope .letter:after{width:calc(100% + 2px)}}.envelope .letter:before{z-index:2;top:-1px}.envelope.open .letter:before{animation-name:fold-up}.envelope .letter:after{-webkit-transform-origin-y:bottom;transform-origin-y:bottom;z-index:2;animation-delay:5s;animation-fill-mode:forwards;bottom:-1px;transform:rotateX(-5deg)}.envelope.open .letter:after{animation-name:fold-down}@keyframes flip{to{z-index:1;transform:rotateX(180deg)}}@keyframes remove{50%{top:-200px}to{z-index:3;top:16px}}@keyframes fold-up{0%{}to{transform:rotateX(140deg)}}@keyframes fold-down{0%{}to{transform:rotateX(-140deg)}}.reset-button{color:#fff;text-align:center;text-shadow:0 2px 4px #0003;cursor:pointer;z-index:10;font-size:16px;font-weight:600;font-family:var(--font-kanit),serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:30px;padding:12px 28px;display:inline-block;position:absolute;top:40px;right:40px;box-shadow:0 4px 15px #0003}@media (max-width:480px){.reset-button{border-radius:25px;padding:10px 20px;font-size:14px;top:20px;right:20px}}.read-more{margin-top:10px}.read-more-text{color:#ff69b4;cursor:pointer;font-size:12px;font-weight:600;font-family:var(--font-kanit),serif;font-style:italic}.letter-modal-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.letter-modal{background:linear-gradient(135deg,#fff5f8 0%,#fff 100%);border:3px solid #ffc9db;border-radius:20px;width:min(600px,90vw);max-height:80vh;position:relative;overflow:hidden;box-shadow:0 20px 60px #ff69b44d}.modal-close{color:#fff;cursor:pointer;z-index:10;background:linear-gradient(135deg,#ffb3c9 0%,#ff8fb3 100%);border:2px solid #ff69b4;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;display:flex;position:absolute;top:15px;right:15px;box-shadow:0 2px 8px #ff69b44d}.modal-content{flex-direction:column;max-height:80vh;padding:40px;display:flex;overflow:hidden auto}.modal-header{text-align:center;border-bottom:2px solid var(--theme-modal-border,#ffc9db);margin-bottom:30px;padding-bottom:20px}.modal-header h2{color:#ff69b4;font-size:28px;font-family:var(--font-kanit),serif;margin:0;font-weight:600}.modal-body{font-family:var(--font-kanit),serif;color:#d63384;text-align:center;max-height:calc(80vh - 200px);padding-right:0;font-size:18px;line-height:1.6;overflow-y:auto}.modal-body p{margin:6px 0}.modal-body::-webkit-scrollbar{display:none}.modal-body{scrollbar-width:none;-ms-overflow-style:none}.modal-footer{text-align:center;border-top:2px solid var(--theme-modal-border,#ffc9db);color:#ff69b4;font-size:20px;font-family:var(--font-kanit),serif;margin-top:30px;padding-top:20px}.scroll-indicator{z-index:100;pointer-events:none;position:absolute;bottom:100px;left:50%;transform:translate(-50%)}.scroll-arrow{color:#ff69b4;text-shadow:0 2px 8px #ff69b466;filter:drop-shadow(0 0 8px #ff69b499);font-size:12px}@media (max-width:480px){.modal-content{padding:30px 20px}.modal-header{margin-bottom:20px;padding-bottom:15px}.modal-header h2{font-size:22px}.modal-body{max-height:calc(80vh - 180px);font-size:16px;line-height:1.5}.modal-footer{margin-top:20px;padding-top:15px;font-size:16px}.modal-close{width:36px;height:36px;font-size:20px;top:10px;right:10px}.scroll-indicator{bottom:60px}.scroll-arrow{font-size:28px}}