:root{--paper:#fff8f6;--ink:#503b47;--muted:#886d7c;--berry:#974b70;--gate-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;font:16px/1.75 var(--gate-font);color:var(--ink);background:radial-gradient(ellipse at 50% 35%,#fffdf9 0,#fff9f6 45%,#f7edf1 100%);min-height:100vh;min-height:100svh}[hidden]{display:none!important}.entry{width:min(100%,650px);margin:0 auto;min-height:100svh;padding:32px 34px 22px;display:flex;flex-direction:column;align-items:center}.brand{font-size:25px;line-height:1.6;font-weight:600;letter-spacing:4px;text-decoration:none;color:#684657;text-align:center}.brand>span{display:block;font-size:12px;font-weight:400;letter-spacing:2px;color:#9a7c8d;margin-top:3px}.letter-scene{position:relative;width:100%;display:grid;place-items:center;flex:1;min-height:570px;margin:18px 0 22px}.envelope-panel,.gate-card{grid-area:1/1;width:100%}.envelope-panel{text-align:center;padding:10px 20px 25px;perspective:1400px}.envelope-overline{font-size:12px;letter-spacing:3px;color:#a17d92;margin:0 0 7px}.envelope-title{font-size:30px;font-weight:550;letter-spacing:3px;margin:0 0 66px;line-height:1.4;color:#735267}.envelope{position:relative;display:block;width:100%;aspect-ratio:1.66;border:0;padding:0;background:transparent;cursor:pointer;perspective:1200px;isolation:isolate;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transform:rotate(-3deg);transition:transform .35s}.envelope:focus-visible{outline:3px solid #ad6e91;outline-offset:15px;border-radius:7px}.envelope:disabled{cursor:default}.envelope-shadow{position:absolute;inset:25px 3% -12px;border-radius:12px;background:#97667819;filter:blur(18px);transform:translateY(12px);z-index:-1}.envelope-back{position:absolute;inset:0;border-radius:7px;background:linear-gradient(125deg,#e7c5d3,#ddb7c9);box-shadow:inset 0 0 0 1px #dcb4c6;z-index:0}.envelope-folds{position:absolute;inset:0;z-index:4;border-radius:6px;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);background:linear-gradient(30deg,#f1d6df 49.8%,#e4bdce 50%,#f3dbe3 50.3%);box-shadow:inset 0 0 0 1px #e3becc}.envelope-front{position:absolute;inset:0;border-radius:6px;z-index:5;clip-path:polygon(0 100%,50% 39%,100% 100%);background:linear-gradient(160deg,#f3dae4,#f8e5eb);box-shadow:inset 0 -1px 0 #d8b1c3}.envelope-address{position:absolute;left:0;right:0;bottom:19%;font-size:14px;letter-spacing:4px;color:#a77890}.envelope-postmark{position:absolute;bottom:9%;right:9%;border:1px solid #bb8ca333;border-radius:50%;font-size:9px;line-height:1.65;padding:7px 10px;color:#b691a3;rotate:12deg}.envelope-flap{position:absolute;inset:0 0 auto;height:55%;z-index:7;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;background:linear-gradient(175deg,#fae8ed,#edcad9);filter:drop-shadow(0 2px 1px #b5819c33);backface-visibility:visible}.envelope-seal{position:absolute;left:50%;top:48%;width:64px;height:64px;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:8;border-radius:48% 46% 49% 44%;background:radial-gradient(circle at 35% 25%,#d29ab5,#ae7395 70%,#996083);border:3px solid #c48ba8;box-shadow:0 4px 7px #83516b24,inset 0 0 0 1px #efc7da,inset 0 -3px 5px #894c7336;transition:box-shadow .25s}.envelope-seal>span{display:grid;place-items:center;width:43px;height:43px;border:1px solid #f4cde144;border-radius:50%;font:33px/1 Georgia,serif;color:#f9dfe9;text-shadow:0 1px #965679}.letter-preview{position:absolute;z-index:2;inset:5% 7% 6%;background:linear-gradient(105deg,#fffdf8,#fff7f1);border:1px solid #f7e6de;border-radius:4px;box-shadow:0 4px 14px #98657914;display:flex;flex-direction:column;align-items:center;padding-top:20px;opacity:0;transform:translateY(4px)}.preview-heart{color:#bb8aa2;font:28px/1.4 Georgia,serif}.preview-title{font:500 22px/1.8 var(--gate-font);letter-spacing:5px;color:#936c80;margin:5px 0 18px}.preview-line{display:block;height:1px;width:72%;background:#e9d7df;margin:11px 0}.preview-line.short{width:52%}.envelope-invitation{margin:32px 0 0;font-size:14px;color:#9b778c;letter-spacing:1px}.envelope-invitation>span{margin-left:7px;color:#bc86a3}
/* Seal lifts, flap turns, paper slides out, then the readable letter replaces it. */
.is-opening .envelope{transform:rotate(0deg);animation:envelope-away .4s 1.4s both;pointer-events:none}.is-opening .envelope-title,.is-opening .envelope-overline{transition:opacity .25s;opacity:0}.is-opening .envelope-invitation{opacity:0;transition:opacity .2s}.is-opening .envelope-seal{animation:seal-lift .35s ease-in forwards}.is-opening .envelope-flap{animation:flap-open .7s .2s cubic-bezier(.4,0,.2,1) forwards}.is-opening .letter-preview{animation:letter-pull .85s .65s cubic-bezier(.22,.75,.3,1) both}.is-open .gate-card{animation:letter-arrive .55s cubic-bezier(.22,.8,.3,1) both}
.gate-card{position:relative;max-width:530px;background:linear-gradient(110deg,#fffefa,#fffaf6);border:1px solid #e7d8d9;border-radius:5px;padding:26px 37px 18px;box-shadow:0 18px 50px #98687a0d,4px 6px 0 -1px #faf0ed,4px 6px 0 #eadddf;transform-origin:50% 50%}.gate-card:before{content:'';position:absolute;left:0;right:0;top:88px;border-top:1px solid #eee1df;pointer-events:none}.letter-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:33px;font-size:11px;letter-spacing:2px;color:#ab8798}.refold{border:0;background:none;min-height:40px;color:#a18094;font:12px/1.5 var(--gate-font);padding:5px 0 5px 12px;cursor:pointer;letter-spacing:0}.refold:hover{color:var(--berry)}.letter-heading{display:flex;align-items:center;gap:6px;justify-content:space-between}.letter-small{font-size:11px;color:#b28d9d;letter-spacing:2px}.gate-card h1{font:600 28px/1.45 var(--gate-font);margin:8px 0 6px;letter-spacing:0;color:#644457}.melody{width:85px;height:85px;object-fit:contain;flex-shrink:0}.intro{color:#957386;font-size:14px;line-height:1.8;margin:12px 0 24px}label{display:block;font-size:15px;line-height:1.6;font-weight:500;margin:21px 0 9px;color:#785b6c}input{width:100%;height:52px;border:1px solid #dfcbd4;border-radius:8px;background:#fffaf8;padding:11px 14px;color:#5d4053;font:16px/1.6 var(--gate-font);box-shadow:inset 0 1px 3px #a3708810}input::placeholder{color:#a58b9a;opacity:1}input:focus{border-color:#b77f9e;background:#fffdfb}.entry-submit{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;background:var(--berry);border:1px solid #8f4068;border-radius:10px;box-shadow:0 4px 0 #7e365b17;color:white;font:500 16px/1.6 var(--gate-font);padding:13px 19px;margin-top:27px;cursor:pointer;touch-action:manipulation}.entry-submit:hover{background:#864163}.entry-submit:disabled,.refold:disabled{opacity:.6;cursor:wait}.error{font-size:14px;color:#a3274c;margin:13px 0 0;line-height:1.6}.error:empty{display:none}.letter-signature{display:flex;align-items:center;justify-content:center;gap:15px;color:#c394a9;font-size:22px;margin:23px 0 0}.letter-signature>span{height:1px;background:#ebdae1;width:43px}a:focus-visible,input:focus-visible,.refold:focus-visible,.entry-submit:focus-visible{outline:3px solid #b2789a;outline-offset:3px}footer{text-align:center;font-size:12px;line-height:1.8;color:#a48798;margin-top:4px}footer>span{color:#c18ba7;padding-inline:4px}footer small{display:block;font-size:10px;color:#b9a2ae;margin-top:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{text-align:center;color:#905c74;font-size:14px}
@keyframes seal-lift{to{opacity:0;transform:translate(-50%,-80%) rotate(15deg) scale(1.15)}}@keyframes flap-open{0%{transform:rotateX(0deg);z-index:7}49%{z-index:7}50%{z-index:1}100%{transform:rotateX(180deg);z-index:1;background:#e7c8d5}}@keyframes letter-pull{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:1;transform:translateY(-52%) rotate(2deg)}}@keyframes envelope-away{0%{opacity:1;translate:0 0}100%{opacity:0;translate:0 35px}}@keyframes letter-arrive{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(hover:hover){.envelope:not(:disabled):hover{transform:rotate(-1deg) translateY(-4px)}.envelope:not(:disabled):hover .envelope-seal{box-shadow:0 5px 11px #83516b33,inset 0 0 0 1px #efc7da,inset 0 -3px 5px #894c7336}}
@media(max-width:520px){.entry{padding:25px 22px 20px}.brand{font-size:23px;letter-spacing:3px}.brand>span{font-size:11px}.letter-scene{min-height:505px;margin:15px 0 19px}.envelope-panel{padding:0 2px 15px}.envelope-title{font-size:26px;margin-bottom:64px;letter-spacing:2px}.envelope-overline{font-size:11px;letter-spacing:2px}.envelope-seal{width:54px;height:54px}.envelope-seal>span{width:36px;height:36px;font-size:28px}.envelope-address{font-size:11px;letter-spacing:2px;bottom:17%}.envelope-postmark{font-size:7px;padding:4px 7px;right:7%;bottom:6%}.envelope-invitation{font-size:12px;margin-top:27px}.letter-preview{padding-top:10px}.preview-heart{font-size:22px}.preview-title{font-size:16px;margin:3px 0 6px}.preview-line{margin:8px 0}.gate-card{padding:18px 22px 14px}.gate-card:before{top:70px}.letter-topline{margin-bottom:25px;font-size:10px}.refold{font-size:11px}.gate-card h1{font-size:23px;line-height:1.5;margin-top:6px}.letter-small{font-size:10px}.melody{width:63px;height:73px}.intro{font-size:14px;margin:14px 0 21px}label{font-size:15px;margin-top:20px}input{height:52px}.entry-submit{font-size:15px;margin-top:24px}.letter-signature{margin-top:18px}.letter-heading{gap:3px}footer{font-size:11px}}
@media(max-width:360px){.entry{padding-inline:17px}.gate-card{padding-inline:18px}.gate-card h1{font-size:22px}.melody{width:52px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.envelope{transform:none}}