@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}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{border-bottom:14px solid #3f2715;border-radius:0 0 4px 4px;align-self:end;align-items:flex-end;gap:3px;min-width:0;height:70%;padding:0 8px 10px;display:flex;overflow:hidden}.rack-slot{background:var(--envelope);writing-mode:vertical-rl;white-space:nowrap;border-radius:2px 2px 0 0;flex:0 0 26px;height:80%;padding-top:6px;font-size:15px;overflow:hidden;box-shadow:1px 0 2px #0005}#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}.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}.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}.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}.address-book{background:repeating-linear-gradient(#0000 0 43px, var(--line) 43px 44px) 0 12px, var(--paper);margin:0;padding:12px 24px;list-style:none;rotate:-2deg;box-shadow:0 6px 20px #0008}.address-book button{width:100%;height:44px;color:var(--ink);text-align:start;background:0 0;border:0;padding:0 4px;font:26px Indie Flower,cursive;display:block}.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}#stage[hidden]{display:none}#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}