.letter-envelope{--envelope:#e1e9d8;--fold:#c4d2b6;--edge:#9eaf8b;--seal:#778d68;position:relative;isolation:isolate;width:270px;height:174px;border-radius:7px;background:var(--envelope);box-shadow:0 22px 38px #35482d22,0 2px 5px #35482d12;color:#4c5c43;transform-style:preserve-3d}
.letter-envelope.rose{--envelope:#f1dedb;--fold:#dfbdb6;--edge:#c59b92;--seal:#b98279;color:#79544f}.letter-envelope.butter{--envelope:#f5ebcc;--fold:#e3d29e;--edge:#c5ae73;--seal:#b09a5e;color:#7c6a3e}.letter-envelope.cloud{--envelope:#e1e9ef;--fold:#bdcddd;--edge:#92a9bf;--seal:#7895af;color:#4e687e}
.envelope-paper{position:absolute;inset:13px 14px 20px;background:#fffdf5;border:1px solid #fff;border-radius:3px;text-align:center;padding-top:22px;font-family:Georgia,serif;font-size:9px;letter-spacing:2px;box-shadow:0 0 10px #42563408;z-index:-1}
.envelope-front{position:absolute;inset:0;overflow:hidden;border-radius:7px;background:linear-gradient(33deg,var(--envelope) 49.6%,transparent 50%) bottom left/51% 100% no-repeat,linear-gradient(-33deg,var(--fold) 49.6%,transparent 50%) bottom right/51% 100% no-repeat;z-index:2}
.envelope-front::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--envelope),var(--fold));clip-path:polygon(0 100%,50% 37%,100% 100%);border-bottom:1px solid var(--edge)}
.envelope-flap{position:absolute;inset:0;z-index:3;clip-path:polygon(0 0,100% 0,50% 58%);background:linear-gradient(155deg,var(--envelope) 5%,var(--fold) 85%);transform-origin:top center;filter:drop-shadow(0 2px 1px #35482d20)}
.envelope-seal{position:absolute;z-index:4;left:calc(50% - 18px);top:calc(57% - 18px);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--seal);color:#fff9ed;font-size:26px;border:2px solid #fff5;box-shadow:0 3px 5px #35482d22;line-height:1}
.envelope-to,.envelope-from{position:absolute;z-index:5;bottom:18px;left:18px;right:18px;font-size:9px;letter-spacing:.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.envelope-to{bottom:36px;font-size:8px;opacity:.6}.envelope-from{font-family:var(--serif)}
.letter-preparing{overflow:hidden}.letter-launch{width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #e0e4d8;border-radius:18px;background:#faf9f3;color:var(--ink);overflow:hidden;box-shadow:0 35px 120px #24341c40}.letter-launch::backdrop{background:#28322288;backdrop-filter:blur(6px)}.letter-launch[open]{animation:launch-dialog-in .35s cubic-bezier(.2,.8,.2,1)}
.launch-panel{max-height:calc(100dvh - 26px);overflow-y:auto;overscroll-behavior:contain;padding:24px 30px 18px}.launch-topbar{display:flex;justify-content:space-between;align-items:center;gap:15px}.launch-close{width:30px;height:30px;flex-shrink:0;border:1px solid #d8dece;background:transparent;border-radius:50%;color:#889879;font-size:22px;line-height:1}.launch-panel h2{font-family:var(--serif);font-weight:400;font-size:25px;text-align:center;letter-spacing:-1px;margin:20px 0 11px;text-wrap:balance}.launch-panel>p:not(.error-message){text-align:center}.launch-panel #launch-instructions{font-size:12px;color:#87957a;line-height:1.9;margin:0}
.launch-stage{position:relative;min-height:210px;height:clamp(210px,33dvh,285px);display:grid;place-items:center;perspective:900px;margin:2px 0 10px}.launch-orbit{position:absolute;width:92%;height:84%;border:1px solid #d9e1cc;border-radius:50%;transform:rotate(-13deg);background:radial-gradient(ellipse,#e7eddd66,transparent 65%);box-shadow:0 0 calc(40px * var(--charge,0)) #bacf9255;pointer-events:none}
.launch-envelope{width:min(270px,88%);height:160px;transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) rotate(var(--drag-rotation,-4deg));transition:transform .5s cubic-bezier(.18,1.45,.35,1);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;z-index:2;outline:1px solid #fff5;outline-offset:-6px}
.launch-envelope>*{pointer-events:none}.letter-launch[data-state=dragging] .launch-envelope{transition:none;cursor:grabbing;box-shadow:0 28px 45px #35482d2b}.letter-launch[data-state=sending] .launch-envelope{pointer-events:none}.launch-envelope .envelope-paper{animation:letter-peek 3.5s ease-in-out infinite}
.launch-direction{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:3px;color:#9aa889;font-size:9px;letter-spacing:.5px;pointer-events:none;opacity:calc(1 - var(--charge,0))}.launch-direction>span:first-child{font-size:25px;animation:flick-hint 1.8s ease-in-out infinite}.launch-wind{position:absolute;inset:0;pointer-events:none}.launch-wind>span{position:absolute;color:#a9ba93;font-size:20px;opacity:.5;animation:wind-glimmer 3s ease-in-out infinite}.launch-wind>span:nth-child(1){top:10%;left:13%}.launch-wind>span:nth-child(2){top:28%;right:9%;animation-delay:-1s;font-size:13px}.launch-wind>span:nth-child(3){bottom:20%;left:7%;animation-delay:-2s;font-size:11px}
.launch-note{padding:13px 16px;border:1px solid #e3e7d9;border-radius:5px;background:#fffdf8;max-height:128px;overflow-y:auto;overscroll-behavior:contain}.launch-note>p{font-family:var(--serif);font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 8px}.launch-note>span{font-size:10px;color:#929f83;overflow-wrap:anywhere}.launch-status{font-size:11px;color:#83946f;line-height:1.8;min-height:20px;margin:14px 0 0}.launch-panel .error-message{margin:8px 0 12px;min-height:0}.launch-panel .error-message:empty{margin:12px 0 0}.launch-alternative{font-size:9px;color:#a0a994;margin:10px 0 0;line-height:1.7}.letter-launch[data-state=sending] .launch-orbit{animation:send-ripple 1.4s ease-out infinite}.letter-launch[data-state=uncertain] .launch-envelope{box-shadow:0 15px 30px #6f614522}.letter-launch[data-state=uncertain] .launch-status{color:#9b805b}
.screen-envelope{position:fixed;z-index:12;width:270px;height:174px;left:calc(50% - 135px);top:calc(50% - 87px);pointer-events:none;visibility:hidden}
.spotlight[data-phase=flight] .screen-envelope{visibility:visible;animation:screen-letter-flight 1.2s cubic-bezier(.2,.55,.3,1) both}.spotlight[data-phase=flight] .screen-envelope .envelope-flap{animation:screen-flap-open .55s .66s ease-in both}.spotlight[data-phase=flight] .screen-envelope .envelope-seal{animation:seal-release .35s .65s ease-out both}.screen-envelope::after{content:'';position:absolute;left:20%;right:20%;height:110px;top:95%;z-index:-2;background:linear-gradient(var(--edge),transparent);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);filter:blur(8px);opacity:.28}
.spotlight[data-phase=flight]>article{opacity:0;animation:none;pointer-events:none}.spotlight[data-phase=reading]>article{animation:letter-unfold .7s cubic-bezier(.16,.8,.2,1) both}.spotlight[data-phase=landing]{background:transparent;backdrop-filter:none;transition:background .5s,backdrop-filter .5s}.spotlight[data-phase=landing]>.section-number,.spotlight[data-phase=landing]>p,.spotlight[data-phase=landing]>.arrival-halo{opacity:0;transition:opacity .2s}.spotlight[data-phase=landing]>article{animation:none;pointer-events:none}.wall-card.is-arriving{visibility:hidden}.spotlight[data-phase=flight]>.section-number{animation:flight-label-in .6s ease both}.spotlight[data-phase=flight]>p{animation:flight-label-in .8s .2s ease both}
@keyframes launch-dialog-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes flick-hint{0%,100%{transform:translateY(3px);opacity:.45}50%{transform:translateY(-4px);opacity:1}}@keyframes wind-glimmer{0%,100%{opacity:.25;transform:translateY(4px) rotate(-10deg)}50%{opacity:.7;transform:translateY(-6px) rotate(10deg)}}@keyframes letter-peek{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes send-ripple{from{transform:rotate(-13deg) scale(.9);opacity:1}to{transform:rotate(-13deg) scale(1.2);opacity:0}}@keyframes screen-letter-flight{0%{opacity:0;transform:translate3d(-32vw,65vh,0) rotate(-36deg) scale(.35)}18%{opacity:1}48%{opacity:1;transform:translate3d(7vw,-9vh,0) rotate(12deg) scale(1.08)}72%{opacity:1;transform:translate3d(-2vw,2vh,0) rotate(-5deg) scale(1)}88%{opacity:1;transform:translate3d(0,0,0) rotate(-3deg) scale(1.02)}100%{opacity:0;transform:translate3d(0,0,0) rotate(-3deg) scale(1.12)}}@keyframes screen-flap-open{to{transform:rotateX(180deg);z-index:0}}@keyframes seal-release{to{opacity:0;transform:translateY(20px) rotate(35deg) scale(.4)}}@keyframes letter-unfold{from{opacity:0;transform:perspective(900px) rotateX(-35deg) rotate(-5deg) scale(.7);clip-path:inset(30% 8% 30% 8% round 10px)}60%{opacity:1;transform:perspective(900px) rotateX(5deg) rotate(-2deg) scale(1.02);clip-path:inset(0 round 6px)}to{opacity:1;transform:perspective(900px) rotateX(0) rotate(-3deg) scale(1);clip-path:inset(0 round 6px)}}@keyframes flight-label-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px),(max-height:700px){.spotlight[data-phase=reading]>article{animation:appear .5s ease both}.screen-envelope{width:230px;height:150px;left:calc(50% - 115px);top:calc(50% - 75px)}}
@media(max-width:420px){.launch-panel{padding:18px 20px 15px}.launch-panel h2{font-size:22px;margin-top:17px}.launch-stage{min-height:200px}.launch-envelope{height:145px}.launch-note{max-height:105px}.launch-status{font-size:10px}}
@media(min-width:1200px){.screen-envelope{width:360px;height:232px;left:calc(50% - 180px);top:calc(50% - 116px)}.screen-envelope .envelope-seal{width:48px;height:48px;left:calc(50% - 24px);top:calc(57% - 24px);font-size:34px}.screen-envelope .envelope-to{bottom:50px;left:25px;font-size:10px}.screen-envelope .envelope-from{bottom:25px;left:25px;font-size:13px}}
@media(min-width:1600px){.screen-envelope{width:420px;height:270px;left:calc(50% - 210px);top:calc(50% - 135px)}.screen-envelope .envelope-to{bottom:57px;font-size:12px}.screen-envelope .envelope-from{bottom:30px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.letter-launch[open],.letter-envelope *,.launch-direction>span,.launch-wind>span,.launch-orbit,.spotlight[data-phase=reading]>article{animation:none!important;transition:none!important}.screen-envelope{display:none}.launch-envelope{transition:none}}