*{box-sizing:border-box}body{margin:0;background:#f2f7fa;color:#5e7e98;font-family:Arial,'PingFang SC',sans-serif}main{max-width:900px;margin:auto;padding:30px 28px 70px}nav{display:flex;justify-content:space-between;align-items:center}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:transparent;border:1px solid #b8cbd9;padding:12px 20px;cursor:pointer}button:hover{background:#e4eef5}button:disabled{opacity:.6;cursor:wait}header{text-align:center;padding:55px 0 25px}small{font-size:10px;letter-spacing:3px}h1{font:italic 62px Georgia,serif;margin:16px 0}header p,.privacy{font-size:13px;line-height:1.9;color:#8b9fac}.desk{position:relative;max-width:620px;min-height:610px;margin:20px auto 0;perspective:1200px}.paper{position:relative;z-index:2;background:#fffefa;padding:34px 40px;box-shadow:0 15px 45px #6385a020;border:1px solid #e3e8e9;transform-origin:center center}.paper-top{font:italic 26px Georgia,serif}textarea{display:block;width:100%;min-height:220px;background:repeating-linear-gradient(transparent 0 33px,#d8e4ed 34px,transparent 35px);border:0;resize:vertical;line-height:35px;color:#526e83;font:15px/35px Arial,'PingFang SC',sans-serif;margin:18px 0;outline:none}.signature{text-align:right;margin:0 0 24px}label{display:block;font:italic 19px Georgia,serif}input{font:inherit;color:#526e83;background:transparent;border:0;border-bottom:1px solid #c9d9e5;padding:10px;margin:8px 0;max-width:100%}.signature input{text-align:right;font-size:13px;width:210px}#send{display:block;margin:auto;background:#789bb5;color:white;border:0;font-size:13px}.envelope{position:absolute;width:360px;height:220px;left:50%;bottom:12px;transform:translateX(-50%);background:#d3e3ee;box-shadow:0 16px 40px #62859f26}.envelope span{position:absolute;z-index:5;left:25px;bottom:22px;font:italic 23px Georgia,serif}.envelope small{font:9px Arial,sans-serif;letter-spacing:3px}.flap{position:absolute;inset:0;background:#e5eff6;clip-path:polygon(0 0,100% 0,50% 65%);transform-origin:top;transform:rotateX(180deg);z-index:1}.pocket{position:absolute;inset:0;background:#c5dbe9;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);z-index:4}.desk.sending .paper{animation:fold-letter 2.4s ease-in-out forwards}.desk.sending .flap{animation:seal 700ms ease 2s forwards}.desk.sent .envelope{animation:mail-away 850ms ease-in-out forwards}.desk.sent .paper{visibility:hidden}@keyframes fold-letter{0%{transform:translateY(0) rotateX(0) scale(1)}35%{transform:translateY(35px) rotateX(58deg) scale(.78,.68)}65%{transform:translateY(110px) rotateX(12deg) scale(.52,.32)}100%{transform:translateY(330px) rotateX(0) scale(.48,.12);opacity:0}}@keyframes seal{to{transform:rotateX(0);z-index:6}}@keyframes mail-away{to{transform:translateX(-50%) translateY(-50px) rotate(-5deg);opacity:0}}#status,.privacy{text-align:center}#status{min-height:24px;font-size:14px}#again{display:block;margin:15px auto}#again[hidden],[hidden]{display:none!important}.privacy{margin:24px 0}dialog{border:1px solid #d0e0eb;background:#f9fcfe;color:#62819a;padding:36px;width:min(420px,90vw)}dialog::backdrop{background:#385a7055;backdrop-filter:blur(6px)}dialog h2,h2{font:italic 30px Georgia,serif}dialog p{font-size:13px;line-height:1.9}dialog input{width:100%;margin:14px 0 24px}#close{position:absolute;right:10px;top:8px;border:0;font-size:24px}#inbox{margin-top:45px;padding:30px;background:white;border:1px solid #dce7ef}.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.entry{padding:24px 0;border-top:1px solid #e1eaf1}.entry h3{font-size:14px}.entry time{font-size:11px;color:#91a5b5}.entry p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;font-size:14px}:focus-visible{outline:2px solid #789bb5;outline-offset:4px}@media(max-width:550px){h1{font-size:43px}main{padding:24px 18px}.paper{padding:28px 23px}.desk{min-height:610px}.envelope{width:290px}.inbox-head{display:block}}@media(prefers-reduced-motion:reduce){.desk.sending .paper{animation-duration:1ms}.desk.sending .flap{animation-delay:0s;animation-duration:1ms}.desk.sent .envelope{animation-duration:1ms}}

/* A quiet blue postmark remains after the envelope leaves the desk. */
.delivery-stamp{position:absolute;left:50%;bottom:42px;width:180px;height:180px;border:3px double #729ab6;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#6c94b0;opacity:0;transform:translateX(-50%) rotate(-14deg) scale(1.3);pointer-events:none}
.delivery-stamp::before{content:'';position:absolute;inset:9px;border:1px solid #8bacc2;border-radius:50%}
.delivery-stamp::after{content:'';position:absolute;left:145px;top:65px;width:90px;height:48px;background:repeating-linear-gradient(to bottom,transparent 0 10px,#89a9bf 11px 12px,transparent 13px 16px);opacity:.65;transform:skewY(-8deg);mask-image:linear-gradient(to right,#000,transparent)}
.stamp-orbit{font:8px/1.5 Arial,sans-serif;letter-spacing:1px;margin-bottom:10px}.delivery-stamp strong{font:500 29px/1.4 'PingFang SC',sans-serif;letter-spacing:5px;margin-left:5px}.stamp-date{font:11px/1.8 Georgia,serif;letter-spacing:2px;margin-top:5px}.delivery-stamp i{font:8px/1.8 Georgia,serif;letter-spacing:2px}
.desk.sent .delivery-stamp{animation:postmark-land 380ms cubic-bezier(.2,.75,.25,1) 650ms both}
.desk.sent .envelope{animation:mail-depart 850ms cubic-bezier(.4,0,.65,1) forwards}
@keyframes mail-depart{0%{transform:translateX(-50%) translateY(0) rotate(0);opacity:1}25%{transform:translateX(-48%) translateY(8px) rotate(2deg);opacity:1}100%{transform:translateX(65%) translateY(-95px) rotate(-9deg);opacity:0}}
@keyframes postmark-land{0%{opacity:0;transform:translateX(-50%) rotate(-14deg) scale(1.3)}65%{opacity:.85;transform:translateX(-50%) rotate(-14deg) scale(.97)}100%{opacity:.85;transform:translateX(-50%) rotate(-14deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.desk.sent .delivery-stamp{animation:none;opacity:.85;transform:translateX(-50%) rotate(-14deg)}.desk.sent .envelope{animation:none;opacity:0}}