:root{--ink:#4b382f;--paper:#f8f0df;--rose:#9e5e62;--light:#fff9ee}*{box-sizing:border-box}html{min-height:100%;background:#122f48}body{min-height:100vh;margin:0;color:#fff;font-family:"Songti SC","STSong","Noto Serif SC",serif;overflow-x:hidden}.scene,.veil{position:fixed;inset:0}.scene{background:url("assets/background.jpg") center 55%/cover no-repeat;transform:scale(1.035);animation:breathe 16s ease-in-out infinite alternate}.veil{background:linear-gradient(180deg,rgba(5,24,40,.24),rgba(7,20,31,.49) 67%,rgba(5,11,18,.72));backdrop-filter:saturate(.82)}main{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:max(28px,env(safe-area-inset-top)) 20px max(48px,env(safe-area-inset-bottom))}.intro{text-align:center;width:min(92vw,660px);transition:opacity .8s ease,transform .8s ease}.intro.leaving{opacity:0;transform:translateY(-24px) scale(.97);pointer-events:none}.eyebrow{font:500 11px/1.5 Georgia,serif;letter-spacing:.38em;margin:0 0 12px;color:rgba(255,255,255,.72)}h1{font-size:clamp(26px,6vw,44px);font-weight:400;letter-spacing:.12em;margin:0;text-shadow:0 3px 24px rgba(0,0,0,.45)}.hint{margin:13px 0 34px;color:rgba(255,255,255,.72);font-size:14px;letter-spacing:.08em}.envelope{display:block;position:relative;width:min(330px,80vw);aspect-ratio:1.52;margin:auto;border:0;padding:0;background:transparent;cursor:pointer;filter:drop-shadow(0 24px 28px rgba(0,0,0,.38));perspective:900px}.envelope-back,.envelope-front,.envelope-flap,.letter-preview{position:absolute;inset:0;border-radius:4px}.envelope-back{background:#e5cfad}.letter-preview{left:7%;right:7%;top:7%;bottom:auto;height:83%;padding:24px 22px;background:#fff8e9;color:#a88b76;box-shadow:0 0 10px rgba(52,27,14,.16);transition:transform 1s .35s cubic-bezier(.2,.75,.2,1);font:10px/2 Georgia,serif;letter-spacing:.2em}.letter-preview i{display:block;height:1px;background:#d9cabb;margin-top:12px}.envelope-front{z-index:3;background:linear-gradient(150deg,transparent 49.6%,#dbc09a 50%) left/50% 100% no-repeat,linear-gradient(210deg,transparent 49.6%,#e8d2af 50%) right/50% 100% no-repeat,linear-gradient(18deg,#ddc39e 49%,transparent 50%) bottom/100% 70% no-repeat}.envelope-flap{z-index:4;height:55%;background:linear-gradient(145deg,#efdcbc,#d8ba8e);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .75s cubic-bezier(.4,0,.2,1),z-index 0s .3s}.seal{position:absolute;z-index:5;left:50%;top:48%;width:52px;height:52px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#b76d70,#733439 72%);box-shadow:0 4px 12px rgba(65,19,24,.38),inset 0 0 0 3px rgba(255,255,255,.1);font-size:19px;color:#f4d7ca;transition:opacity .25s,transform .45s}.envelope.opening .envelope-flap{transform:rotateX(180deg);z-index:1}.envelope.opening .seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}.envelope.opening .letter-preview{transform:translateY(-47%)}.open-button{margin-top:30px;padding:11px 27px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(13,32,48,.25);backdrop-filter:blur(8px);color:#fff;font:14px/1.5 inherit;letter-spacing:.16em;cursor:pointer;transition:.25s}.open-button:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}.letter{display:none;width:min(92vw,720px);opacity:0;transform:translateY(34px) scale(.97)}.letter.visible{display:block;animation:letterIn 1.1s cubic-bezier(.2,.8,.2,1) forwards}.paper{position:relative;overflow:hidden;padding:clamp(34px,7vw,68px) clamp(28px,8vw,76px);color:var(--ink);background:linear-gradient(rgba(255,250,237,.965),rgba(246,234,211,.965)),repeating-linear-gradient(0deg,transparent 0 30px,rgba(119,85,65,.055) 31px);border-radius:3px;box-shadow:0 28px 80px rgba(0,0,0,.42);line-height:2.08;letter-spacing:.055em}.paper:before,.paper:after{content:"";position:absolute;width:80px;height:80px;border:1px solid rgba(139,79,74,.22)}.paper:before{left:14px;top:14px;border-right:0;border-bottom:0}.paper:after{right:14px;bottom:14px;border-left:0;border-top:0}.paper-glow{position:absolute;inset:-30%;background:radial-gradient(circle,rgba(255,255,255,.62),transparent 46%);pointer-events:none}.date{text-align:right;margin:0;color:#988578;font-size:13px}.paper h2{position:relative;margin:23px 0 19px;font-size:clamp(22px,4vw,29px);font-weight:500}.letter-body{position:relative;font-size:clamp(15px,2.5vw,17px)}.letter-body p{opacity:0;transform:translateY(8px);margin:0 0 17px;transition:opacity .8s,transform .8s}.letter-body p.shown{opacity:1;transform:none}.signature{position:relative;margin-top:28px;text-align:right}.signature span{display:block;color:#8e786a;font-size:13px;margin-bottom:8px}.signature strong{font-size:16px;font-weight:500;color:var(--rose)}.music-control{position:fixed;z-index:10;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:8px 15px 8px 8px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(9,26,39,.67);backdrop-filter:blur(14px);color:#fff;cursor:pointer}.music-control[hidden]{display:none}.disc{width:33px;height:33px;border-radius:50%;background:radial-gradient(circle,#d7b8a3 0 8%,#243a4a 9% 19%,#101820 20% 60%,#5c7483 61% 64%,#101820 65%);animation:spin 4s linear infinite}.paused .disc{animation-play-state:paused}.music-text{font:12px/1.4 system-ui,sans-serif;color:rgba(255,255,255,.84)}.audio-tip{position:fixed;z-index:12;left:50%;bottom:78px;transform:translate(-50%,10px);opacity:0;margin:0;padding:9px 14px;border-radius:8px;background:rgba(0,0,0,.62);font:13px/1.4 system-ui,sans-serif;transition:.3s;pointer-events:none}.audio-tip.show{opacity:1;transform:translate(-50%,0)}.rain{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}.drop{position:absolute;top:-12vh;width:1px;height:48px;background:linear-gradient(transparent,rgba(207,228,240,.35));animation:fall linear infinite}.petal{position:fixed;z-index:3;top:-20px;width:8px;height:8px;border-radius:70% 0 70% 0;background:rgba(255,235,226,.72);pointer-events:none;animation:petalFall linear forwards}@keyframes breathe{to{transform:scale(1.08) translateY(-.7%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fall{to{transform:translate3d(-7vw,115vh,0)}}@keyframes letterIn{to{opacity:1;transform:none}}@keyframes petalFall{to{transform:translate3d(var(--drift),105vh,0) rotate(560deg);opacity:.1}}@media(max-width:520px){main{align-items:start;padding-top:9vh}.paper{line-height:1.95}.music-text{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rain{display:none}}