.letter-stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:9/16;background:var(--letter-backdrop);container-type:inline-size}.letter-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;opacity:1;transition:opacity .7s ease-out,filter .9s ease-out}.letter-stage[data-stage=open] .letter-scene,.letter-stage[data-stage=sealed] .letter-scene,.letter-stage[data-stage=wiggle] .letter-scene{filter:brightness(.8) saturate(.92)}.letter-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 52%,var(--letter-glow) 0,transparent 70%);opacity:0;mix-blend-mode:screen;transition:opacity 1.1s ease-out}.letter-stage[data-stage=read] .letter-glow,.letter-stage[data-stage=settled] .letter-glow,.letter-stage[data-stage=still] .letter-glow{opacity:.32}.letter-ambient{position:absolute;inset:0;pointer-events:none}.letter-star{position:absolute;width:.9cqw;height:.9cqw;min-width:2px;min-height:2px;background:#f4f1ff;opacity:.2;animation:letter-twinkle var(--twinkle,3.4s) ease-in-out var(--delay,0s) infinite}@keyframes letter-twinkle{0%,to{opacity:.15}50%{opacity:.95}}.letter-heart{position:absolute;bottom:-4cqw;width:3.4cqw;opacity:0;image-rendering:pixelated;animation:letter-rise var(--rise,9s) linear var(--delay,0s) infinite}@keyframes letter-rise{0%{transform:translateZ(0);opacity:0}12%{opacity:.85}80%{opacity:.6}to{transform:translate3d(var(--sway,3cqw),-169cqw,0);opacity:0}}.letter-fx{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.letter-fx--back{z-index:1}.letter-fx--front{z-index:3}.letter-envelope{z-index:2;position:absolute;left:50%;top:var(--envelope-y,60%);width:44.4444cqw;aspect-ratio:64/72;translate:-50% -66.6667%;transform-origin:50% 66.6667%;perspective:90cqw;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .6s ease-out;filter:drop-shadow(0 1.2cqw 0 rgba(0,0,0,.35))}.letter-envelope>span{position:absolute;left:0;width:100%;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated}.letter-envelope .env-body{top:33.3333%;height:66.6667%;background-image:url(/letters/envelope/body.png)}.letter-envelope .env-flap{top:33.3333%;height:55.5556%;background-image:url(/letters/envelope/flap.png);transform-origin:50% 0}.letter-envelope .env-flap,.letter-envelope .env-inside{backface-visibility:hidden;transition:transform .46s cubic-bezier(.45,0,.3,1)}.letter-envelope .env-inside{top:0;height:33.3333%;background-image:url(/letters/envelope/inside.png);transform-origin:50% 100%;transform:rotateX(-180deg)}.letter-gift{position:absolute;z-index:1;image-rendering:pixelated;pointer-events:none;transform-origin:50% 100%;opacity:0;filter:drop-shadow(0 .7cqw 0 rgba(0,0,0,.3))}.letter-stage:is([data-stage=still],[data-stage=read],[data-stage=settled]) .letter-gift{opacity:1}.letter-stage[data-stage=read] .letter-gift{animation:letter-gift-arrive .72s cubic-bezier(.2,1.4,.4,1) .52s both}@keyframes letter-gift-arrive{0%{opacity:0;transform:translateY(3cqw) scale(.6)}60%{opacity:1;transform:translateY(-1cqw) scale(1.08)}to{opacity:1;transform:none}}.letter-envelope .env-seal{top:33.3333%;height:66.6667%;background-image:url(/letters/envelope/seal.png)}.letter-stage[data-stage=sealed] .letter-envelope{animation:letter-arrive .7s cubic-bezier(.22,.68,.24,1) .35s both,letter-breathe 3.2s ease-in-out 1.2s infinite}@keyframes letter-arrive{0%{opacity:0;transform:translateY(6cqw) scale(.92)}to{opacity:1;transform:none}}@keyframes letter-breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-1.2cqw)}}.letter-stage[data-stage=wiggle] .letter-envelope{animation:letter-gather .4s cubic-bezier(.3,0,.4,1) both}@keyframes letter-gather{0%{transform:none}35%{transform:translateY(.6cqw) scale(1.05,.93)}70%{transform:translateY(-2.6cqw) scale(.97,1.05)}85%{transform:translate(-.35cqw,-2.8cqw) rotate(-1.2deg) scale(1.01)}to{transform:translate(.35cqw,-2.6cqw) rotate(1deg) scale(1.02)}}.letter-stage[data-stage=open] .letter-envelope{animation:letter-impact .38s cubic-bezier(.2,.8,.3,1) both}@keyframes letter-impact{0%{transform:translateY(-2.6cqw) scale(1.08,.93)}25%{transform:translate(-.6cqw,-1.6cqw) scale(.97,1.04)}50%{transform:translate(.45cqw,-.8cqw)}75%{transform:translate(-.2cqw,-.2cqw)}to{transform:none}}.letter-stage:is([data-stage=open],[data-stage=slide],[data-stage=read],[data-stage=settled]) .letter-envelope .env-flap{transform:rotateX(180deg)}.letter-stage:is([data-stage=open],[data-stage=slide],[data-stage=read],[data-stage=settled]) .letter-envelope .env-inside{transform:none}.letter-stage:is([data-stage=open],[data-stage=slide],[data-stage=read],[data-stage=settled]) .letter-envelope .env-seal{opacity:0}.letter-stage:is([data-stage=read],[data-stage=settled]) .letter-envelope{transform:translateY(96cqw) rotate(5deg) scale(.94);opacity:0;transition:transform .56s cubic-bezier(.5,0,.9,.4),opacity 1ms linear .56s}.letter-stage[data-stage=still] .letter-envelope{display:none}.letter-sheet{z-index:4;position:absolute;left:50%;top:50%;width:84cqw;max-height:138cqw;display:flex;flex-direction:column;background:var(--paper-fill);color:var(--paper-ink);translate:-50% -50%;opacity:0;transform:translateY(calc(var(--envelope-offset, 18cqw))) scale(.5);transition:transform .76s cubic-bezier(.22,1.18,.36,1),opacity .36s ease-out;--px:0.8cqw;--edge:var(--paper-edge)}.letter-stage[data-stage=slide] .letter-sheet{opacity:1;transform:translateY(calc(var(--envelope-offset, 18cqw) - 16cqw)) scale(.55)}.letter-stage:is([data-stage=read],[data-stage=settled],[data-stage=still]) .letter-sheet{opacity:1;transform:none}.letter-stage[data-stage=settled] .letter-sheet,.letter-stage[data-stage=still] .letter-sheet{transition-duration:0s}.letter-sheet{background-image:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--paper-edge) 26%,transparent) 0 .28cqw,transparent .34cqw);background-size:2.3cqw 2.3cqw;background-position:.6cqw .9cqw}.letter-sheet:after,.letter-sheet:before{content:"";position:absolute;pointer-events:none}.letter-sheet:before{inset:2.2cqw;border:.42cqw solid color-mix(in oklab,var(--paper-edge) 75%,transparent);box-shadow:inset 0 0 0 .9cqw var(--paper-fill),inset 0 0 0 1.25cqw color-mix(in oklab,var(--paper-edge) 38%,transparent)}.letter-sheet:after{inset:1.1cqw;background-color:var(--paper-edge);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Crect x='1' width='2' height='1'/%3E%3Crect x='4' width='2' height='1'/%3E%3Crect y='1' width='7' height='2'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E");-webkit-mask-size:3.4cqw 2.9cqw;mask-size:3.4cqw 2.9cqw;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0,100% 0,0 100%,100% 100%;mask-position:0 0,100% 0,0 100%,100% 100%}.letter-sheet-body{position:relative;z-index:1}.letter-shine{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}.letter-shine:before{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:32%;background:linear-gradient(100deg,transparent,rgb(255 255 255/.5) 45%,rgb(255 255 255/0) 62%);opacity:0;transform:skewX(-12deg)}.letter-stage[data-stage=read] .letter-shine:before{animation:letter-shine 1.1s cubic-bezier(.3,.1,.3,1) .38s both}@keyframes letter-shine{0%{opacity:0;transform:translateX(0) skewX(-12deg)}18%{opacity:1}to{opacity:0;transform:translateX(480%) skewX(-12deg)}}.letter-sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:7.4cqw 8cqw 6.8cqw;font-size:max(15px,4.1cqw);line-height:1.58;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:var(--paper-edge) transparent}.letter-to{font-weight:700;margin-bottom:.7em}.letter-close{margin-top:1.1em;text-align:right}.letter-close .signoff{color:var(--paper-faint)}.letter-close .from{font-weight:700}.letter-input{display:block;width:100%;min-height:44px;padding:10px 12px;font-size:16px;color:var(--color-mist-100);background:var(--color-ink-900);border:0;border-radius:0;outline:none;box-shadow:0 -2px 0 0 color-mix(in oklab,white 12%,transparent),0 2px 0 0 color-mix(in oklab,white 12%,transparent),-2px 0 0 0 color-mix(in oklab,white 12%,transparent),2px 0 0 0 color-mix(in oklab,white 12%,transparent);transition:box-shadow .15s ease-out}.letter-input::placeholder{color:var(--color-mist-500)}.letter-input:focus-visible{box-shadow:0 -2px 0 0 var(--color-accent-400),0 2px 0 0 var(--color-accent-400),-2px 0 0 0 var(--color-accent-400),2px 0 0 0 var(--color-accent-400)}@media (prefers-reduced-motion:reduce){.letter-stage *,.letter-stage :after,.letter-stage :before{animation:none!important;transition-duration:0s!important}.letter-star{opacity:.6}.letter-heart{display:none}}@property --showcase-glow{syntax:"<color>";inherits:false;initial-value:#ff9fb0}.letter-showcase-glow{position:absolute;inset:-18% -30% -10%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in oklab,var(--showcase-glow) 34%,transparent),transparent);transition:--showcase-glow .9s ease}@media (prefers-reduced-motion:reduce){.letter-showcase-glow{transition:none}}.letter-stage--mini .letter-sheet-body{font-size:max(11px,4.3cqw)}.letter-theme-thumb{aspect-ratio:4/5}@media (min-width:640px){.letter-theme-thumb{aspect-ratio:4/3}}