:root{color:#281d18;background:#f4eee3;font-family:Songti SC,STSong,"Noto Serif SC",PingFang SC,Microsoft YaHei,serif;--hand-font: "Kaiti SC", "STKaiti", "HanziPen SC", "Xingkai SC", "STXingkai", "Songti SC", serif;--letter-col: min( calc((100vw - 54px)/8) , 47px);--letter-ink: #1d1713;--letter-line: rgba(214, 195, 164, .92);--letter-red-line: rgba(173, 72, 55, .62);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 6%,rgba(255,247,220,.72),transparent 24%),linear-gradient(165deg,#e8dcc5,#d3bc98 52%,#b99b73)}button,input,textarea{font:inherit}button{border:0}.app-shell{width:min(100%,480px);min-height:100vh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom))}.app-shell.is-home{position:relative}.app-shell.is-home:before{content:"";position:fixed;inset:14px max(10px,calc((100vw - 480px)/2 + 10px));pointer-events:none;border-radius:8px;background:radial-gradient(ellipse at 36% 78%,rgba(96,89,74,.1) 0 18%,transparent 38%),repeating-linear-gradient(90deg,transparent 0 39px,rgba(143,44,35,.12) 40px,transparent 41px),linear-gradient(180deg,#fff9e4b8,#f0ddb5b3);border:2px solid rgba(143,44,35,.62);box-shadow:0 0 0 18px #f5e2bc6b,0 24px 70px #442b1d2e;opacity:.72}.app-shell.is-home>*{position:relative;z-index:1}.hero{height:clamp(190px,28vh,238px);min-height:0;display:flex;flex-direction:column;justify-content:center;position:relative;margin:4px -2px 16px;padding:24px 20px;overflow:hidden;border-radius:8px;text-align:center;background:#185f65;box-shadow:0 18px 42px #36231842,inset 0 -86px 90px #1f120d47}.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 4%;opacity:.98;filter:saturate(1.16) contrast(1.02)}.hero-wash{position:absolute;inset:0;background:radial-gradient(ellipse at 48% 45%,#03262a2e 0 24%,#05292d94 64%,#08191abd),linear-gradient(180deg,#04272d0f,#12141261)}.hero-title-block{position:relative;z-index:1;width:100%;transform:translateY(4px)}.intro,h1{position:relative;margin:0}h1{max-width:none;font-family:var(--hand-font);font-size:clamp(32px,8vw,42px);line-height:1.15;font-weight:700;color:#fff8e7;text-shadow:0 3px 12px rgba(22,8,4,.62),0 0 12px rgba(255,248,220,.16),0 0 1px rgba(255,255,255,.9);white-space:nowrap}.intro{display:inline-block;margin-top:14px;margin-left:min(112px,28vw);color:#fff3d0;font-family:var(--hand-font);font-size:clamp(17px,4.5vw,24px);font-weight:700;line-height:1.5;white-space:nowrap;text-shadow:0 3px 12px rgba(22,8,4,.62),0 0 10px rgba(255,248,220,.12)}.letter-form{display:grid;gap:16px;padding:22px 18px 20px;background:#fff9e78f;border:1px solid rgba(143,44,35,.18);border-radius:8px;box-shadow:0 18px 48px #5534231a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}label{display:grid;gap:7px}label span{color:#6f3329;font-size:14px;font-weight:700}input,textarea{width:100%;border:1px solid rgba(143,44,35,.18);border-radius:8px;background:#fffcf1b8;color:#2e211b;outline:none;font-family:var(--hand-font);font-size:18px}input{height:50px;padding:0 14px}textarea{min-height:138px;resize:vertical;padding:13px 14px;line-height:1.65}input::placeholder,textarea::placeholder{color:#5b3b2c85}input:focus,textarea:focus{border-color:#a64a36;box-shadow:0 0 0 3px #a64a361f}.primary-button,.ghost-button{min-height:48px;border-radius:8px;cursor:pointer}.primary-button{width:100%;background:#822f25;color:#fff8ec;font-weight:700;box-shadow:0 12px 28px #822f253d}.contact-link{width:max-content;margin:-4px auto 0;padding:4px 8px;background:transparent;color:#62372ab8;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.ghost-button{padding:0 14px;background:#fffbf280;color:#5d4034;border:1px solid rgba(78,48,33,.16)}.error{margin:0;color:#9e2f26;font-size:13px;line-height:1.6}.letter-stage{min-height:calc(100vh - max(18px,env(safe-area-inset-top)) - max(28px,env(safe-area-inset-bottom)));display:flex;flex-direction:column;gap:14px;padding-top:6px}.is-cover-stage{justify-content:flex-start}.back-button{align-self:flex-start}.thinking-title{margin:0;color:#6f3329;font-family:var(--hand-font);font-size:22px;font-weight:700;text-align:center;text-shadow:0 1px 0 rgba(255,243,206,.7)}.letter-paper{--paper-pad-x: 20px;--paper-pad-top: 22px;--paper-pad-bottom: 116px;--paper-inner-width: calc(100% - var(--paper-pad-x) * 2);--letter-col: calc(var(--paper-inner-width) / 8);--letter-column-width: min(26px, calc(var(--letter-col) * .58));--letter-row: min(26px, calc((100vh - 222px) / 21));--letter-row-gap: calc(var(--letter-row) * 1.02);flex:1;width:min(100%,400px);margin:0 auto;min-height:calc(100vh - max(18px,env(safe-area-inset-top)) - max(28px,env(safe-area-inset-bottom)) - 12px);position:relative;display:block;padding:0;overflow:hidden;border-radius:2px;background:linear-gradient(180deg,#f6e8bd,#f3e2b3 52%,#f2dfad);background-size:100% 100%;border:2px solid rgba(126,45,38,.72);box-shadow:inset 0 0 0 4px #f8ecd0b8,inset 0 0 0 6px #7e2d2633,0 0 0 12px #ede0c275,0 24px 64px #432b1f29}.letter-paper.has-actions{padding-bottom:0}.letter-paper:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(160,140,112,.14),transparent 2px,transparent calc(100% - 2px),rgba(160,140,112,.14));mix-blend-mode:multiply}.letter-paper:after{content:"";position:absolute;z-index:1;top:calc(var(--paper-pad-top) + 4px);right:var(--paper-pad-x);bottom:0;left:var(--paper-pad-x);pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--letter-col) - 1px),rgba(225,214,194,.95) calc(var(--letter-col) - 1px) var(--letter-col));background-position-x:calc(var(--letter-col) / -2);clip-path:inset(0 calc(var(--letter-col) / 2) 0 calc(var(--letter-col) / 2))}.letter-to{position:absolute;z-index:1;margin:0;color:var(--letter-ink);width:var(--letter-col);font-family:var(--hand-font);font-size:23px;font-weight:800;line-height:var(--letter-col);writing-mode:vertical-rl;text-orientation:mixed}.letter-body{position:absolute;inset:calc(var(--paper-pad-top) + 4px) var(--paper-pad-x) var(--paper-pad-bottom) var(--paper-pad-x);z-index:2;color:var(--letter-ink);font-family:var(--hand-font);font-size:clamp(18px,5.6vw,24px);font-weight:700;line-height:1;overflow:hidden;scrollbar-width:none;text-shadow:none}.letter-body::-webkit-scrollbar{display:none}.letter-columns{position:absolute;inset:0;z-index:1;display:block;padding:0}.letter-column{position:absolute;top:0;bottom:0;width:var(--letter-column-width);transform:translate(50%);display:block;overflow:hidden}.letter-cell{position:absolute;left:50%;width:var(--letter-column-width);height:var(--letter-row);transform:translate(-50%);display:flex;align-items:center;justify-content:center;font-family:var(--hand-font);font-size:clamp(18px,5vw,23px);font-weight:700;line-height:1;color:#1b1612;text-align:center;white-space:nowrap;text-shadow:0 .4px 0 rgba(27,22,18,.24)}.letter-cell.is-punctuation{width:calc(var(--letter-column-width) * .8);font-size:clamp(15px,4.1vw,18px);transform:translate(-50%) translateY(-2px)}.letter-cell.is-space{visibility:hidden}.letter-body p{margin:0}.letter-spacer{color:transparent}.letter-signature-column{display:block;z-index:2;opacity:.94}.letter-signature-cell{font-size:clamp(17px,4.7vw,21px);font-weight:600}.open-cover-button{display:block;width:min(100%,360px);margin:12px auto 0;min-height:48px;border-radius:8px;background:#7f2f25;color:#fff8ec;font-size:16px;font-weight:700;box-shadow:0 12px 26px #5f271c3d}.thinking-card{position:absolute;left:50%;top:50%;z-index:3;min-width:min(82%,320px);transform:translate(-50%,-50%);padding:16px 18px;border:1px solid rgba(116,57,37,.2);border-radius:8px;background:#fff8e1eb;color:#6f3329;font-family:var(--hand-font);font-size:20px;font-weight:700;line-height:1.35;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 24px 70px #432b1f38,0 0 0 9px #fff2ce52;animation:breatheCard 1.7s ease-in-out infinite}.thinking-line{display:block;white-space:nowrap}.loading-dot:after{content:"";animation:dots 1.2s steps(4,end) infinite}.caret{display:inline-block;width:8px;height:1.2em;background:#7d3027;vertical-align:middle;animation:blink 1s infinite}.actions{display:grid;gap:10px}.actions-hidden{display:none}.paper-actions{position:absolute;left:18px;right:18px;bottom:14px;z-index:4;display:grid;grid-template-columns:1fr 1.25fr;gap:10px;padding-top:14px;background:linear-gradient(180deg,#f6e8c100,#f6e8c1f5 34%)}.paper-actions-single{grid-template-columns:1fr}.button-row{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}.panel-error{padding:12px 14px;border-radius:8px;background:#fff8ecb8}.share-hint{margin:0;color:#604237;font-size:13px;line-height:1.6;text-align:center}.share-copy{margin:-2px 0 0;padding:10px 12px;border:1px solid rgba(130,47,37,.14);border-radius:8px;background:#fff8e894;color:#6c3f34;font-size:13px;line-height:1.6;text-align:center}.letter-cover{position:relative;display:block;width:min(100%,390px);aspect-ratio:.56;margin:4px auto 0;padding:0;overflow:hidden;border-radius:3px;background:radial-gradient(circle at 14% 20%,rgba(95,63,36,.1) 0 1px,transparent 1.6px),radial-gradient(circle at 79% 72%,rgba(95,63,36,.09) 0 1px,transparent 1.7px),linear-gradient(90deg,#e8d0a3 0 32%,#e64e46 32% 68%,#ead5aa 68% 100%);background-size:15px 15px,19px 19px,100% 100%;color:#16110f;box-shadow:inset 0 0 0 1px #fff4c452,inset 0 0 42px #492e1a2e,0 22px 60px #36281e47;cursor:pointer;text-align:left}.letter-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 26%,rgba(105,30,26,.16),transparent 21%),radial-gradient(ellipse at 50% 52%,rgba(105,30,26,.14),transparent 24%),radial-gradient(ellipse at 50% 78%,rgba(105,30,26,.12),transparent 18%),repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.035) 11px),linear-gradient(90deg,rgba(255,249,224,.28),transparent 20%,transparent 82%,rgba(255,249,224,.28));mix-blend-mode:multiply}.letter-cover:after{content:"";position:absolute;right:20px;top:78px;width:82px;height:calc(100% - 156px);border:1.5px solid rgba(92,69,48,.4);border-radius:12px;box-shadow:inset 0 0 0 1px #fff8b440,0 0 16px #fff8b429}.stamp{position:absolute;left:27px;top:22px;z-index:1;width:86px;height:56px;display:flex;align-items:center;justify-content:center;padding:0;border:1.4px solid #2d2a2a;background:#f1eedee6;color:#1f1c19;font-family:Kaiti SC,STKaiti,serif;font-size:clamp(21px,5.5vw,28px);line-height:1;white-space:nowrap;overflow:hidden;transform:rotate(8deg);box-shadow:0 4px #ffffffb8}.letter-cover .stamp:after{display:none}.letter-cover .stamp:before{content:"";position:absolute;inset:-1px;border:1px solid rgba(255,255,255,.52);pointer-events:none}.letter-cover .cover-main:before{content:"";position:absolute;left:50%;top:-72px;width:106px;height:560px;transform:translate(-50%);background:radial-gradient(ellipse at 50% 15%,transparent 0 34%,rgba(100,33,30,.18) 35% 36%,transparent 37%),radial-gradient(ellipse at 50% 42%,transparent 0 33%,rgba(100,33,30,.16) 34% 35%,transparent 36%),radial-gradient(ellipse at 50% 70%,transparent 0 34%,rgba(100,33,30,.13) 35% 36%,transparent 37%);opacity:.72;pointer-events:none;z-index:-1}.postmark{position:absolute;left:112px;top:108px;z-index:1;width:160px;height:86px;border-top:2.5px solid rgba(155,36,28,.58);border-radius:50%;transform:rotate(6deg)}.postmark:before,.postmark:after{content:"";position:absolute;left:12px;width:160px;height:86px;border-top:2.5px solid rgba(155,36,28,.42);border-radius:50%}.postmark:before{top:10px}.postmark:after{top:20px}.cover-recipient,.cover-main,.cover-tagline,.cover-sender{position:absolute;z-index:1;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:0;font-family:var(--hand-font)}.cover-recipient{left:30px;top:138px;width:74px;color:#231b15eb;font-size:clamp(46px,13vw,72px);font-weight:800;line-height:.96;max-height:390px;overflow:hidden;display:flex;align-items:center;text-shadow:0 1px 0 rgba(238,214,151,.45)}.cover-main{left:50%;top:150px;transform:translate(-50%);color:#101010;font-size:clamp(104px,30vw,156px);font-weight:800;line-height:.98;text-shadow:0 1px 0 rgba(245,225,182,.45),0 7px 12px rgba(43,20,14,.22);filter:drop-shadow(0 2px 0 rgba(255,219,168,.16))}.cover-tagline{right:20px;top:78px;width:82px;height:calc(100% - 156px);padding:24px 13px;color:#523d2973;font-size:clamp(38px,10.4vw,55px);font-weight:800;line-height:.96;writing-mode:vertical-rl;text-orientation:mixed;white-space:normal;max-height:none;overflow:hidden;display:flex;align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;box-shadow:none}.cover-tagline span{display:block;width:1.02em;margin:0;white-space:nowrap}.cover-sender{left:30px;bottom:88px;width:74px;color:#231b15eb;font-size:clamp(34px,9.6vw,50px);font-weight:800;max-height:220px;overflow:hidden;display:flex;align-items:center}.save-letter-button{position:fixed;left:max(14px,calc((100vw - 480px)/2 + 14px));bottom:max(18px,env(safe-area-inset-bottom));z-index:8;min-height:44px;padding:0 14px;border-radius:999px;background:#71261fe6;color:#fff8ec;font-size:14px;font-weight:700;box-shadow:0 12px 28px #3f20163d}.modal-backdrop{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:#2a1c1675;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.share-backdrop{background:#1f1812ad}.contact-modal{position:relative;width:min(100%,340px);padding:24px 20px 20px;border-radius:8px;background:#fffaf0;border:1px solid rgba(143,44,35,.18);text-align:center;box-shadow:0 24px 70px #2d1c1447}.share-modal{position:relative;width:min(100%,360px);padding:14px 14px 18px;border-radius:8px;background:#fff8eb;border:1px solid rgba(143,44,35,.16);text-align:center;box-shadow:0 24px 70px #2d1c1447}.share-modal img{width:100%;height:182px;object-fit:cover;object-position:center;border-radius:6px}.share-modal h2{margin:14px 0 8px;color:#3f2a20;font-family:var(--hand-font);font-size:22px}.share-modal p{margin:0;color:#6f3329;font-size:14px;line-height:1.7}.contact-modal img{width:min(100%,260px);display:block;margin:0 auto;border-radius:4px}.contact-modal p{margin:14px 0 0;color:#6f3329;font-size:14px}.modal-close{position:absolute;right:8px;top:8px;width:36px;height:36px;border-radius:999px;background:transparent;color:#6f3329;font-size:24px;line-height:1;cursor:pointer}.export-card{position:fixed;left:-9999px;top:0;width:390px;padding:18px;display:grid;gap:18px;background:#f4eee3}.export-card .letter-cover{width:354px;margin:0 auto;pointer-events:none}.export-card .letter-paper{width:354px;height:610px;min-height:610px;flex:none;margin:0 auto}.export-card .open-hint{display:none}.letter-cover.is-opening,.letter-cover:active{transform:scale(.985) rotate(-.4deg)}@keyframes blink{50%{opacity:0}}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,to{content:"..."}}@keyframes pulseSeal{50%{box-shadow:0 0 0 8px #fff5c91a;transform:translateY(-1px)}}@keyframes breatheCard{50%{transform:translate(-50%,calc(-50% - 2px));box-shadow:0 30px 82px #432b1f42,0 0 0 12px #fff2ce38}}@media(max-width:360px){.app-shell{padding-left:14px;padding-right:14px}h1{font-size:30px}.letter-body{font-size:18px}.paper-actions{left:16px;right:16px;bottom:16px}}