@font-face{font-family:Indie Flower;font-display:block;src:url(/assets/indie-flower-latin-CzUxbIJz.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Indie Flower;font-display:block;src:url(/assets/indie-flower-latin-ext-CN8kxkPe.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}*{box-sizing:border-box}:root{--body:#4a3b2c;--paper:#f6efdc;--envelope:#efe3c6;--ink:#23306b;--line:#b9c7df;--book-paper:#f2ead8;--book-cover:#7a2e24}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:100%;margin:0;overflow:hidden}body{background:var(--body);color:var(--ink);font-family:Indie Flower,cursive}#app{grid-template-rows:minmax(0,1fr) minmax(0,1fr);max-width:440px;height:100%;margin:0 auto;display:grid}#doormat{padding:calc(env(safe-area-inset-top) + 24px) 20px 20px;background:repeating-linear-gradient(90deg, #0000 0 38px, #0003 38px 40px), linear-gradient(#5b4a3d, var(--body))}#mat{background:repeating-linear-gradient(45deg,#0000 0 2px,#0001 2px 3px),repeating-linear-gradient(-45deg,#0000 0 2px,#fff1 2px 3px),radial-gradient(#b98a4f,#96693a);border:10px solid #5a3a1c;border-radius:6px;height:100%;position:relative;box-shadow:0 6px 14px #0008,inset 0 0 30px #0004}#desk{padding:24px 20px calc(env(safe-area-inset-bottom) + 24px);background:repeating-linear-gradient(92deg,#0000 0 14px,#0000000d 14px 15px,#0000 15px 37px,#ffffff0a 37px 38px),linear-gradient(#8a5a33,#6d4426);grid-template-columns:1fr 1fr;align-items:center;gap:16px;display:grid;box-shadow:inset 0 8px 16px #0006}#letter-rack{scrollbar-width:none;border-bottom:14px solid #3f2715;border-radius:0 0 4px 4px;align-self:end;align-items:flex-end;gap:2px;min-width:0;height:70%;padding:0 6px 10px;display:flex;overflow:auto hidden}#letter-rack::-webkit-scrollbar{display:none}.rack-slot{background:var(--envelope);white-space:nowrap;border-radius:2px 2px 0 0;flex:0 0 18px;height:84%;font-size:11px;position:relative;overflow:hidden;box-shadow:1px 0 2px #0005}.rack-label{transform-origin:0 0;position:absolute;top:6px;left:50%;transform:rotate(90deg)translateY(-50%)}.rack-date{opacity:.7;margin-left:6px;font-size:9px}#paper{aspect-ratio:1/1.414;background:repeating-linear-gradient(#0000 0 14px, var(--line) 14px 15px) 0 18px / 100% 100% no-repeat, var(--paper);cursor:pointer;border:0;justify-self:center;max-width:100%;height:85%;rotate:4deg;box-shadow:2px 3px #e4dcc6,4px 6px 10px #0007}#paper:active{translate:0 -4px}.rack-postcard{--border:3px;flex:0 0 62%;max-height:70%;margin:0 2px;position:relative}.rack-tab{background:var(--paper);white-space:nowrap;border-radius:3px 3px 0 0;padding:1px 6px 0;font-size:11px;position:absolute;bottom:100%;left:8%;box-shadow:0 -1px 2px #0003}:where([data-posture=portrait],[data-posture=fold-across]) #app{max-width:none}:where([data-posture=fold-across]) #app{grid-template-rows:var(--hinge-start) calc(100% - var(--hinge-end));align-content:space-between}:where([data-posture=landscape],[data-posture=fold-down]) #app{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:none}:where([data-posture=fold-down]) #app{grid-template-columns:var(--hinge-start) calc(100% - var(--hinge-end));justify-content:space-between}:where([data-posture=landscape],[data-posture=fold-down]) #doormat{padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 20px)}:where([data-posture=landscape],[data-posture=fold-down]) #desk{padding:calc(env(safe-area-inset-top) + 20px) calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 20px) 20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-shadow:inset 8px 0 16px #0006;container-type:size}:where([data-posture=landscape],[data-posture=fold-down]) #paper{height:min(85%,70.7cqw - 22.624px)}.envelope{background:var(--envelope);color:var(--ink);border-radius:3px;font-family:Indie Flower,cursive;overflow:hidden;box-shadow:0 3px 8px #0006;container-type:inline-size}#mat .envelope{aspect-ratio:2.1;cursor:pointer;border:0;width:38%;padding:0;position:absolute}.envelope.back{background:linear-gradient(to top left, #0000 calc(50% - 1px), #0002 50%, #0000 calc(50% + 1px)) left bottom / 50% 100% no-repeat, linear-gradient(to top right, #0000 calc(50% - 1px), #0002 50%, #0000 calc(50% + 1px)) right bottom / 50% 100% no-repeat, var(--envelope)}.flap{clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 1px #0003);background:#e6d7b4;position:absolute;inset:0 0 35%}.return-address{text-align:center;font-size:7cqw;position:absolute;bottom:6%;left:0;right:0}.return-address small{opacity:.7;font-size:.6em}.address{place-items:center;font-size:14cqw;display:grid;position:absolute;inset:0}.scribble{pointer-events:none;fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;position:absolute;overflow:visible}.cut{background:repeating-linear-gradient(90deg,#3a2a18 0 5px,#6b5233 5px 7px);width:0;height:2px;position:absolute;top:3px}.blade{opacity:0;pointer-events:none;background:linear-gradient(#c9ccd2,#7d828c);border-radius:2px;width:4px;height:26px;margin-left:-2px;position:absolute;top:-6px;box-shadow:0 0 4px #0008}.envelope.slit{box-shadow:inset 0 3px #2a1d10,0 3px 8px #0006}.postcard{aspect-ratio:1.5;color:var(--ink);border-radius:3px;font-family:Indie Flower,cursive;box-shadow:0 3px 8px #0006;container-type:inline-size}.postcard.front{--border:6px;background:var(--photo,none) center / cover no-repeat #fffdf6;box-shadow:inset 0 0 0 var(--border) #fffdf6, 0 3px 8px #0006;padding:0}#mat .postcard{--border:3px;cursor:pointer;border:0;width:34%;position:absolute}.postcard.back{background:linear-gradient(var(--line), var(--line)) center / 1px 84% no-repeat, var(--paper);overflow:hidden}.postcard-message{appearance:none;resize:none;width:50%;color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word;-webkit-user-select:text;user-select:text;background:0 0;border:0;border-radius:0;outline:none;margin:0;padding:6cqw 3cqw 5cqw 5cqw;font:max(16px,4.6cqw)/1.4 Indie Flower,cursive;position:absolute;top:0;bottom:0;left:0;overflow:hidden}.stamp-box{--gap:1cqw;top:calc(var(--stamp-width) / 4 - var(--gap));right:calc(var(--stamp-width) / 4 - var(--gap));width:calc(var(--stamp-width) + var(--gap) * 2);height:calc(var(--stamp-width) / .82 + var(--gap) * 2);border:1px dashed #0004;position:absolute}.postcard-addressed{position:absolute;top:46%;left:55%;right:6%}.postcard-address,.postcard-return{border-bottom:1px solid var(--line);padding-left:2cqw}.postcard-address{min-height:1.3em;font-size:8cqw;line-height:1.3;position:relative}.postcard-return{margin-top:3cqw;font-size:4.5cqw}.postcard-return small{opacity:.7;font-size:.75em}.page,.writing{--size:calc(var(--page-width) / 17)}.lined,.writing{padding:calc(var(--size) * 2.2) calc(var(--size) * 1.4);font-family:Indie Flower,cursive;font-size:var(--size);line-height:calc(var(--size) * 1.5);color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word;background:repeating-linear-gradient(#0000 0 calc(var(--size) * 1.5 - 1px), var(--line) calc(var(--size) * 1.5 - 1px) calc(var(--size) * 1.5)) 0 calc(var(--size) * 2.2) / 100% calc(100% - var(--size) * 4.4) no-repeat, var(--paper)}.writing{resize:none;-webkit-user-select:text;user-select:text;border:0;border-radius:0;outline:none;overflow:hidden;box-shadow:0 6px 20px #0008}.page{perspective:1400px;transform-style:preserve-3d}.page.behind{z-index:-1}.panel{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,0,.2,1);position:absolute;left:0;right:0}.panel:first-child{transform-origin:bottom}.panel:last-child{transform-origin:top;transition-delay:.4s}.folded .panel:first-child{transition-delay:.4s;transform:rotateX(-180deg)translateZ(-2px)}.folded .panel:last-child{transition-delay:0s;transform:rotateX(180deg)translateZ(-1px)}.face,.back-face{background:var(--paper);backface-visibility:hidden;position:absolute;inset:0;overflow:hidden;box-shadow:0 2px 6px #0003}.back-face{background:#efe7d2;transform:rotateX(180deg)}.face .lined{position:absolute;left:0;right:0}.paper-choice{justify-content:center;align-items:center;gap:28px;padding:0 20px;display:flex;inset:0}.paper-choice button{color:var(--ink);cursor:pointer;border:0;place-items:end center;padding:0 0 8px;font:22px Indie Flower,cursive;display:grid;box-shadow:4px 6px 14px #0008}.choose-letter{aspect-ratio:1/1.414;background:repeating-linear-gradient(#0000 0 14px, var(--line) 14px 15px) 0 18px / 100% 100% no-repeat, var(--paper);width:min(34cqw,150px);rotate:-4deg}.choose-postcard{aspect-ratio:1.5;background:linear-gradient(var(--line), var(--line)) center / 1px 84% no-repeat, var(--paper);width:min(44cqw,200px);rotate:3deg}@container (width>=700px) and (height>=700px){.paper-choice{gap:40px}.paper-choice button{font-size:28px}.choose-letter{width:min(34cqw,210px)}.choose-postcard{width:min(44cqw,280px)}}.address-book{z-index:11;touch-action:none;align-items:flex-start;display:flex;position:fixed;rotate:-1deg}.address-pages{perspective:1600px;background:var(--book-cover);box-shadow:0 0 0 6px var(--book-cover), 0 6px 20px #0008;border-radius:3px;display:grid;position:relative}.address-page{width:var(--page-width);height:var(--page-height);padding:var(--page-pad) 18px;background:repeating-linear-gradient(#0000 0 calc(var(--address-line) - 1px), var(--line) calc(var(--address-line) - 1px) var(--address-line)) 0 var(--page-pad) / 100% calc(100% - 2 * var(--page-pad)) no-repeat, var(--book-paper);position:relative;overflow:hidden}.address-page.left,.address-face.back{box-shadow:inset -14px 0 14px -10px #0005}.address-page.right,.address-face.front{box-shadow:inset 14px 0 14px -10px #0005}.address-spine{background:#5e231b}.address-line{width:100%;height:var(--address-line);color:var(--ink);font:26px / var(--address-line) "Indie Flower", cursive;text-align:start;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;padding:0 4px;display:block;overflow:hidden}.address-heading{color:var(--book-cover);border-bottom:2px solid var(--book-cover);font-weight:700}.address-turning{z-index:2;transform-style:preserve-3d;pointer-events:none;position:relative}.address-face{backface-visibility:hidden;position:absolute;inset:0}.address-face:after{content:"";opacity:var(--shade,0);pointer-events:none;background:#000;position:absolute;inset:0}.address-face.back{transform:rotateY(180deg)}.address-face.back.blank{background:#ece2cc}.address-tabs{height:var(--page-height);margin-left:var(--tab-gap);flex-direction:column;align-items:flex-start;display:flex}.address-tab{width:var(--tab-width);color:var(--ink);border:0;border-radius:0 6px 6px 0;flex:1;place-items:center;padding:0;font:700 13px system-ui;display:grid;box-shadow:inset 0 0 0 1px #0002}.address-tab.empty{color:#23306b55;background:#efe8d8}.crumple{filter:drop-shadow(0 4px 6px #0008)}.crumple>*{box-shadow:none}.creases{opacity:0;pointer-events:none;background:repeating-conic-gradient(from 7deg at 35% 40%, #0000 0 11deg, #0002 11deg 12deg, #fff3 12deg 13deg), repeating-conic-gradient(from 31deg at 68% 66%, #0000 0 17deg, #0002 17deg 18deg, #fff2 18deg 19deg), radial-gradient(#0000 30%, #0003);position:absolute;inset:0}#stage{z-index:10;touch-action:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#000a;position:fixed;inset:0;container-type:size}#stage[hidden]{display:none}[data-posture=fold-across]{--hinge-start:env(viewport-segment-bottom 0 0);--hinge-end:env(viewport-segment-top 0 1)}[data-posture=fold-down]{--hinge-start:env(viewport-segment-right 0 0);--hinge-end:env(viewport-segment-left 1 0)}html[data-held]{height:var(--held-height)}[data-held] #stage{height:var(--held-height);bottom:auto}[data-posture=fold-across] #stage{height:var(--hinge-start);bottom:auto;overflow:clip}[data-posture=fold-down] #stage{width:var(--hinge-start);right:auto;overflow:clip}#stage>*{position:absolute}.hint{left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 28px);text-align:center;color:#f4efe6;pointer-events:none;font-size:20px;animation:2s ease-in-out infinite breathe}@keyframes breathe{50%{opacity:.5}}.action{top:calc(env(safe-area-inset-top) + 16px);color:var(--ink);background:#f4efe6;border:0;border-radius:18px;padding:6px 16px;font:20px Indie Flower,cursive}.action.left{left:16px}.action.right{right:16px}.book-of-stamps{background:linear-gradient(90deg, #0000 calc(50% - 1px), #0003 50%, #0000 calc(50% + 1px)), var(--book-paper);box-shadow:0 0 0 6px var(--book-cover), 0 6px 20px #0008;text-align:center;border-radius:3px;padding:12px}.book-of-stamps small{opacity:.8;margin-top:6px;font-size:18px;display:block}.stamp-pages{grid-template-columns:1fr 1fr;min-height:10px;display:grid}.stamps{grid-template-columns:repeat(3, var(--stamp-width));place-content:start center;gap:8px;display:grid}.stamp-place{width:var(--stamp-width);aspect-ratio:.82}.stamp{--perf:calc(var(--stamp-width) / 9);width:var(--stamp-width);aspect-ratio:.82;-webkit-mask:linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat, radial-gradient(circle calc(var(--perf) / 3), #0000 95%, #000) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round;-webkit-mask:linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat, radial-gradient(circle calc(var(--perf) / 3), #0000 95%, #000) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round;mask:linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat, radial-gradient(circle calc(var(--perf) / 3), #0000 95%, #000) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf) round;touch-action:none;background:#fffdf6;position:relative}.stamp-face{inset:var(--perf);box-shadow:inset 0 0 0 calc(var(--perf) / 2) #8e2a22, inset 0 0 0 calc(var(--perf) / 2 + 1px) #fffd;color:#fffdf6;font-size:calc(var(--stamp-width) * .3);background:linear-gradient(#b8443a,#8e2a22);place-items:center;display:grid;position:absolute}.stamp.stuck{top:calc(var(--stamp-width) / 4);right:calc(var(--stamp-width) / 4);position:absolute}.tucked{translate:0 calc(-1 * var(--peek));filter:brightness(.93);transition-property:translate,rotate,scale,filter;transition-duration:.35s;transition-timing-function:cubic-bezier(.2,1,.4,1);rotate:-3deg;scale:.94}.tucked.forward{z-index:1;translate:0 var(--forward);filter:none;rotate:1deg;scale:1}