.letter-dialog{position:fixed;inset:0;width:min(940px,96vw);height:min(880px,94svh);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #bda77b40;border-radius:20px;color:#f4dfbc;background:radial-gradient(ellipse at 50% 45%,#32304a,#101324 72%);overflow:hidden;box-shadow:0 25px 100px #0008}
.letter-dialog::backdrop{background:#050813c9;backdrop-filter:blur(9px)}.letter-close{position:absolute;z-index:5;top:20px;right:22px;background:#171b2de8}.letter-stage{position:relative;height:100%;padding:74px 25px 24px;display:flex;justify-content:center;align-items:center;perspective:1200px}.sealed-letter{text-align:center;transition:opacity .55s .7s,transform 1.1s}.letter-eyebrow{font-size:15px;letter-spacing:1px;color:#d0b991;margin-bottom:40px}
.envelope{position:relative;display:block;width:min(380px,76vw);height:min(242px,49vw);margin:auto;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;filter:drop-shadow(0 25px 28px #0005);transition:transform .4s}.envelope:hover{transform:translateY(-7px) rotate(-1deg)}.envelope:focus-visible{outline:2px solid #eacb91;outline-offset:14px;border-radius:8px}.envelope-back{position:absolute;inset:0;border-radius:7px;background:#d0bda3;border:1px solid #f2e1c3}.envelope-note{position:absolute;left:8%;right:8%;top:9%;bottom:8%;border-radius:3px;background:#fff9eb;box-shadow:0 0 10px #715b3830;transition:transform .9s .4s}.envelope-front{position:absolute;inset:0;background:linear-gradient(150deg,#e3d1b8,#f3e4ce);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);border-radius:6px}.envelope-flap{position:absolute;inset:0;background:linear-gradient(180deg,#f4e6d1,#e2ccad);clip-path:polygon(0 0,100% 0,50% 61%);transform-origin:50% 0;backface-visibility:hidden;transition:transform .8s ease;filter:drop-shadow(0 3px 2px #745f3838)}.envelope-seal{position:absolute;left:calc(50% - 23px);top:calc(56% - 23px);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 25%,#c17b89,#7b3f58);color:#f2d2bc;border:3px double #da9a9c;font-size:23px;box-shadow:0 3px 6px #67444b44;transition:opacity .25s,transform .5s}.envelope-address{position:absolute;bottom:12%;left:0;right:0;color:#826b53;font-size:16px;pointer-events:none}.letter-prompt{font-family:KaiTi,STKaiti,"Microsoft YaHei",serif;font-size:19px;line-height:1.9;margin:36px 0 0;color:#d8c6ab}
.letter-sheet{position:absolute;top:74px;bottom:24px;width:min(700px,calc(100% - 50px));padding:44px 46px 50px;background:repeating-linear-gradient(0deg,#967a4610 0 1px,transparent 1px 5px),linear-gradient(125deg,#fff9ed,#f0e5d1);color:#514535;border:1px solid #b39a7155;border-radius:5px;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(100px) scale(.88);box-shadow:0 16px 60px #0004;scrollbar-color:#bca686 #ede2d0;scrollbar-width:thin;transition:opacity .7s .65s,transform 1.1s .4s,visibility 0s .65s;outline:none}.letter-sheet h2{font-family:KaiTi,STKaiti,"Microsoft YaHei",serif;color:#74553f;font-size:29px;font-weight:400;margin:24px 0 30px;line-height:1.5}.letter-sheet p,.letter-signoff{font-family:KaiTi,STKaiti,"Microsoft YaHei",serif;font-size:19px;line-height:2.05;letter-spacing:.4px;margin:0 0 24px;text-align:justify}.letter-sheet .letter-date{font-family:"Birthday Handwriting",cursive;font-size:13px;letter-spacing:1px;color:#a18563;margin-bottom:10px}.letter-signoff{text-align:right;color:#957255;margin:30px 0 0}
.letter-dialog.is-open .envelope-flap{transform:rotateX(180deg)}.letter-dialog.is-open .envelope-seal{opacity:0;transform:translateY(15px) scale(.7)}.letter-dialog.is-open .envelope-note{transform:translateY(-110px)}.letter-dialog.is-open .sealed-letter{opacity:0;transform:translateY(70px) scale(.88);pointer-events:none}.letter-dialog.is-open .letter-sheet{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(max-width:600px){.letter-dialog{width:96vw;height:94svh;border-radius:13px}.letter-close{top:15px;right:15px}.letter-stage{padding:65px 14px 16px}.letter-sheet{top:65px;bottom:16px;width:calc(100% - 28px);padding:28px 24px 35px}.letter-sheet h2{font-size:26px;margin:20px 0 24px}.letter-sheet p,.letter-signoff{font-size:17px;line-height:2}.letter-prompt{font-size:18px}.letter-eyebrow{font-size:13px}}
@media(prefers-reduced-motion:reduce){.sealed-letter,.envelope-flap,.envelope-seal,.envelope-note,.letter-sheet{transition-duration:.01ms;transition-delay:0s}.envelope:hover{transform:none}}
body.reading-letter{overflow:hidden}