*{box-sizing:border-box}body{margin:0;color:#674c43;background:#fbf2ec;font-family:system-ui,-apple-system,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 12% 30%,#f5d9dc88,transparent 48%),radial-gradient(ellipse at 90% 70%,#eedbcb66,transparent 45%);z-index:-1}header{max-width:1000px;margin:auto;padding:24px;display:flex;justify-content:space-between;align-items:center}header a{text-decoration:none;color:#a65e72;font-family:Georgia,serif;font-size:24px}header span{font:12px system-ui;color:#9c8278;margin-left:12px}button,select{font:inherit;color:inherit;cursor:pointer;border:1px solid #e4cfc6;background:#fffaf6;border-radius:30px;padding:10px 16px}button:hover{background:#f6e4e4}button:focus-visible,select:focus-visible{outline:3px solid #bb748d;outline-offset:4px}main{max-width:660px;margin:auto;padding:22px 20px}#arrival{text-align:center;padding:35px 0}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#b47c89}h1{font-family:Georgia,serif;font-size:clamp(32px,6vw,46px);font-weight:500;line-height:1.45;margin:22px 0}p{font-size:14px;line-height:1.8;color:#9b7b70}.envelope{display:block;position:relative;width:280px;height:180px;border:0;border-radius:7px;margin:75px auto 20px;background:#e8acb8;box-shadow:0 18px 35px #92625f22;perspective:800px}.envelope:after{content:"";position:absolute;inset:0;background:linear-gradient(33deg,#efbfca 49.5%,transparent 50%),linear-gradient(-33deg,#f1c6ce 49.5%,transparent 50%);border-radius:7px;pointer-events:none}.flap{position:absolute;inset:0;background:#dc9aaa;clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:top;z-index:3;transition:transform 1s}.seal{position:absolute;z-index:4;top:76px;left:119px;background:#bb7188;color:#fff0ef;width:43px;height:43px;border-radius:50%;font-size:27px}.address{position:absolute;bottom:18px;left:0;right:0;z-index:4;font-size:11px;letter-spacing:2px}.insert{position:absolute;left:20px;right:20px;top:10px;height:145px;background:#fff8e8;padding:30px;transition:transform 1.4s .6s}.opening .flap{transform:rotateX(180deg);z-index:0}.opening .seal{opacity:0}.opening .insert{transform:translateY(-100px)}.couple{display:flex;justify-content:center;align-items:center;gap:15px;font-size:38px;margin:22px 0}.couple i{font-size:22px;color:#bd7488}.primary{background:#ad687d;color:white;border:0;padding:15px 29px;font-size:14px}.primary:hover{background:#96576b}.hint{font-size:11px;margin-top:22px}.letter-top{display:flex;justify-content:space-between;align-items:center}h2{font-size:23px;font-weight:500}.controls{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12px}.controls button,.controls select{padding:8px 11px}.paper{background:#fffaf0;border:1px solid #e8d9c2;padding:28px 20px;border-radius:3px;box-shadow:0 12px 36px #78594d12;background-image:repeating-linear-gradient(transparent 0,transparent 35px,#ddcbb21f 36px);position:relative}.paper-heading{font-family:Georgia,serif;font-size:25px;margin:0 10px 24px}.paper-heading span{color:#b96f82}#writing{width:100%;height:auto;overflow:visible;display:block}.signature{text-align:right;margin-top:20px;font-size:14px}#ending{text-align:center;padding:25px 0}#ending h2{font-size:21px}details{font-size:13px;line-height:2;margin:25px 0}summary{cursor:pointer}footer{text-align:center;font-size:10px;letter-spacing:1px;color:#b39689;margin:40px 10px}.ambient{position:fixed;right:7%;top:28%;font-size:65px;color:#e5b5c366;transform:rotate(15deg);pointer-events:none}.heart{position:fixed;bottom:-30px;pointer-events:none;color:#bd7488;animation:float 5s ease-out forwards;z-index:9}@keyframes float{to{transform:translateY(-90vh) rotate(30deg);opacity:0}}[hidden]{display:none!important}@media(max-width:420px){header{padding:18px}header span{display:none}main{padding:14px}#arrival{padding-top:20px}.paper{padding:24px 12px}.controls{gap:5px}.controls button{font-size:11px}h2{font-size:20px}}@media(prefers-reduced-motion:reduce){.heart{animation-duration:.1s}.flap,.insert{transition-duration:.1s}}

/* Separate the envelope shell from the extracted letter during opening. */
.envelope{isolation:isolate;transition:background-color .45s 1s,box-shadow .45s 1s;}
.envelope:after{z-index:3;}
.insert{z-index:1;visibility:hidden;border-radius:3px;box-shadow:0 8px 24px #92625f18;}
.opening{background-color:transparent;box-shadow:none;cursor:default;}
.opening:after{animation:envelope-away .7s 1s forwards;}
.opening .flap{z-index:0;animation:flap-away 1.5s forwards;}
.opening .address{transition:opacity .3s .8s;opacity:0;}
.opening .insert{transform:none;transition:none;animation:letter-out 1.4s .65s both;}
@keyframes envelope-away{to{transform:translateY(65px);opacity:0;visibility:hidden;}}
@keyframes flap-away{0%{transform:rotateX(0);opacity:1;}65%{transform:rotateX(180deg);opacity:1;}100%{transform:rotateX(180deg) translateY(30px);opacity:0;visibility:hidden;}}
@keyframes letter-out{0%{visibility:visible;transform:translateY(0);opacity:0;}20%{opacity:1;}100%{visibility:visible;transform:translateY(-35px) scale(1.08);opacity:1;}}
@media(prefers-reduced-motion:reduce){.opening:after,.opening .flap,.opening .insert{animation-duration:.1s;animation-delay:0s;}}