*{box-sizing:border-box}body{margin:0;background:#241d26;color:#f5e6d0;font-family:Georgia,serif;min-height:100vh}body:before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 32%,#57403877,transparent 65%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f2a4dc;outline-offset:6px}header{display:flex;align-items:center;justify-content:space-between;padding:25px 5%;border-bottom:1px solid #ffffff15;font:11px monospace;letter-spacing:2px}header a{font:bold 20px Georgia;color:#efdbc0;text-decoration:none}header a span{color:#ce88bd}button{color:inherit;border:1px solid #eed7bc44;background:transparent;border-radius:5px;padding:12px 18px}header button{font:11px monospace;letter-spacing:0}#intro{text-align:center;padding:65px 20px 35px}.eyebrow{font:10px monospace;letter-spacing:3px;color:#d8b78c}h1{font-weight:normal;font-size:clamp(35px,5.2vw,68px);line-height:1.13;margin:24px auto}h1 em{font-weight:normal;color:#dfadd2}.sub{font:16px/1.8 Georgia;color:#c7b6be}.envelope{display:block;position:relative;width:280px;height:176px;margin:42px auto 30px;background:#dfbd84;border:0;border-radius:0;box-shadow:0 15px 45px #0005;transition:transform .3s;color:#674828}.envelope:hover{transform:translateY(-8px) rotate(-2deg)}.fold{position:absolute;inset:0;background:linear-gradient(32deg,#cda66d 49.5%,transparent 50%),linear-gradient(-32deg,#e8ca96 49.5%,transparent 50%)}.fold:before{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 62%);background:#efd3a4}.seal{position:absolute;top:63px;left:117px;background:#9f3297;color:#f8cce9;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:25px;box-shadow:0 3px 0 #77206d}.address{position:absolute;bottom:16px;left:0;width:100%;font-style:italic}.primary{background:#dfb58b;color:#32232a;border:0;padding:15px 30px}.primary span{margin-left:25px}.tiny{font-size:12px;color:#a7939d;margin:22px}.reading-head{max-width:850px;margin:40px auto 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px}h2{font-weight:normal;font-size:28px;margin:10px 0}.reading-head button{font-size:13px}.paper-scroll{overflow:auto;padding:0 14px 24px}.paper{width:min(100%,850px);margin:auto;box-shadow:0 18px 65px #0007}.paper.zoomed{width:1024px;max-width:none}.paper svg{display:block;width:100%;height:auto}.heart,.bee{will-change:transform}.after{text-align:center;padding:48px 20px}.pixel-heart{font-size:35px;color:#dba3d0}.after p{color:#c5a8b6;font-style:italic}.after button{margin:14px 5px;font-size:13px}article{max-width:680px;margin:0 auto 50px;padding:28px;background:#efdbba;color:#30231e;font-size:20px;line-height:1.8}article h2{color:#9f3297}footer{text-align:center;padding:28px;font:9px monospace;letter-spacing:3px;color:#a38a96}[hidden]{display:none!important}@media(max-width:600px){header{padding:18px 15px}header>span{display:none}#intro{padding-top:45px}.reading-head h2{font-size:22px}.reading-head{margin-top:25px}.reading-head .eyebrow{font-size:8px;letter-spacing:1px}.reading-head button{padding:10px;font-size:11px}.paper-scroll{padding-inline:6px}article{margin:0 12px 30px;font-size:19px}}@media(prefers-reduced-motion:reduce){.envelope{transition:none}}

.next-letter{text-align:center;padding:40px 20px 0}.next-letter h2{font-size:26px;margin-bottom:22px}.next-letter button{display:inline-flex;flex-direction:column;align-items:center;gap:15px;border-color:#dca4cd;padding:14px;background:#382a36;transition:transform .2s,background .2s}.next-letter button:hover{transform:translateY(-4px);background:#493446}.next-letter img{display:block;width:180px;height:auto;border-radius:4px}.next-letter span{font-size:14px}.second-page{display:block;width:100%;height:auto}.page-note{text-align:center;padding:0 20px 30px;color:#c7b6be;font-style:italic}@media(prefers-reduced-motion:reduce){.next-letter button{transition:none}}

@font-face{font-family:Lobster;src:url("Lobster-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

.image-back{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.image-back img{display:block;width:70px;height:auto;border-radius:4px}.image-back span{white-space:nowrap}@media(max-width:600px){.image-back img{width:55px}}

.letter-controls{display:flex;align-items:center;gap:12px}@media(max-width:600px){.letter-controls{flex-direction:column;gap:8px}.letter-controls .image-back{padding:8px}}