@import url('/fonts/chinese.css');
@font-face{font-family:Typewriter;src:url('/fonts/typewriter.woff2') format('woff2');font-display:swap}
:root{--bg:#f0eadf;--ink:#38382f;--muted:#7c786d;--blue:#365d7c;--paper:#fff8e5;--paper-edge:#e6d8b7;--line:#d6cebf;--type:Typewriter,'Courier New','Songti SC','Noto Serif SC',SimSun,'Noto Serif SC',serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Serif SC',system-ui,-apple-system,'PingFang SC',sans-serif;font-size:16px;background-image:radial-gradient(#75684410 .7px,transparent .7px);background-size:5px 5px}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible{outline:3px solid #8db8d6;outline-offset:5px}input:focus-visible,textarea:focus-visible{outline:none}input:focus-visible{border-color:var(--blue);box-shadow:0 2px var(--blue)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}.topbar{height:100px;max-width:1280px;padding:0 56px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-family:Georgia,'Songti SC','Noto Serif SC',serif;font-size:24px;letter-spacing:2px}.brand-mark{font-family:var(--type);border:1px solid #aca493;border-radius:50%;width:45px;height:45px;display:grid;place-content:center;font-size:28px;letter-spacing:-3px;padding-right:5px}.brand small{display:block;font-family:var(--type);font-size:10px;letter-spacing:2px;margin-top:3px}.header-right{display:flex;align-items:center;gap:35px}.edition{font:12px var(--type);letter-spacing:1.5px;color:var(--muted)}.sound-button{display:flex;align-items:center;gap:9px;border:1px solid #c7bead;border-radius:22px;padding:9px 16px;background:transparent;color:var(--ink);font-size:13px}.sound-button #sound-icon{font-size:18px}main{max-width:1168px;margin:0 auto;padding:36px 0 0}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 30px}.eyebrow{font:12px var(--type);letter-spacing:2px;color:var(--muted);margin:0 0 10px}.intro h1{font-family:Georgia,'Songti SC','Noto Serif SC',serif;font-weight:400;font-size:35px;letter-spacing:2px;margin:0}.text-button{border:0;background:none;padding:9px 0;color:var(--muted);font-size:14px}.text-button:hover{color:var(--blue)}.text-button span{margin-left:9px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:62px}.desk{min-width:0}.desk-caption{display:flex;justify-content:space-between;font:11px var(--type);letter-spacing:1px;color:var(--muted);padding:0 30px 13px}.paper-wrap{padding:0 28px;perspective:1000px}.paper{background-color:var(--paper);background-image:radial-gradient(#7b59282c .6px,transparent .9px),radial-gradient(#8266301a .7px,transparent 1px),linear-gradient(110deg,#fff4 0%,transparent 35%,#a4791810 100%);background-size:43px 53px,71px 67px,100% 100%;background-position:12px 7px,21px 18px,0 0;box-shadow:0 3px 4px #3b32231c,0 20px 40px #3b322317;position:relative;border:1px solid var(--paper-edge);color:#454336;font-family:var(--type);text-shadow:.35px .2px #45433655}.writing-paper{border-radius:5px 5px 0 0;padding:30px 45px 24px;min-height:485px}.paper-top,.paper-bottom{display:flex;justify-content:space-between;gap:10px;font:11px var(--type);letter-spacing:1px;color:#8c846e;text-shadow:none}.paper-top{margin-bottom:26px}.salutation{font-size:19px;margin-bottom:15px;overflow-wrap:anywhere}.text-area{position:relative}textarea{display:block;width:100%;height:228px;resize:none;border:0;background:transparent;color:inherit;padding:0;margin:0;font-family:var(--type);font-size:18px;line-height:1.8;letter-spacing:.15px;overflow-wrap:anywhere;caret-color:#355777;scrollbar-width:thin;scrollbar-color:#baaf96 transparent;text-shadow:.35px .2px #45433655}textarea::placeholder{color:#a79e88;text-shadow:none}.signature{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin:18px 0 28px;font-size:16px;overflow-wrap:anywhere}.signature span{max-width:100%}.paper-bottom{border-top:1px solid #85765420;padding-top:12px}#strike{position:absolute;pointer-events:none;animation:imprint .19s ease-out forwards;font:18px/1.8 var(--type);color:#363628;background:var(--paper);padding:0 1px;text-shadow:0 1px 2px #383627}.typewriter{position:relative;margin-top:-4px;filter:drop-shadow(0 15px 11px #35322729)}.rail{height:25px;background:linear-gradient(#404541,#959991 20%,#313734 50%,#141c19 63%,#71756e 94%,#282e2a);border:1px solid #4b4b40;box-shadow:0 3px 3px #0003;border-radius:3px;position:relative;z-index:3;margin:0 8px}.rail>i{position:absolute;top:-6px;width:16px;height:34px;background:linear-gradient(90deg,#252b27,#5d6259,#242a25);border-radius:3px;left:-6px}.rail>i:last-child{left:auto;right:-6px}.carriage{position:absolute;top:-13px;left:calc(50% - 54px);width:108px;height:47px;display:flex;align-items:center;gap:8px;padding-left:18px;border-radius:23px;background:linear-gradient(#5987b0,#355e88 40%,#264e72);border:2px solid #244a68;box-shadow:inset 0 2px 2px #c1d8f788,0 4px 4px #0005;transition:left .09s linear}.carriage:before{content:'';position:absolute;top:5px;left:16px;width:64px;height:3px;background:#c4d7e399;border-radius:50%}.carriage>span{width:7px;height:7px;background:#152e47;border-radius:50%;box-shadow:inset 0 1px 2px #000}.carriage>.lamp{background:#e2a459;box-shadow:0 0 4px #ddae6699}.typebar{height:27px;width:8px;background:linear-gradient(90deg,#64675b,#c5c6b8,#70736a);position:absolute;top:-26px;left:48px;transform-origin:bottom}.typebar:before{content:'';position:absolute;top:0;left:-8px;width:25px;height:7px;background:linear-gradient(#232c26 20%,#a8ada2 22%,#cfd0ba 42%,#242b22 50%);box-shadow:0 3px 3px #0004}.machine-body{margin:9px 32px 0;background:linear-gradient(165deg,#547c99,#345b77 60%,#23465e);border:2px solid #31516a;border-radius:14px 14px 28px 28px;padding:14px 30px 15px;box-shadow:inset 0 2px #b6d2e677,inset 0 -5px 8px #112d4060}.machine-name{display:block;text-align:center;font:10px var(--type);letter-spacing:3px;color:#e2e3cb;margin-bottom:12px}.machine-name small{margin-left:15px;font-size:9px;color:#bfd0d8}.key-row{display:flex;gap:8px;justify-content:center;margin:7px 0}.key-row b{display:grid;place-content:center;width:29px;height:26px;border-radius:50%;font:13px var(--type);color:#deded0;background:radial-gradient(ellipse at 40% 30%,#404643,#161f1b 80%);border:2px solid #929789;box-shadow:0 3px #1b2a2b,0 4px 3px #142b40}.spacebar{width:150px;height:10px;border-radius:8px;background:linear-gradient(#46514b,#19211d);box-shadow:0 3px #122c39;margin:12px auto 0}.typewriter.hit .typebar{animation:hammer .13s ease-out}.typewriter.hit .lamp{background:#ffbf6a}.typewriter.hit .key-row b:nth-child(4n){animation:key-hit .13s}.desk-footnote{text-align:center;font-family:'Songti SC','Noto Serif SC',serif;font-size:14px;letter-spacing:3px;color:#88806e;margin:23px 0}.stationery{padding-top:35px}.side-heading{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:26px}.side-heading h2{font-family:Georgia,'Songti SC','Noto Serif SC',serif;font-size:25px;font-weight:400;letter-spacing:1px;margin:13px 0 8px}.side-heading p{font-size:14px;color:var(--muted);margin:0}.field{display:block;font-size:13px;color:#756c5e;margin:0 0 22px}.field input{display:block;width:100%;border:0;border-bottom:1px solid #bcb2a0;border-radius:0;background:transparent;padding:12px 0 10px;font-size:16px;color:var(--ink);outline:0}.field input::placeholder{color:#a39888}.paper-options{border:0;padding:0;margin:0 0 25px;display:flex;align-items:center;gap:12px}.paper-options legend{font-size:13px;color:#756c5e;padding:0;margin-bottom:14px}.swatch{width:27px;height:27px;border-radius:50%;border:1px solid #b4ab99;background:#fff8e5;padding:0}.swatch.blush{background:#f5e4dc}.swatch.mist{background:#e4eced}.swatch.selected{outline:1px solid #7c7464;outline-offset:4px}#paper-label{font-size:12px;color:var(--muted);margin-left:4px}.seal-preview{position:relative;height:126px;border:1px solid #cebfa2;background:#e5d5b9;box-shadow:0 5px 9px #66522d13;transform:rotate(-3deg);padding:58px 22px 0;margin:32px 4px}.seal-preview:before{content:'';position:absolute;inset:0;background:linear-gradient(27deg,transparent 49.8%,#bda98244 50%,transparent 50.6%),linear-gradient(-27deg,transparent 49.8%,#bda98244 50%,transparent 50.6%);pointer-events:none}.seal-preview p{font:16px var(--type);margin:0;max-width:185px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.postmark{position:absolute;top:9px;right:12px;border:1px solid #8c8062;border-radius:50%;width:63px;height:63px;display:grid;align-content:center;text-align:center;font:6px/1.7 var(--type);color:#8b785a;transform:rotate(13deg)}.postmark strong{font-size:7px}.seal-mini{position:absolute;bottom:-12px;right:21px;background:#965147;color:#e8bbb0;width:30px;height:30px;border-radius:50%;border:3px solid #8c443d;text-align:center;font:italic 18px Georgia;box-shadow:0 2px 3px #59251e33}.button{width:100%;border-radius:4px;min-height:49px;padding:12px 19px;display:flex;align-items:center;justify-content:center;gap:20px;font-size:14px;transition:background .2s,transform .2s}.button:hover:not(:disabled){transform:translateY(-1px)}.primary{background:var(--blue);color:#fff5e4;border:1px solid #30516e;box-shadow:0 3px 4px #284a6718}.primary:hover:not(:disabled){background:#284c69}.secondary{background:transparent;border:1px solid #b8ad98;color:#61594c;margin-bottom:12px}.share-note,.privacy-note{font-size:12px;line-height:1.8;text-align:center;color:#887d6b;margin:15px 0}footer{max-width:1168px;margin:35px auto 0;display:flex;justify-content:space-between;padding:24px 0 28px;border-top:1px solid var(--line);color:#887f6f;font:10px var(--type);letter-spacing:1.5px}footer span:nth-child(2){font-family:'Noto Serif SC',system-ui;font-size:12px;letter-spacing:2px}.envelope-scene{text-align:center;padding:34px 0 55px;min-height:650px}.envelope-scene h1{font-family:'Songti SC','Noto Serif SC',Georgia,serif;font-size:32px;font-weight:400;letter-spacing:2px;margin:18px 0}.reader-subtitle{font-size:14px;color:var(--muted);margin:0 0 45px;min-height:20px}.envelope{position:relative;width:480px;height:300px;max-width:90vw;border:0;background:none;perspective:1200px;display:block;margin:0 auto 37px;padding:0;filter:drop-shadow(0 22px 18px #40332225);isolation:isolate}.envelope-back{position:absolute;inset:0;background:#bfa982;border:1px solid #af9870;border-radius:5px;z-index:0}.envelope-letter{position:absolute;left:7%;top:5%;width:86%;height:87%;background:var(--paper);padding:40px 0;font:12px/2 var(--type);color:#77705e;transition:transform 1s .35s;z-index:1;box-shadow:0 0 2px #665}.envelope-letter span{display:block;font-size:22px;margin-top:20px}.envelope-front{position:absolute;inset:0;background:linear-gradient(30deg,#dfc9a4,#e4d3b4);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:3;border-radius:4px}.envelope-front:before{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.6%,#bda98266 50%,transparent 50.6%),linear-gradient(-32deg,transparent 49.6%,#bda98266 50%,transparent 50.6%)}.envelope-flap{position:absolute;inset:0;background:linear-gradient(#e8d6b5,#d6bf95);clip-path:polygon(0 0,100% 0,50% 58%);z-index:5;transform-origin:top;transition:transform .8s ease,z-index .05s .4s;backface-visibility:visible}.wax-seal{position:absolute;z-index:6;top:48%;left:calc(50% - 27px);width:54px;height:54px;display:grid;place-content:center;background:radial-gradient(circle at 35% 25%,#b2675b,#8e433d);border:5px double #ae665a;outline:2px solid #9f5349;border-radius:47% 53% 46% 54%;font:italic 28px Georgia;color:#e7b5a5;box-shadow:2px 4px 7px #61332755;transition:opacity .2s,transform .3s}.envelope-address{position:absolute;left:9%;bottom:18%;font:22px var(--type);z-index:4;color:#6a604b;max-width:75%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.stamp{position:absolute;right:23px;bottom:27px;border:2px dotted #a58b61;color:#8c7756;width:46px;height:52px;display:grid;place-content:center;font:26px Georgia;z-index:4;transform:rotate(-8deg);background:#eddfc4}.stamp small{font:8px var(--type);margin-top:2px}.envelope.opening .wax-seal{opacity:0;transform:scale(1.5)}.envelope.opening .envelope-flap{transform:rotateX(180deg);z-index:0}.envelope.opening .envelope-letter{transform:translateY(-145px)}.open-hint{font:14px 'Songti SC','Noto Serif SC',serif;color:var(--muted);letter-spacing:2px}.reading-scene{max-width:740px;text-align:center;margin:0 auto;padding:0 0 30px}.reading-top{display:flex;justify-content:space-between;align-items:center;margin:0 18px 22px}.reading-top .eyebrow{font-size:10px;letter-spacing:1px;margin:0}.book{perspective:1600px;touch-action:pan-y;position:relative;margin:auto;width:min(640px,100%)}.read-paper{text-align:left;padding:32px 48px 24px;transform-origin:left center;border-radius:2px;min-height:630px;backface-visibility:hidden}.read-paper .paper-top{margin-bottom:20px}.page-content{font-family:var(--type);font-size:18px;line-height:1.85;letter-spacing:.15px;white-space:pre-wrap;overflow-wrap:anywhere;color:#454336;text-shadow:.35px .2px #45433655;height:490px;overflow:hidden}.read-paper .paper-bottom{margin-top:18px}.read-paper.flip-next{animation:flip-next .45s ease-in-out}.read-paper.flip-prev{animation:flip-prev .45s ease-in-out}.pagination{display:flex;align-items:center;justify-content:center;gap:30px;margin:22px 0 8px}.pagination button{width:42px;height:42px;border:1px solid #c2b7a4;background:transparent;color:#655c4c;border-radius:50%;font:25px Georgia}.pagination span{font:14px var(--type);color:#81745f;min-width:84px}.swipe-hint{font-size:12px;color:#8b816f;margin:12px 0 20px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,10px);background:#373c35;color:#fff6df;padding:13px 23px;border-radius:5px;font-size:14px;box-shadow:0 5px 22px #0002;opacity:0;pointer-events:none;z-index:20;transition:.25s;max-width:90vw;width:max-content}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #c7b89b;background:#f5efdf;color:var(--ink);width:420px;max-width:calc(100vw - 32px);border-radius:6px;padding:35px;text-align:center;box-shadow:0 25px 80px #2b241d33}dialog::backdrop{background:#292b2699;backdrop-filter:blur(5px)}dialog h2{font:26px 'Songti SC','Noto Serif SC',Georgia,serif;margin:20px 0 15px}dialog>p:not(.eyebrow){font-size:14px;color:var(--muted);line-height:1.9}dialog .field{text-align:left;margin-top:25px}.close-dialog{position:absolute;top:10px;right:14px;border:0;background:transparent;font-size:25px;color:var(--muted);width:32px;height:32px}.dialog-seal{width:64px;height:64px;background:#99534b;border:4px double #c18876;color:#e9b4a0;border-radius:50%;display:grid;place-content:center;font:italic 33px Georgia;margin:25px auto 0}#measure{position:absolute;left:-10000px;top:0;height:auto!important;visibility:hidden;pointer-events:none}body[data-paper=blush]{--paper:#faeee5;--paper-edge:#dec8b8}body[data-paper=mist]{--paper:#edf3f0;--paper-edge:#c8d6d0}@keyframes hammer{0%{transform:scaleY(1)}35%{transform:scaleY(1.6) rotate(-6deg)}100%{transform:scaleY(1)}}@keyframes imprint{0%{opacity:.3;transform:translateY(-4px) scale(1.5);filter:blur(1px)}55%{opacity:1;transform:translateY(0) scale(.97)}100%{opacity:0;transform:scale(1)}}@keyframes key-hit{40%{transform:translateY(3px);box-shadow:0 1px #1b2a2b}}@keyframes flip-next{0%{transform:rotateY(0);filter:brightness(1)}49%{transform:rotateY(-85deg);filter:brightness(.85)}50%{transform:rotateY(85deg);filter:brightness(.85)}100%{transform:rotateY(0);filter:brightness(1)}}@keyframes flip-prev{0%{transform:rotateY(0)}49%{transform:rotateY(85deg);filter:brightness(.9)}50%{transform:rotateY(-85deg);filter:brightness(.9)}100%{transform:rotateY(0)}}
@media(min-width:1450px){main{padding-top:48px}.intro{margin-bottom:40px}.writing-paper{min-height:530px}textarea{height:270px}.stationery{padding-top:40px}}
@media(max-width:1240px){.topbar{margin:0 28px;padding:0 12px}main,footer{margin-left:40px;margin-right:40px}.studio{gap:35px;grid-template-columns:minmax(0,1fr) 270px}.writing-paper{padding-left:30px;padding-right:30px}.key-row{gap:6px}.machine-body{padding-left:14px;padding-right:14px}}
@media(max-width:860px){.edition{display:none}.studio{grid-template-columns:minmax(0,1fr) 230px;gap:22px}main,footer{margin-left:22px;margin-right:22px}.paper-wrap{padding:0 12px}.desk-caption{padding:0 12px 13px}.writing-paper{padding:25px 23px 20px}.key-row{gap:4px}.key-row b{width:24px;height:24px}.machine-body{margin:9px 16px 0;padding:13px 8px}.intro h1{font-size:29px}.side-heading h2{font-size:22px}}
@media(max-width:680px){.topbar{height:77px;margin:0 20px;padding:0}.brand{font-size:21px;gap:10px}.brand-mark{width:38px;height:38px;font-size:25px}.sound-button{font-size:12px;padding:8px 12px}.header-right{gap:0}main{margin:0 18px;padding-top:27px}.intro{margin-bottom:25px;align-items:flex-start;gap:10px}.intro h1{font-size:26px;letter-spacing:1px}.intro .eyebrow{font-size:10px;letter-spacing:1.2px}.intro .text-button{font-size:12px;white-space:nowrap;padding-top:25px}.intro .text-button span{display:none}.studio{grid-template-columns:1fr;gap:8px}.paper-wrap{padding:0 8px}.writing-paper{min-height:437px;padding:25px 26px 22px}.paper-top{margin-bottom:23px;font-size:10px}.salutation{font-size:18px}textarea{height:196px;font-size:17px}.signature{font-size:15px;margin-bottom:23px}.paper-bottom{font-size:10px}.desk-caption{font-size:10px;padding:0 10px 12px}.machine-body{margin:9px 22px 0;padding:12px 10px 14px}.machine-name{margin-bottom:9px}.key-row{gap:7px}.key-row b{width:25px;height:24px}.desk-footnote{font-size:12px;margin:20px 0 12px}.stationery{padding:22px 11px 0}.side-heading{margin-bottom:22px;padding-bottom:16px}.side-heading h2{font-size:24px}.stationery .field{margin-bottom:20px}.seal-preview{margin:27px 30px;height:132px}.button{min-height:50px}.share-note{margin-bottom:5px}footer{margin:28px 20px 0;padding:22px 0;gap:12px;flex-wrap:wrap}footer span{font-size:9px}footer span:last-child{display:none}footer span:nth-child(2){font-size:11px;letter-spacing:1px}.envelope-scene{min-height:570px;padding-top:35px}.envelope-scene h1{font-size:26px}.envelope-scene .eyebrow{font-size:10px;letter-spacing:1px}.reader-subtitle{margin-bottom:75px}.envelope{width:340px;height:216px;max-width:100%}.wax-seal{width:45px;height:45px;left:calc(50% - 22px);font-size:24px}.envelope-address{font-size:18px}.stamp{right:17px;bottom:20px;width:36px;height:41px;font-size:22px}.envelope-letter{padding:22px 0}.envelope-letter span{font-size:19px;margin-top:10px}.envelope.opening .envelope-letter{transform:translateY(-105px)}.reading-top{margin:0 2px 20px}.reading-top .eyebrow{display:none}.read-paper{padding:25px 27px 22px;min-height:550px}.page-content{font-size:16px;height:422px;line-height:1.9}.read-paper .paper-bottom{margin-top:17px}.swipe-hint{font-size:11px}.reading-scene{padding-bottom:15px}dialog{padding:30px 26px}}
@media(max-width:360px){main{margin:0 12px}.intro h1{font-size:23px}.writing-paper{padding-left:20px;padding-right:20px}.key-row{gap:4px}.key-row b{width:23px;height:23px}.read-paper{padding-left:20px;padding-right:20px}.envelope{height:193px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}