@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Ma+Shan+Zheng&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--paper: #F7F3EC;--paper-dark: #EDE7DC;--ink: #2C2416;--ink-light: #6B5E4A;--ink-fade: #A39985;--wax: #C41E3A;--wax-glow: rgba(196, 30, 58, .2);--gold: #B8860B;--bg-wood: #E8DDD0}html,body,#root{height:100%;font-family:"Noto Serif SC",Songti SC,SimSun,serif;-webkit-font-smoothing:antialiased;background:var(--bg-wood);background-image:radial-gradient(ellipse at 20% 50%,rgba(180,160,140,.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(200,180,150,.1) 0%,transparent 50%);color:var(--ink);overflow:auto}.paper{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");box-shadow:0 1px 2px #0000000f,0 4px 12px #0000000d,0 12px 32px #00000012,inset 0 0 80px #8b775a0a;border-radius:4px}.desktop{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative}.envelope{position:relative;width:180px;height:120px;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),filter .35s ease;filter:drop-shadow(0 4px 12px rgba(0,0,0,.12))}.envelope:hover{filter:drop-shadow(0 12px 28px rgba(0,0,0,.2))}.envelope-body{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,#f8f1e5,#ede3d3 40%,#e4d8c4);border-radius:6px;border:1px solid rgba(0,0,0,.05)}.envelope-flap{position:absolute;top:0;left:-1px;right:-1px;height:75px;background:linear-gradient(175deg,#f5eddd,#ece0cd,#e2d4bd);clip-path:polygon(0 0,50% 68%,100% 0);border-radius:4px 4px 0 0;z-index:2;transform-origin:top center;box-shadow:0 2px 4px #0000000a}.envelope-seal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:radial-gradient(circle at 40% 35%,#d4353c,#8b1a23);border-radius:50%;z-index:3;box-shadow:0 3px 8px #c41e3a73}.envelope-seal:after{content:"封";color:#ffffff8c;font-size:12px;font-family:Ma Shan Zheng,cursive;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.envelope-stamp{position:absolute;top:12px;right:14px;width:38px;height:46px;background:linear-gradient(135deg,#d4c9b8,#c4b8a4);border:2px dashed rgba(0,0,0,.1);z-index:1;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--ink-fade);transform:rotate(3deg)}.envelope-from{position:absolute;bottom:16px;left:18px;font-size:12px;color:var(--ink-light);z-index:1}.envelope-date{position:absolute;bottom:10px;right:18px;font-size:10px;color:var(--ink-fade);z-index:1}.letter-paper{position:relative;width:100%;padding:3rem 2.5rem 4rem;min-height:460px}.letter-paper:before{content:"";position:absolute;top:2rem;bottom:2rem;left:2.5rem;width:1px;background:repeating-linear-gradient(to bottom,rgba(139,119,90,.12) 0px,rgba(139,119,90,.12) 1px,transparent 1px,transparent 28px)}.letter-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(139,119,90,.12)}.letter-to{font-size:13px;color:var(--ink-fade);line-height:1.8}.letter-date-stamp{text-align:right;font-size:11px;color:var(--ink-fade);line-height:1.6}.letter-body{font-size:15px;line-height:2;color:var(--ink)}.letter-signature{margin-top:2.5rem;font-family:Ma Shan Zheng,cursive;font-size:22px;color:var(--ink-light);text-align:right}.reply-area{background:var(--paper);border-top:2px solid rgba(139,119,90,.1);box-shadow:0 -4px 24px #0000000f}.reply-textarea{width:100%;min-height:80px;border:none;outline:none;resize:none;background:transparent;font-family:"Noto Serif SC",serif;font-size:15px;line-height:1.8;color:var(--ink)}.reply-textarea::placeholder{color:var(--ink-fade);font-style:italic}.send-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 2rem;background:var(--wax);color:#fff;border:none;border-radius:4px;font-family:"Noto Serif SC",serif;font-size:14px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px var(--wax-glow)}.send-btn:hover{background:#a0182e;transform:translateY(-1px)}.send-btn:active{transform:translateY(0)}.send-btn:disabled{opacity:.4;cursor:not-allowed}.back-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-light);transition:all .2s ease;box-shadow:0 1px 3px #0000000f;margin-bottom:1.5rem}.back-btn:hover{background:#fff;transform:scale(1.05)}@keyframes glowPulse{0%,to{box-shadow:0 0 4px var(--wax-glow)}50%{box-shadow:0 0 16px var(--wax-glow),0 0 32px #c41e3a26}}.new-dot{width:10px;height:10px;border-radius:50%;background:var(--wax);animation:glowPulse 2s ease-in-out infinite;position:absolute;top:-4px;right:-4px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#8b775a33;border-radius:2px}.env-stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}