@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Noto+Serif+SC:wght@400;700&display=swap";:root{--font-serif:"Noto Serif SC", "STSong", serif;--font-cursive:"Dancing Script", cursive;--env-top:#d8e1ea;--env-bottom:#c4d0dc;--env-side:#b8c5d3}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-serif);background-color:#121a26;overflow:hidden}#app{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative}.bg-initial,.bg-finale{z-index:-1;background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}.bg-initial{opacity:.8;background-color:#1a2436;background-image:url(/bg-start.webp)}.bg-finale{opacity:0;background-color:#0a0a0a;background-image:url(/bg-end.png)}.audio-btn{z-index:999;color:#7ca1d8;cursor:pointer;opacity:.6;background:0 0;border:1px solid #7ca1d8;border-radius:50%;width:40px;height:40px;position:absolute;top:20px;right:20px}#envelope-stage{perspective:1200px;z-index:10;flex-direction:column;align-items:center;display:flex}.envelope{width:340px;height:230px;transform-style:preserve-3d;filter:drop-shadow(0 20px 30px #00000080);animation:6s ease-in-out infinite float;position:relative}.flap{backface-visibility:hidden;width:100%;height:100%;transition:transform 1.5s cubic-bezier(.4,0,.2,1);position:absolute}.bg-envelope-top{background:var(--env-top);clip-path:polygon(0 0,100% 0,50% 55%);transform-origin:top;z-index:4}.bg-envelope-bottom{background:var(--env-bottom);clip-path:polygon(0 100%,100% 100%,50% 45%,0 45%);transform-origin:bottom;z-index:3}.bg-envelope-side{background:var(--env-side)}.flap-left{clip-path:polygon(0 0,55% 50%,0 100%);transform-origin:0;z-index:2}.flap-right{clip-path:polygon(100% 0,45% 50%,100% 100%);transform-origin:100%;z-index:2}.wax-seal{z-index:5;cursor:pointer;background:radial-gradient(circle at 30% 30%,#d4af37,#aa8222,#6b5010);border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:transform .3s;display:flex;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 10px #0006,inset 0 0 5px #ffffff4d}.wax-seal:hover{transform:translate(-50%,-50%)scale(1.1)}.seal-text{font-family:var(--font-serif);color:#4a3500;text-shadow:0 1px 1px #ffffff4d;font-size:24px;font-style:italic}.hint-text{color:#c7d82b;letter-spacing:2px;margin-top:40px;font-size:18px;transition:opacity .5s}#particle-canvas,#balloon-canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}#particle-canvas{z-index:8}#balloon-canvas{z-index:9}#letter-stage{z-index:15;opacity:0;pointer-events:none;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.letter-content{color:#f4eedc;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#141a26d9;border:1px solid #d4af374d;border-radius:8px;width:85%;max-width:440px;padding:40px 32px}.letter-greeting{color:#ffd93d;margin-bottom:28px;font-size:20px}.letter-body{font-size:17px;line-height:2.2;font-family:var(--font-serif);margin-bottom:32px}.letter-signature{text-align:right;color:#f4eedcb3;margin-top:10px;font-family:Dancing Script,cursive;font-size:16px}#album-stage{z-index:15;opacity:0;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.album-viewport{border-radius:12px;width:85%;max-width:380px;overflow:hidden;box-shadow:0 20px 60px #000000b3}.album-track{cursor:grab;transition:transform .3s ease-out;display:flex}.album-track:active{cursor:grabbing}.album-slide{justify-content:center;align-items:center;min-width:100%;display:flex}.album-card{aspect-ratio:3/4;background:#1a1a2e;border-radius:12px;width:100%;overflow:hidden}.album-card img{object-fit:cover;pointer-events:none;width:100%;height:100%}.album-dots{gap:10px;margin-top:20px;display:flex}.album-dot{background:#ffffff4d;border-radius:50%;width:8px;height:8px;transition:background .3s}.album-dot.active{background:#ffd93d}.album-hint{color:#ffffff80;letter-spacing:2px;margin-top:16px;font-size:14px}.album-finish-btn{color:#1a1a2e;font-size:18px;font-family:var(--font-serif);cursor:pointer;letter-spacing:2px;background:linear-gradient(135deg,#d4af37,#fdcb6e);border:none;border-radius:30px;margin-top:24px;padding:12px 36px;transition:transform .2s;box-shadow:0 4px 20px #d4af3766}.album-finish-btn:hover{transform:scale(1.05)}.album-finish-btn:active{transform:scale(.97)}@media (width<=480px){.envelope{width:280px;height:190px}.cursive-title{font-size:48px}.main-title{letter-spacing:8px;font-size:34px}}#finale-stage{text-align:center;z-index:30;pointer-events:none;flex-direction:column;align-items:center;width:100%;display:flex;position:absolute}.cursive-title{font-family:var(--font-cursive);background:linear-gradient(#ffeaa7,#fdcb6e,#e1b12c);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 15px #fdcb6e99)drop-shadow(0 4px 5px #000c);-webkit-background-clip:text;margin-bottom:20px;font-size:65px}.main-title{font-family:var(--font-serif);color:#f0f4f8;text-shadow:0 0 20px #7ca1d899,0 4px 10px #00000080;letter-spacing:12px;margin-bottom:30px;font-size:45px;font-weight:700}.sub-title{color:#f4eedc;letter-spacing:4px;text-shadow:0 2px 5px #000c;font-size:18px}.divider{background:linear-gradient(90deg,#0000,#d4af37cc,#0000);width:80%;max-width:300px;height:1px;margin:20px 0}.hidden{display:none!important}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}