@font-face{font-family:Typewriter;src:url('./assets/fonts/special-elite.ttf')}@font-face{font-family:Xiaowei;src:url('./assets/fonts/xiaowei.ttf');font-display:swap}
:root{--red:#ed302e;--paper:#f6f0e6;--ink:#5a4b40;--type:Typewriter,Xiaowei,'Songti SC',serif;color:var(--ink);font-family:var(--type);background:#e9e3da;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center}button,textarea{font-family:var(--type);color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #b5332f;outline-offset:5px}[hidden]{display:none!important}.app{width:100%;max-width:430px;height:100dvh;max-height:932px;position:relative;overflow:hidden;background:var(--paper)}.screen{height:100%;position:relative}.home{background:radial-gradient(ellipse at 50% 43%,#fff9ef 0%,#f6f0e6 75%)}.home-heading{position:absolute;left:0;right:0;top:9%;text-align:center;z-index:2;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2.3px;color:#ae9681}h1{font-size:23px;font-weight:400;letter-spacing:2px;margin:19px 0 13px}.home-heading p{font-size:12px;letter-spacing:1.5px;color:#9e8a77;margin:0}.stage{position:absolute;top:24%;bottom:17%;width:100%;touch-action:pan-y}.stage canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:50%;width:100%;text-align:center;font-size:12px;letter-spacing:2px;color:#ad8f79}.home-footer{position:absolute;bottom:8%;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between}.small-note{font-size:12px;color:#aa9581;letter-spacing:1px}.compose{width:57px;height:57px;background:var(--red);border:1px solid #fa5753;border-radius:50%;color:#fff9ec;box-shadow:0 5px 12px #cd30221f,inset 0 1px 1px #ffffff66;transition:transform .2s}.compose:hover{transform:translateY(-3px)}.compose svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.home-indicator{position:absolute;bottom:10px;left:calc(50% - 52px);height:4px;width:104px;border-radius:5px;background:#625347;opacity:.65;pointer-events:none}.delivery{position:absolute;bottom:7%;left:0;right:0;text-align:center}.delivery p{font-size:23px;letter-spacing:2px;margin:0 0 12px}.delivery>span{font-size:13px;color:#9e806a}.delivery button{display:block;background:none;border:0;margin:17px auto 0;font-size:11px;color:#b2947f;padding:8px 12px}.posting .home-footer,.posted .home-footer{visibility:hidden}.posting .home-heading p{opacity:0}.writing{display:flex;flex-direction:column;background:#eee2cf;background-image:radial-gradient(#85653f1a .6px,transparent .8px);background-size:19px 29px}.writing-nav{height:75px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:15px 25px 0;color:#92765f}.writing-nav button{border:0;background:none;font-size:23px;padding:10px 4px}.writing-nav>span{font-size:11px;letter-spacing:2px}.writing-nav .draft-dot{color:#a2835e;font-size:30px}.paper{position:relative;z-index:1;flex:1;min-height:160px;margin:0 28px;padding:28px 23px 10px;background:linear-gradient(100deg,#fffbf1,#f8f0e1 80%,#f3e9d7);box-shadow:0 0 13px #8b6b4311;display:flex;flex-direction:column;border-top:1px solid #fffdf8;border-radius:2px 7px 0 0}.paper:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2396836a' opacity='.10' filter='url(%23n)' d='M0 0h170v170H0z'/%3E%3C/svg%3E")}.paper-top{display:flex;justify-content:space-between;font-size:9px;color:#a3937e;padding-bottom:15px;border-bottom:1px solid #b79e7e36;gap:8px}.salutation{font-size:19px;letter-spacing:1px;margin:29px 0 12px}.paper textarea{position:relative;flex:1;min-height:50px;width:100%;border:0;background:transparent;resize:none;outline:none;padding:0;font-size:21px;line-height:1.85;letter-spacing:.6px;caret-color:#dc3731;scrollbar-width:thin;scrollbar-color:#c5ac8f transparent}.paper textarea::placeholder{color:#b6a38c;font-size:18px}.paper-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:14px;padding-bottom:8px}.paper-bottom>span{font-size:9px;color:#b29c84}.paper-bottom button{padding:11px 20px 8px;background:#fcf4e6;border:1px solid #e8dcc7;border-bottom:2px solid #b8a184;border-radius:25px;font-size:13px;box-shadow:0 3px 7px #8a653411;white-space:nowrap}.paper-bottom button span{margin-left:8px;color:#b03f34}.paper-bottom button:disabled{opacity:.35;cursor:default}.typewriter{position:relative;flex-shrink:0;height:126px;z-index:3;margin:0 9px;filter:drop-shadow(0 5px 4px #583c3620)}.platen{position:absolute;left:9px;right:9px;top:0;height:22px;border-radius:9px;background:linear-gradient(#302e2c,#514a42 20%,#282624 65%,#151414 85%,#57504a);box-shadow:inset 0 1px 1px #a3988a;z-index:3}.platen i{position:absolute;top:-4px;width:17px;height:30px;background:repeating-linear-gradient(0deg,#bdb4a0 0 1px,#827865 1px 3px);border-radius:5px;left:-7px;box-shadow:0 1px 2px #0004}.platen i+i{left:auto;right:-7px}.chrome-bar{position:absolute;top:17px;height:5px;left:22px;right:22px;z-index:5;background:linear-gradient(#e9e1d0,#918776 50%,#f0e7d4 80%,#79705f);border-radius:3px}.paper-guide{position:absolute;top:-25px;z-index:4;width:8px;height:39px;background:linear-gradient(90deg,#766d5e,#ddd4bf,#817462);border-radius:1px}.paper-guide.left{left:17px}.paper-guide.right{right:17px}.return-lever{position:absolute;left:-5px;top:2px;width:48px;height:8px;transform:rotate(-29deg);z-index:5;background:linear-gradient(#e5dac5,#9a8c74);border-radius:4px}.typewriter-body{position:absolute;top:20px;bottom:0;left:6px;right:6px;border-radius:24px 24px 9px 9px;background:linear-gradient(110deg,#f95748,#dc2927 40%,#d92325 75%,#e94034);border-top:2px solid #fa6c59;box-shadow:inset 3px 0 8px #ff786847,inset -4px -3px 5px #981e2647;overflow:hidden}.typebasket{position:absolute;left:17%;right:17%;top:-11px;height:69px;border-radius:0 0 50% 50%;background:#3c3530;overflow:hidden;border:3px solid #b8a688;box-shadow:0 2px 3px #67181777}.typebasket i{position:absolute;bottom:-16px;left:calc(50% - 1.4px);height:95px;width:2.8px;background:linear-gradient(90deg,#a59a86,#f1e4cd,#aaa08d);transform-origin:50% 100%}.ribbon{position:absolute;top:-4px;left:27%;right:27%;height:49px;border-bottom:6px solid #41332b;border-radius:0 0 50% 50%;z-index:2}.type-guide{position:absolute;top:6px;left:calc(50% - 11px);width:22px;height:34px;clip-path:polygon(50% 0,100% 44%,85% 44%,85% 100%,15% 100%,15% 44%,0 44%);background:linear-gradient(90deg,#9c9079,#eee3cd,#958a75);z-index:3}.type-guide:after{content:'';position:absolute;left:9px;top:9px;width:4px;height:18px;background:#46372d}.maker{position:absolute;top:65px;width:100%;text-align:center;color:#f9e3bd;font-family:Typewriter,serif;font-size:22px;letter-spacing:3px;text-shadow:0 1px #83251e}.screws{position:absolute;left:22px;right:22px;bottom:15px;display:flex;justify-content:space-between}.screws i{width:6px;height:6px;border-radius:50%;background:linear-gradient(45deg,#bdad8c,#ddcbaa 45%,#6d5239 46% 55%,#c2b08e 56%)}.physical-keys{background:linear-gradient(110deg,#f34a3c,#d62828);border:0;border-radius:0 0 24px 24px;margin:-3px 15px 0;padding:9px 16px 12px;flex-shrink:0;box-shadow:inset 0 -5px 0 #ad2629,0 7px 10px #7f372626}.key-line{display:flex;justify-content:center;gap:7px;margin-bottom:7px}.key-line i{font-style:normal;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;border:2px solid #b9a68a;background:linear-gradient(#fff8e5,#e6d9be);box-shadow:0 2px 0 #713c30;color:#716354;font-family:Typewriter;font-size:10px}.spacebar{display:block;background:linear-gradient(#4f3b30,#2b2623);height:9px;width:65%;margin:9px auto 0;border-radius:10px;box-shadow:0 2px 0 #ee7053}.writing-foot{font-size:10px;color:#ad9276;text-align:center;letter-spacing:2px;margin:16px 0 32px}.notice{position:absolute;z-index:9;bottom:30px;left:20px;right:20px;background:#fff4e3;border:1px solid #d6bda1;padding:14px;font-size:13px;line-height:1.5}.typing .type-guide{animation:strike .09s ease-out}@keyframes strike{50%{transform:translateY(-7px)}}@media(min-width:600px){body{padding:20px}.app{height:calc(100dvh - 40px);max-height:880px;border-radius:30px;border:1px solid #fff9;box-shadow:0 24px 65px #61492c17}}@media(pointer:coarse){.physical-keys{display:none}.writing-foot{margin:13px 0 30px}.writing{padding-bottom:env(safe-area-inset-bottom)}.editing .home-indicator{display:none}}@media(max-height:720px){.writing-nav{height:53px;padding-top:3px}.paper{padding-top:19px}.salutation{margin-top:19px}.typewriter{height:112px}.typewriter-body .maker{top:61px;font-size:20px}.key-line i{width:21px;height:21px}.key-line{margin-bottom:5px}.physical-keys{padding-top:7px;padding-bottom:9px}.writing-foot{margin:12px 0 24px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.key-line .type-key{font:10px Typewriter;border-radius:50%;width:24px;height:24px;padding:0;display:grid;place-items:center;border:2px solid #b9a68a;background:linear-gradient(#fff8e5,#e6d9be);box-shadow:0 2px 0 #713c30;color:#716354}.type-key:active{transform:translateY(2px);box-shadow:none}.ime-bar{text-align:left;background:#fff3db;border:1px solid #cfb998;border-radius:6px;margin:0 0 10px;padding:5px 7px;color:#614b35;min-height:55px}#preedit{display:block;font-size:11px;height:17px;letter-spacing:1px;overflow:hidden;white-space:nowrap}.candidate-line{display:flex;align-items:center;gap:3px;height:24px}.candidate-line button{border:0;background:transparent;padding:3px 5px;font-size:15px;white-space:nowrap}.candidate-line>button{font-size:20px;padding:0 3px}.candidate-line>button:disabled{opacity:.25}#candidates{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}#candidates button:first-child{color:#c02d24}.keyboard-actions{display:flex;gap:7px;margin-top:10px}.keyboard-actions button{font-size:10px;height:26px;padding:3px 7px;border:1px solid #bca17b;border-radius:7px;background:#f1e1bf;box-shadow:0 2px 0 #763e2d}.keyboard-actions #key-space{flex:1}.keyboard-actions #key-backspace,.keyboard-actions #key-enter{font-size:17px}.physical-keys{padding-top:10px}.writing-foot{margin:9px 0 24px}.paper{min-height:140px}.salutation{margin-top:17px}.paper textarea{font-size:19px;line-height:1.7}.maker{letter-spacing:2px}@media(max-height:720px){.key-line .type-key{width:21px;height:21px}.paper{padding-top:13px}.salutation{margin-top:12px;font-size:17px}.paper-bottom{padding-top:7px}.paper-bottom button{padding:8px 16px 6px}.paper textarea{font-size:18px}}@media(pointer:coarse){.physical-keys{display:block}.editing.native-keyboard .physical-keys{display:none}.editing.native-keyboard .writing-foot{display:none}}