:root{--pl-env-h:clamp(11.5rem, 50vw, 16.5rem);--pl-overlap:calc(var(--pl-env-h) * .6);--pl-back:oklch(92.5% .025 305);--pl-pocket:var(--ec-card);--pl-pocket-edge:oklch(96% .014 305);--pl-flap-out:oklch(95% .02 305);--pl-lining-a:oklch(90% .06 306);--pl-lining-b:oklch(84% .1 312);--pl-letter:oklch(99.2% .006 80);--pl-rule:color-mix(in oklch, var(--ec-violet) 22%, transparent);--pl-slot:color-mix(in oklch, var(--ec-ink) 16%, transparent);--pl-shadow:60 20 60;--pl-hand:oklch(38% .17 290);--pl-wax:oklch(44% .18 345);--pl-wax-hi:oklch(56% .17 348);--pl-wax-lo:oklch(31% .13 340)}.dark{--pl-back:oklch(23% .05 300);--pl-pocket-edge:oklch(25% .05 300);--pl-flap-out:oklch(26% .055 300);--pl-lining-a:oklch(28% .1 300);--pl-lining-b:oklch(36% .15 312);--pl-letter:oklch(27% .045 300);--pl-rule:color-mix(in oklch, var(--ec-lilac) 26%, transparent);--pl-slot:#fff3;--pl-shadow:0 0 0;--pl-hand:oklch(84% .11 306);--pl-wax:oklch(48% .18 345);--pl-wax-hi:oklch(60% .16 348);--pl-wax-lo:oklch(33% .13 340)}.pl{--mx:0;--my:0;width:100%;max-width:30rem;margin:0 auto;padding-top:1.5rem;position:relative}.pl-scene{transform:perspective(1400px) rotateY(calc(var(--mx) * 3deg)) rotateX(calc(var(--my) * -3deg));flex-direction:column;transition:transform .6s cubic-bezier(.2,.8,.2,1);display:flex;position:relative}.pl-back{height:var(--pl-env-h);border:1px solid var(--ec-line);background:var(--pl-back);box-shadow:0 1px 2px rgb(var(--pl-shadow) / .06), 0 30px 60px -24px rgb(var(--pl-shadow) / .4);border-radius:20px;position:absolute;inset:auto 0 0}.pl-flap{inset:auto 1px calc(var(--pl-env-h) * .45 - 1px);height:calc(var(--pl-env-h) * .55);transform-origin:50% 0;transform-style:preserve-3d;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.2,1),z-index 0s linear .35s;position:absolute;transform:perspective(900px)rotateX(180deg)}.pl-flap i{backface-visibility:hidden;position:absolute;inset:0}.pl-flap-out{clip-path:polygon(0 0,100% 0,54% 92%,46% 92%);background:linear-gradient(var(--pl-flap-out), color-mix(in oklch, var(--pl-flap-out) 92%, var(--ec-violet)));border-radius:19px 19px 0 0}.pl-flap-in{clip-path:polygon(0 100%,100% 100%,54% 8%,46% 8%);background:radial-gradient(circle at 50% 40%, var(--pl-lining-b) 0 18%, transparent 19%) 0 0 / 18px 18px, var(--pl-lining-a);border-radius:0 0 19px 19px;transform:rotateX(180deg)}.pl-seal{backface-visibility:hidden;filter:drop-shadow(0 1px 1px #28001e59)drop-shadow(0 4px 6px #28001e40);opacity:0;width:3.4rem;height:3.4rem;transition:scale .25s cubic-bezier(.3,0,.6,1) .95s,opacity .1s linear .95s;position:absolute;top:80%;left:50%;translate:-50% -50%;rotate:-8deg;scale:1.35}.pl-letter{z-index:1;margin:0 2.25rem calc(-1 * var(--pl-overlap));padding:1.25rem 1.25rem calc(var(--pl-overlap) + 1rem);border:1px solid var(--ec-line);background:var(--pl-letter);box-shadow:0 1px 1px rgb(var(--pl-shadow) / .05), 0 18px 34px -18px rgb(var(--pl-shadow) / .35);translate:calc(var(--mx) * 5px) calc(var(--my) * 4px);transform:translateY(calc(var(--lift,0px) + var(--sink,0px)));clip-path:inset(-40px -40px var(--sink,0px) -40px);border-radius:12px 12px 6px 6px;transition:transform .5s cubic-bezier(.3,1.25,.5,1),clip-path .5s cubic-bezier(.3,1.25,.5,1),translate .6s cubic-bezier(.2,.8,.2,1);position:relative}.pl:hover .pl-letter,.pl:focus-within .pl-letter{--lift:-.75rem}.pl-letter-head{border-bottom:1px solid var(--pl-rule);font:600 .7rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ec-muted);justify-content:space-between;align-items:baseline;gap:.75rem;padding-bottom:.7rem;display:flex}.pl-letter-head b{color:var(--ec-text-accent);font-weight:700}.pl-date{white-space:nowrap;align-items:baseline;gap:.35rem;display:inline-flex}.pl-date em{border-bottom:1px dashed var(--pl-slot);font:600 1.15rem/1 var(--font-hand);letter-spacing:0;text-transform:none;color:var(--pl-hand);padding:0 .2rem .1rem}.pl-title{letter-spacing:-.035em;text-wrap:balance;margin-top:.9rem;font-size:clamp(1.3rem,2.3vw,1.6rem);font-weight:680;line-height:1.08}.pl-sum{color:var(--ec-muted);text-wrap:pretty;margin-top:.45rem;font-size:.9rem;line-height:1.5}.pl-contents{gap:.45rem;margin-top:.95rem;display:grid}.pl-contents li{grid-template-columns:4.6rem 1fr;align-items:center;gap:.6rem;display:grid}.pl-contents span{font:600 .66rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ec-muted)}.pl-contents i{background:repeating-linear-gradient(90deg, var(--pl-slot) 0 6px, transparent 6px 10px) 0 100% / 100% 1px no-repeat;height:.6rem;display:block;position:relative;overflow:hidden}.pl-contents i:after{content:"";background:linear-gradient(90deg, transparent, var(--ec-orchid), transparent);height:1.5px;animation:pl-gather 5.5s ease-in-out infinite var(--d,0s);position:absolute;inset:auto 0 0;translate:-100%}@keyframes pl-gather{0%,55%{translate:-100%}to{translate:100%}}.pl-contents li:first-child i{width:78%}.pl-contents li:nth-child(2) i{--d:.5s;width:92%}.pl-contents li:nth-child(3) i{--d:1s;width:60%}.pl-contents li:nth-child(4) i{--d:1.5s;width:70%}.pl-pocket{z-index:2;height:var(--pl-overlap);border:1px solid var(--ec-line);background:linear-gradient(var(--pl-pocket-edge), var(--pl-pocket) 30%);box-shadow:inset 0 1px 0 #fff9, 0 -10px 18px -14px rgb(var(--pl-shadow) / .35);translate:calc(var(--mx) * 2px) calc(var(--my) * 2px);border-radius:6px 6px 20px 20px;grid-template-columns:1fr auto;align-items:end;gap:.75rem;padding:.9rem 1.1rem 1rem;transition:translate .6s cubic-bezier(.2,.8,.2,1);display:grid;position:relative}.dark .pl-pocket{box-shadow:inset 0 1px #ffffff0f,0 -10px 18px -12px #0009}.pl-folds{clip-path:inset(0 round 6px 6px 20px 20px);width:100%;height:100%;color:var(--ec-line);pointer-events:none;position:absolute;inset:0}.pl-addr{min-width:0;position:relative}.pl-addr small{font:600 .62rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ec-muted);display:block}.pl-to{border-bottom:1.5px solid var(--pl-rule);min-height:2.1rem;font:600 clamp(1.25rem, 3.4vw, 1.6rem)/1.1 var(--font-hand);color:var(--pl-hand);align-items:flex-end;margin-top:.3rem;display:flex}.pl-to-text{white-space:nowrap;text-overflow:ellipsis;padding-bottom:.1rem;overflow:hidden}.pl-caret{background:var(--pl-hand);opacity:0;border-radius:1px;flex:none;width:2px;height:1.2rem;margin:0 0 .35rem 2px}.pl.is-typing .pl-caret{animation:1s step-end infinite pl-blink}@keyframes pl-blink{50%{opacity:1}}.pl-from{font:500 .7rem/1.3 var(--font-mono);color:var(--ec-muted);margin-top:.55rem}.pl-post{align-self:start;position:relative}.pl-postmark{border:1.5px dashed var(--pl-slot);background:color-mix(in oklch, var(--pl-pocket) 70%, transparent);width:4.4rem;height:4.4rem;font:600 .55rem/1.25 var(--font-mono);letter-spacing:.08em;text-align:center;text-transform:uppercase;color:var(--ec-muted);border-radius:50%;place-items:center;display:grid;position:absolute;top:1.6rem;right:3.4rem;rotate:-12deg}.pl-stamp{color:#fff;background:linear-gradient(160deg, var(--ec-fuchsia), var(--ec-violet) 70%);align-content:center;place-items:center;gap:.2rem;width:3.9rem;height:4.6rem;display:grid;position:relative;rotate:3deg;box-shadow:0 2px 6px #3c00504d}.pl-stamp:before{content:"";border:4px dotted var(--ec-card);border-radius:2px;position:absolute;inset:-3px}.pl-stamp svg{width:1.5rem;height:1.5rem}.pl-stamp span{font:700 .62rem/1 var(--font-mono);letter-spacing:.04em}.pl-done{z-index:4;text-align:center;opacity:0;pointer-events:none;justify-items:center;gap:.4rem;padding:0 1rem;transition:opacity .4s 1.1s,translate .4s 1.1s;display:grid;position:absolute;inset:0 0 auto;translate:0 .5rem}.pl-done p{font:600 clamp(1.5rem, 3vw, 1.9rem)/1 var(--font-hand);color:var(--ec-text-accent)}.pl-done span{max-width:22rem;color:var(--ec-muted);font-size:.9rem;line-height:1.45}.pl-done b{color:var(--ec-fg);overflow-wrap:anywhere;font-weight:600}.pl.is-sealed .pl-letter{--lift:0px}.pl.is-sealed .pl-flap{z-index:3;transition:transform .7s cubic-bezier(.5,0,.2,1) .3s,z-index 0s linear .6s;transform:perspective(900px)rotateX(0)}.pl.is-sealed .pl-flap-out{filter:drop-shadow(0 6px 6px rgb(var(--pl-shadow) / .2))}.pl.is-sealed .pl-seal{opacity:1;scale:1}.pl.is-sealed .pl-done{opacity:1;pointer-events:auto;translate:0}.pl.is-sealed .pl-caret{animation:none}@media (width<=480px){.pl-letter{padding:1rem 1rem calc(var(--pl-overlap) + .8rem);margin-inline:1.25rem}.pl-contents li{grid-template-columns:4rem 1fr}.pl-postmark{display:none}.pl-pocket{padding:.75rem .9rem .85rem}.pl-stamp{width:3.3rem;height:3.9rem}}@media (prefers-reduced-motion:reduce){.pl-scene,.pl-letter,.pl-pocket,.pl-flap,.pl-seal,.pl-done{transition:none!important}.pl-contents i:after{display:none}.pl.is-typing .pl-caret{opacity:1;animation:none}.pl:hover .pl-letter,.pl:focus-within .pl-letter{--lift:0px}}