*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--ink:#2c1a0e;--ink-light:#5a3e2b;--ink-faint:#8a6a52;--paper:#f5efe6;--paper-dark:#ece4d6;--paper-line:#5a3e2b1f;--red:#c0392b;--gold:#b8962e}html,body{background:#1a1008;justify-content:center;align-items:center;min-height:100vh;font-family:Noto Serif SC,serif;display:flex;overflow-x:hidden}body:before{content:"";pointer-events:none;background:radial-gradient(60% 50% at 20% 30%,#b4783c14 0%,#0000 70%),radial-gradient(50% 60% at 80% 70%,#8c50280f 0%,#0000 70%);position:fixed;inset:0}.scene{flex-direction:column;align-items:center;width:100%;max-width:780px;padding:3rem 1.5rem;display:flex;position:relative}.petal{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:1.2rem;animation:linear infinite fall;position:fixed}.petal:first-child{font-size:1rem;animation-duration:12s;animation-delay:0s;left:8%}.petal:nth-child(2){font-size:.8rem;animation-duration:15s;animation-delay:3s;left:22%}.petal:nth-child(3){font-size:1.1rem;animation-duration:10s;animation-delay:1.5s;left:55%}.petal:nth-child(4){font-size:.9rem;animation-duration:14s;animation-delay:5s;left:75%}.petal:nth-child(5){font-size:1rem;animation-duration:11s;animation-delay:2s;left:90%}@keyframes fall{0%{opacity:0;transform:translateY(-60px)rotate(0)}10%{opacity:.6}90%{opacity:.4}to{opacity:0;transform:translateY(110vh)rotate(360deg)}}.envelope-wrap{perspective:1000px;cursor:pointer;margin-bottom:2rem}.envelope{width:320px;height:200px;transform-style:preserve-3d;animation:4s ease-in-out infinite envelope-float;position:relative}@keyframes envelope-float{0%,to{transform:translateY(0)rotateX(2deg)}50%{transform:translateY(-10px)rotateX(-1deg)}}.env-body{background:linear-gradient(160deg,#f0e6d6 0%,#e8d8c0 100%);border:1px solid #5a3e2b4d;border-radius:4px;width:320px;height:200px;position:relative;overflow:hidden;box-shadow:0 20px 60px #0006,0 4px 12px #0000004d,inset 0 1px #fff6}.env-flap{z-index:2;filter:drop-shadow(0 2px 4px #00000026);transform-origin:top;border-top:110px solid #dfc9a8;border-left:160px solid #0000;border-right:160px solid #0000;height:0;transition:transform .6s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;right:0}.envelope-wrap:hover .env-flap{transform:rotateX(-160deg)}.env-body:before{content:"";background:linear-gradient(135deg,#0000 49.5%,#5a3e2b1f 49.5% 50.5%,#0000 50.5%),linear-gradient(225deg,#0000 49.5%,#5a3e2b1f 49.5% 50.5%,#0000 50.5%);position:absolute;inset:0}.seal{z-index:3;color:#ffffffe6;background:radial-gradient(circle at 35% 35%,#e84040,#a01515);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;font-size:20px;transition:transform .3s;display:flex;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%);box-shadow:0 3px 10px #00000059,inset 0 1px #fff3}.envelope-wrap:hover .seal{transform:translate(50%,50%)scale(.9)}.hint{color:#b48c6499;letter-spacing:.15em;margin-bottom:2.5rem;font-family:Noto Serif SC,serif;font-size:12px;animation:2s ease-in-out infinite pulse-hint}@keyframes pulse-hint{0%,to{opacity:.5}50%{opacity:1}}.letter{background:var(--paper);border-radius:2px;width:100%;max-width:560px;padding:3.5rem 4rem;animation:1.2s cubic-bezier(.22,1,.36,1) .3s both letter-appear;position:relative;box-shadow:0 30px 80px #00000073,0 8px 24px #00000040,inset 0 0 0 1px #5a3e2b14}@keyframes letter-appear{0%{opacity:0;transform:translateY(30px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.letter:before{content:"";background-image:repeating-linear-gradient(to bottom, transparent, transparent 35px, var(--paper-line) 35px, var(--paper-line) 36px);pointer-events:none;background-position:0 78px;border-radius:2px;position:absolute;inset:0}.letter:after{content:"";background:#b4505033;width:1px;position:absolute;top:0;bottom:0;left:3.5rem}.corner-ribbon{border-top:60px solid #c0392b1a;border-left:60px solid #0000;border-radius:0 2px 0 0;width:0;height:0;position:absolute;top:0;right:0}.deco-flower{opacity:.12;-webkit-user-select:none;user-select:none;font-size:28px;position:absolute;top:1.5rem;right:1.8rem;transform:rotate(15deg)}.fold{background:linear-gradient(225deg, var(--paper-dark) 0%, var(--paper-dark) 50%, transparent 50%);border-radius:0 0 2px;width:40px;height:40px;position:absolute;bottom:0;right:0}.fold:after{content:"";background:linear-gradient(225deg,#00000014 0%,#0000 60%);width:40px;height:40px;position:absolute;bottom:0;right:0}.salutation{color:var(--ink);z-index:1;margin-bottom:1.8rem;font-family:Ma Shan Zheng,cursive;font-size:1.4rem;animation:.8s .8s both fade-up;position:relative}.body-text{color:var(--ink-light);z-index:1;white-space:pre-line;font-family:Noto Serif SC,serif;font-size:.95rem;font-weight:300;line-height:2.25;position:relative}.para{margin-bottom:1.5rem;animation:.8s both fade-up}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.highlight{color:var(--red);font-family:Ma Shan Zheng,cursive;font-size:1.05rem}.sign-block{text-align:right;z-index:1;margin-top:2.5rem;animation:.8s 3.6s both fade-up;position:relative}.sign-name{color:var(--ink);font-family:Zhi Mang Xing,cursive;font-size:1.8rem;line-height:1.2}.sign-date{color:var(--ink-faint);letter-spacing:.12em;margin-top:.5rem;font-family:Noto Serif SC,serif;font-size:.78rem;font-weight:300}.ink-dot{background:var(--ink);opacity:.25;vertical-align:middle;border-radius:50%;width:4px;height:4px;margin:0 4px;display:inline-block}.ornament{text-align:center;color:#b48c6466;letter-spacing:.3em;margin-top:2rem;font-size:12px;animation:.8s 3.8s both fade-up}.stamp{background:#f5efe6e6;border:2px solid #c0392b80;border-radius:3px;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:64px;height:64px;display:flex;position:absolute;top:2rem;right:-1rem;transform:rotate(8deg);box-shadow:inset 0 0 0 3px #c0392b1a}.stamp-top{color:var(--red);letter-spacing:.1em;font-size:9px;font-weight:500}.stamp-char{color:var(--red);opacity:.7;font-family:Ma Shan Zheng,cursive;font-size:22px;line-height:1}@media (width<=600px){.letter{padding:2.5rem 2rem}.letter:after{left:2.5rem}.stamp{display:none}}
