/* A real keyboard, a feeding sheet, then the other side of the same paper. */
.mp-typewriter{--tw-width:min(112vw,470px);--tw-paper-width:min(calc(100vw - 68px),300px);--tw-paper-height:365px;--tw-feed:calc(var(--tw-paper-height) - 34px);position:relative;width:var(--tw-width);height:calc(var(--tw-paper-height) + var(--tw-width)*.56 + 15px);left:50%;margin:30px 0 0;transform:translateX(-50%);color:#46513f;text-align:left;isolation:isolate}
.tw-paper-window{position:absolute;inset:0 0 auto;height:calc(var(--tw-paper-height) + 12px);overflow:hidden;z-index:1;perspective:1100px}
.tw-paper{position:absolute;top:12px;left:50%;width:var(--tw-paper-width);height:var(--tw-paper-height);padding:0;border:0;background:none;transform:translate(-50%,var(--tw-feed));text-align:left;color:inherit;touch-action:pan-y;cursor:default;outline-offset:5px}
.tw-paper-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.2,.68,.2,1);transform:rotateY(0deg)}
.tw-paper[aria-pressed=true] .tw-paper-inner{transform:rotateY(180deg)}
.tw-face{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fbf4e6 url('assets/cotton-paper.webp') center/cover;border:1px solid #ded3bc;box-shadow:1px 2px 0 #d9cdb5,2px 6px 12px #6c735c21;border-radius:1px}
.tw-face:before{content:'';position:absolute;inset:10px;border:1px solid #b8ac8b35;pointer-events:none}
.tw-front{padding:35px 22px 24px;transform:rotateY(0deg)}
.tw-typed{display:block;font:14px/1.8 'Courier New',monospace;letter-spacing:-.025em;color:#485140}
.tw-line{position:relative;display:grid;margin:0 0 16px;min-height:25px;overflow-wrap:anywhere}
.tw-line>span{grid-area:1/1;white-space:pre-wrap}.tw-line-guide{visibility:hidden}.tw-line:first-child{margin-bottom:24px;color:#817257}.tw-line:last-child{color:#966e62;margin-top:9px}
.tw-ink:after{content:'';display:none;width:5px;height:1px;background:currentColor;margin-left:1px;vertical-align:baseline}.tw-line.is-writing .tw-ink:after{display:inline-block}
.tw-front-foot{position:absolute;bottom:30px;left:0;right:0;text-align:center;font:23px MoonHand,cursive;color:#92876c;opacity:0;transition:opacity .6s}
.tw-back{transform:rotateY(180deg);padding:26px 22px 24px;color:#4a5846;overflow:hidden}
.tw-back .tw-salutation{display:block;font:27px/1.1 MoonHand,cursive;color:#8e6d60;margin-bottom:9px;overflow-wrap:anywhere}
.tw-back .tw-sorry-title{display:block;font:32px/1.05 MoonHand,cursive;color:#9a6a62;margin:-4px 0 13px}
.tw-back .tw-letter-paragraph{display:block;font:15px/1.5 MoonSerif,Georgia,serif;letter-spacing:.005em;margin-bottom:8px;text-wrap:pretty}
.tw-back .tw-letter-close{display:block;font:24px/1.1 MoonHand,cursive;margin-top:11px;color:#8f6b5f;overflow-wrap:anywhere}
.tw-back .tw-letter-close>span{display:block;margin-top:1px;font-size:30px}
.tw-letter-sprig{position:absolute;right:13px;bottom:19px;width:38px;height:68px;stroke:#8d9a746e;fill:none;stroke-width:1.1;pointer-events:none}
.tw-machine{position:absolute;left:0;right:0;top:calc(var(--tw-paper-height) + 12px - var(--tw-width)*.19);aspect-ratio:4/3;z-index:2;pointer-events:none}
.tw-machine-art{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none}
.tw-key-well{position:absolute;background:#262923;border-radius:30% 30% 28% 28%;box-shadow:inset 0 2px 3px #101b16;pointer-events:none}
.tw-key-cap{position:absolute;inset:0;background-image:url('assets/typewriter.webp');background-repeat:no-repeat;border-radius:inherit;transform-origin:50% 80%;will-change:auto}
.tw-spacebar{position:absolute;left:24.7%;top:78.3%;width:56.8%;height:7.2%;min-height:44px;border:0;padding:0;background:none;z-index:4;color:#6a765b;pointer-events:auto;touch-action:pan-y}
.tw-spacebar:focus-visible{outline:2px solid #51684f;outline-offset:5px;border-radius:7px}
.tw-spacebar .tw-cue-hand{position:absolute;right:9%;top:-12px;color:#a37652;filter:drop-shadow(0 1px #fff3d6);width:29px;height:38px}
.tw-cue-hand{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:tw-tap 2.8s ease-in-out infinite;pointer-events:none}
.tw-paper-cue{position:absolute;left:50%;top:calc(var(--tw-paper-height) - 88px);z-index:4;display:flex;align-items:center;gap:5px;transform:translateX(-50%);color:#887458;font:20px/1 MoonHand,cursive;pointer-events:none;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .55s}
.tw-paper-cue .tw-cue-hand{width:26px;height:35px}
.mp-typewriter[data-state=ready] .tw-paper,.mp-typewriter[data-state=turned] .tw-paper{cursor:pointer}
.mp-typewriter[data-state=ready] .tw-paper-cue{opacity:1;visibility:visible}
.mp-typewriter[data-state=ready] .tw-front-foot,.mp-typewriter[data-state=turned] .tw-front-foot{opacity:1}
.mp-typewriter[data-state=typing] .tw-spacebar .tw-cue-hand,.mp-typewriter[data-state=ready] .tw-spacebar .tw-cue-hand,.mp-typewriter[data-state=turned] .tw-spacebar .tw-cue-hand{display:none}
.tw-instruction{text-align:center;max-width:300px;margin:11px auto 0;color:#6e7e61;font:24px/1.3 MoonHand,cursive;min-height:62px}
.tw-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mp-typewriter[data-paused=true] *,.mp-typewriter[data-static=true] *{animation-play-state:paused!important}
.mp-typewriter[data-static=true] .tw-paper-inner,.mp-typewriter[data-static=true] .tw-paper-cue{transition:none}
.tw-no-script{font:16px/1.7 Georgia,serif;max-width:300px;margin:20px auto;text-align:left}
@keyframes tw-tap{0%,30%,85%,100%{transform:translateY(5px);opacity:.65}45%,58%{transform:translateY(0);opacity:1}}
@media(max-width:360px){.mp-typewriter{--tw-paper-height:345px;--tw-paper-width:calc(100vw - 62px)}.tw-front{padding:32px 21px 25px}.tw-back{padding:22px 21px}.tw-back .tw-letter-paragraph{font-size:15px;line-height:1.45;margin-bottom:7px}.tw-back .tw-salutation{font-size:23px;margin-bottom:7px}.tw-back .tw-sorry-title{font-size:30px;margin-bottom:11px}.tw-back .tw-letter-close{font-size:22px;margin-top:5px}.tw-back .tw-letter-close>span{font-size:28px}.tw-instruction{font-size:23px}.tw-paper-cue{font-size:20px}.tw-typed{font-size:13px}}
@media(prefers-reduced-motion:reduce){.mp-typewriter *{animation:none!important}.tw-paper-inner,.tw-paper-cue{transition:none!important}}