:root{--ink:#4c4238;--ink-soft:#746558;--muted:#9b8b7a;--rose:#9d5b4c;--rose-soft:#c7907a;--gold:#baa17a;--paper:#fffdf5;--ground:#f3eee5;--serif:"Noto Serif SC","Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;--hand:"LXGW WenKai","Kaiti SC","STKaiti","KaiTi","AR PL KaitiM GB",var(--serif);--ui:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;--body-size:18px;--body-leading:2.1}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ground);text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;min-width:280px;color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 20% 5%,#fffdf5 0,transparent 47%),radial-gradient(ellipse at 95% 60%,#ede3d4 0,transparent 48%),var(--ground)}button,a{touch-action:manipulation}button{color:inherit;font:inherit;cursor:pointer;border:0}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--rose);outline-offset:5px}.hidden,[hidden]{display:none!important}button:focus:not(:focus-visible){outline:0}::selection{color:#593e31;background:#ead7bf}svg{display:block}.texture{position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.32' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.corner-line{position:absolute;inset:22px;pointer-events:none;border:1px solid #c5b39440}.corner-line:before,.corner-line:after{position:absolute;content:"";width:6px;height:6px;border:1px solid #bdab8a88;background:var(--ground);transform:rotate(45deg)}.corner-line:before{top:-4px;left:-4px}.corner-line:after{bottom:-4px;right:-4px}
.hero{min-height:100svh;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:58px 32px 30px;isolation:isolate}.hero-botanical{position:absolute;right:-53px;top:-100px;width:265px;transform:rotate(158deg);opacity:.45;pointer-events:none;z-index:-1}.hero-botanical.bottom{right:auto;top:auto;left:-73px;bottom:-125px;transform:rotate(18deg);opacity:.25;width:240px}.hero-content{width:min(960px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:35px;padding:35px 0}.intro{padding:0 0 24px}.eyebrow{font-size:11px;letter-spacing:.24em;color:#9b806b;margin:0 0 31px;display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";width:28px;height:1px;background:#bca584}.hero h1{font:400 clamp(37px,4.8vw,53px)/1.5 var(--hand);letter-spacing:.095em;color:#614b3c;margin:0 0 23px;word-break:keep-all}.hero h1 span{display:block}.subtitle{font:400 14px/2.15 var(--serif);letter-spacing:.13em;margin:0;color:#887766}.intro-rule{width:40px;height:1px;background:#bea58380;margin:29px 0 23px}.dedication{font:400 13px/2 var(--serif);color:#9b8976;margin:0;letter-spacing:.07em}.experience{text-align:center;position:relative}.stage{position:relative;height:365px;width:100%;max-width:415px;margin:0 auto;perspective:1300px;display:flex;align-items:center;justify-content:center;padding-top:82px;isolation:isolate}.envelope-shadow{position:absolute;left:12%;right:8%;height:25px;bottom:20px;background:#5b3d2224;border-radius:50%;filter:blur(17px);transform:rotate(-4deg);z-index:-2}.tucked-flower{position:absolute;width:160px;right:-30px;top:22px;transform:rotate(28deg);opacity:.66;z-index:-1;pointer-events:none}.envelope{position:relative;width:100%;height:250px;background:#dbc3a0;border-radius:4px;transform:rotate(-5deg);filter:drop-shadow(0 12px 13px #5c3d2323);isolation:isolate}.env-inner{position:absolute;inset:3px;border-radius:3px;background:linear-gradient(125deg,#c8ae89,#e6d0b0);overflow:hidden}.insert{position:absolute;left:6.5%;top:8px;width:87%;height:235px;z-index:2;background:linear-gradient(135deg,#fffef8,#faf3e5);text-align:center;border-radius:2px;box-shadow:0 1px 5px #75482b20;padding:26px 20px}.insert:after{position:absolute;inset:10px;border:1px solid #c9b49270;content:""}.insert-label{font:10px/1.8 var(--serif);letter-spacing:.3em;color:#ac9578}.insert-title{font:400 31px/1.7 var(--hand);letter-spacing:.13em;color:#8e5d47;margin:19px 0 11px}.insert-detail{font:12px/2 var(--hand);color:#95806a;letter-spacing:.11em}.insert-ornament{font:12px/1 var(--serif);color:#b4a17e;margin-top:11px;letter-spacing:.4em}.env-front{position:absolute;inset:0;z-index:3;border-radius:4px;background:linear-gradient(160deg,#efe0c6,#e3ccaa);clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}.env-front:before{content:"";position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.75%,#aa8b5c40 50%,transparent 50.25%),linear-gradient(-32deg,transparent 49.75%,#aa8b5c40 50%,transparent 50.25%)}.env-front:after{content:"";position:absolute;inset:8px;border:1px solid #faf0dc88;border-top:0;border-radius:2px}.flap{position:absolute;inset:0;z-index:5;background:linear-gradient(178deg,#f0e1c8,#e1c6a0);clip-path:polygon(0 0,100% 0,50% 56%);transform-origin:50% 0;backface-visibility:visible;border-radius:4px}.flap:after{position:absolute;content:"";inset:0;background:linear-gradient(32deg,transparent 49.6%,#b4936870 50%,transparent 50.4%)}.seal{position:absolute;z-index:6;left:calc(50% - 32px);top:106px;width:64px;height:64px;border-radius:46% 52% 47% 51%;background:radial-gradient(ellipse at 33% 23%,#bb8168,#985744 78%);box-shadow:0 3px 5px #60402944,inset 0 0 0 3px #c28a6c55,inset 0 0 0 5px #8b513f44;display:grid;place-items:center;transform:rotate(3deg);transition:transform .3s;color:#f0d3ae;font:29px var(--hand);text-shadow:0 1px 1px #70422a66;padding:0}.seal:before{position:absolute;inset:9px;border:1px solid #dbae8066;border-radius:50%;content:""}.seal:after{position:absolute;inset:13px;border:1px solid #dbae8033;border-radius:50%;content:""}.seal:hover{transform:rotate(0deg) scale(1.045)}.address{position:absolute;left:0;right:0;bottom:31px;text-align:center;z-index:4;pointer-events:none;color:#755941}.address strong{font:400 15px/1.7 var(--serif);letter-spacing:.12em}.address small{font:10px/1.8 var(--serif);letter-spacing:.2em;display:block;margin-top:6px;color:#9b8163}.open-controls{margin:28px auto 0;position:relative}.open-label{display:inline-flex;align-items:center;justify-content:center;gap:23px;padding:13px 28px;background:#fffaf16e;border:1px solid #b29b7d77;border-radius:2px;color:#876249;font:15px/1.7 var(--hand);letter-spacing:.11em;min-width:225px;transition:background .3s,transform .3s}.open-label:hover{background:#fffdf5;transform:translateY(-2px)}.open-label svg{width:17px;height:17px}.hint{font-size:10px;line-height:1.9;letter-spacing:.06em;color:#9b8b78;margin:12px 0 0;min-height:19px}.silent{background:none;padding:10px 12px;font:11px/1.8 var(--ui);color:#8c7a68;text-decoration:underline;text-decoration-color:#b8a48c66;text-underline-offset:5px}.hero-footer{position:relative;text-align:center;display:flex;flex-direction:column;gap:7px;padding:16px 0 11px}.from{font:13px/1.8 var(--hand);letter-spacing:.09em;color:#8c7662;margin:0}.date{font:10px/1.8 var(--ui);letter-spacing:.15em;color:#ac9985}.petal-separator{display:flex;gap:12px;align-items:center;justify-content:center;margin:0 auto 10px;color:#b6a080}.petal-separator:before,.petal-separator:after{content:"";height:1px;width:32px;background:#b8a48066}.petal-separator svg{width:21px;height:21px}
.hero.departing{animation:heroFade .75s both}.stage.opening .seal{animation:sealBreak .55s forwards}.stage.opening .flap{animation:flapOpen 1.2s .3s forwards}.stage.opening .insert{animation:letterRise 2.55s 1.25s cubic-bezier(.32,.02,.25,1) forwards}.stage.opening .envelope{animation:envSettle 3.3s .8s ease forwards}.stage.opening .address{animation:addressFade 2s 1.5s forwards}.stage.opening .tucked-flower{transition:opacity 2s;opacity:.28}@keyframes sealBreak{to{opacity:0;transform:translateY(12px) rotate(12deg) scale(.93)}}@keyframes flapOpen{0%{transform:rotateX(0deg);z-index:5}51%{z-index:5}52%{z-index:1}100%{transform:rotateX(179deg);z-index:1;background:#dac2a0}}@keyframes letterRise{0%{transform:translateY(0)}78%{transform:translateY(-171px) rotate(3deg)}100%{transform:translateY(-185px) rotate(5deg)}}@keyframes envSettle{to{transform:translateY(60px) rotate(-2deg)}}@keyframes addressFade{to{opacity:.3}}@keyframes heroFade{to{opacity:0;transform:translateY(20px)}}
.reader{max-width:880px;margin:0 auto;padding:0 28px 60px;animation:readerIn 1s ease both;outline:none}.reader-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f3eee5e8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-height:67px;padding:9px 1px;color:#857360}.reader-bar button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;gap:7px;background:none;padding:9px 8px;font:11px/1.7 var(--ui);letter-spacing:.025em;border-radius:3px}.reader-bar button:hover{background:#e8ddcc66}.reader-bar button svg{height:16px;width:16px}.tools{display:flex;align-items:center;gap:7px}.tools .tool-divider{width:1px;height:15px;background:#baa58a44}.progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:#c8b69844}.progress i{display:block;width:0;height:1px;background:#a77555;transition:width .2s}.sheet{position:relative;margin-top:27px;border-radius:2px;background:linear-gradient(145deg,#fffdf7,#fffbf1);box-shadow:0 1px 3px #7e5a3310,0 18px 65px #7f67421a;padding:60px 65px 49px;overflow:hidden;border:1px solid #c9b59538;isolation:isolate}.sheet:before{content:"";position:absolute;inset:15px;border:1px solid #c4af8d50;pointer-events:none;z-index:-1}.sheet:after{position:absolute;content:"";inset:21px;border:1px solid #d8c8b226;pointer-events:none;z-index:-1}.sheet .texture{z-index:-1;opacity:.037}.sheet-floral{position:absolute;width:180px;right:-66px;top:-44px;transform:rotate(182deg);opacity:.24;pointer-events:none;z-index:-1}.sheet-floral.bottom{top:auto;bottom:-113px;right:auto;left:-76px;transform:rotate(-1deg);opacity:.2;width:205px}.letter-head{text-align:center;margin-bottom:47px}.letter-kicker{font-size:10px;line-height:2;letter-spacing:.25em;color:#a58d6d;margin:0 0 11px}.letter-head h2{font:400 43px/1.55 var(--hand);color:#8c5140;letter-spacing:.27em;text-indent:.27em;margin:0}.letter-head .head-rule{display:flex;align-items:center;gap:12px;justify-content:center;margin:17px auto 13px}.head-rule:before,.head-rule:after{content:"";height:1px;width:58px;background:#b8a27f66}.head-rule svg{height:17px;width:23px;color:#b79a70}.letter-subtitle{font:12px/2 var(--hand);letter-spacing:.15em;color:#a18b70;margin:0}.letter-body{position:relative;font:400 var(--body-size)/var(--body-leading) var(--serif);letter-spacing:.025em;line-break:strict;overflow-wrap:break-word;word-break:normal;color:var(--ink);font-kerning:normal}.letter-body p{margin:0 0 1.28em;text-indent:2em;text-align:justify;text-justify:inter-ideograph}.letter-body .salutation{font-weight:500;font-size:calc(var(--body-size) - 1px);text-indent:0;line-height:2;margin-bottom:.8em;letter-spacing:.04em;color:#69533f}.letter-body .greeting{margin-bottom:.85em}.letter-body .heart-paragraph{font-family:var(--hand);font-size:calc(var(--body-size) + 2px);line-height:2.05;color:#825b45;background:linear-gradient(110deg,#efe3d047,#f3e8d422);border-left:2px solid #c2a27e99;padding:16px 19px 17px;margin:1.6em -3px 1.5em;text-indent:0;text-align:left;letter-spacing:.035em}.closing{margin-top:1.4em;line-height:2.05;font-family:var(--hand);font-size:calc(var(--body-size) + 1px)}.closing .respect{padding-left:2em}.signature{position:relative;margin-top:32px;margin-right:4px;padding-right:34px;text-align:right;font:15px/2 var(--serif);color:#725d48}.signature-label{font-size:13px;letter-spacing:.1em;color:#9c876d;margin-bottom:4px}.sig-name{font:400 24px/1.8 var(--hand);letter-spacing:.07em;color:#79523d}.signature time{font:13px/2.4 var(--serif);color:#9b866f;letter-spacing:.035em}.signature-seal{position:absolute;right:-1px;top:41px;width:23px;height:37px;border:1px solid #ad645478;color:#aa65557d;box-shadow:inset 0 0 0 2px #fffcf4,inset 0 0 0 3px #ad645456;text-align:center;font:12px/1.2 var(--hand);padding-top:3px;transform:rotate(5deg);letter-spacing:0}.letter-tail{display:flex;align-items:center;justify-content:center;margin:36px auto 0;gap:10px;color:#b9a17e}.letter-tail:before,.letter-tail:after{content:"";width:34px;height:1px;background:#c8b39466}.letter-tail svg{height:18px;width:28px}.afterword{font:400 17px/2 var(--hand);text-align:center;color:#90755d;letter-spacing:.09em;margin:35px 0 6px}.return-btn{display:flex;align-items:center;gap:7px;margin:12px auto 0;padding:12px 15px;background:none;font:12px/1.8 var(--ui);color:#9b846b}.return-btn svg{width:15px;height:15px}.music-note{font-size:10px;line-height:1.9;text-align:center;color:#aa9985;margin:19px 0 0}.audio-waves{display:flex;align-items:center;gap:2px;height:14px;width:13px}.audio-waves i{width:2px;height:4px;border-radius:3px;background:currentColor}.playing .audio-waves i{animation:wave 1.1s infinite ease-in-out}.playing .audio-waves i:nth-child(2){animation-delay:-.3s}.playing .audio-waves i:nth-child(3){animation-delay:-.6s}.audio-notice{position:fixed;left:50%;bottom:max(25px,env(safe-area-inset-bottom));transform:translate(-50%,8px);z-index:100;background:#66513cef;color:#fff8e9;font:12px/1.8 var(--ui);padding:12px 21px;border-radius:3px;box-shadow:0 5px 20px #3f2c2522;max-width:calc(100vw - 40px);width:max-content;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.audio-notice.show{opacity:1;transform:translate(-50%,0)}.no-script{font:16px/2 var(--serif);padding:25px;text-align:center;color:#704e39;background:#fffdf5}.large-type{--body-size:21px;--body-leading:2.12}@keyframes readerIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes wave{50%{height:13px}}
@media(min-width:1150px){.hero-content{gap:80px}.intro{padding-left:15px}.hero-footer{margin-top:5px}}
@media(max-width:760px){.hero{padding:43px 28px 22px;justify-content:flex-start}.corner-line{inset:15px}.hero-content{display:block;max-width:440px;padding:0;margin:auto}.intro{text-align:center;padding:0}.eyebrow{justify-content:center;font-size:10px;gap:10px;margin-bottom:19px;letter-spacing:.2em}.eyebrow:before{width:20px}.eyebrow:after{content:"";width:20px;height:1px;background:#bca584}.hero h1{font-size:36px;line-height:1.52;letter-spacing:.095em;margin-bottom:12px}.subtitle{font-size:12px;line-height:1.95;letter-spacing:.13em}.intro-rule,.dedication{display:none}.stage{height:307px;max-width:346px;padding-top:70px}.envelope{height:215px}.insert{height:203px;padding:22px 16px}.insert-title{font-size:28px;margin:17px 0 8px}.insert-detail{font-size:11px}.insert-label{font-size:9px}.insert-ornament{display:none}.seal{top:87px;width:60px;height:60px;left:calc(50% - 30px);font-size:27px}.address{bottom:24px}.address strong{font-size:13px;letter-spacing:.08em}.address small{font-size:9px;margin-top:5px}.tucked-flower{width:137px;right:-24px;top:29px}.envelope-shadow{bottom:11px}.open-controls{margin-top:12px}.open-label{font-size:14px;padding:12px 23px;min-width:210px}.hint{font-size:10px;margin-top:10px}.silent{font-size:10px;min-height:38px}.hero-footer{padding:20px 0 3px;margin-top:4px;gap:5px}.from{font-size:12px}.date{font-size:9px}.petal-separator{margin-bottom:7px}.hero-botanical{width:220px;right:-78px;top:-62px;opacity:.3}.hero-botanical.bottom{width:205px;left:-84px;bottom:-101px;opacity:.22}.reader{padding:0 13px 38px}.reader-bar{min-height:61px;padding-inline:2px}.sheet{margin-top:15px;padding:41px 32px 38px}.sheet:before{inset:10px}.sheet:after{inset:15px}.letter-head{margin-bottom:32px}.letter-kicker{font-size:9px;letter-spacing:.18em}.letter-head h2{font-size:37px;letter-spacing:.23em;text-indent:.23em}.letter-subtitle{font-size:11px}.letter-head .head-rule{margin-top:13px;margin-bottom:10px}.letter-body{font-size:var(--body-size);letter-spacing:.015em}.letter-body .salutation{font-size:16px;line-height:2.05}.letter-body .heart-paragraph{padding:13px 14px 14px;font-size:calc(var(--body-size) + 1px);margin-left:-3px;margin-right:-3px}.sheet-floral{width:153px;right:-66px;top:-45px;opacity:.21}.signature{margin-top:29px;padding-right:31px;margin-right:1px}.signature-label{font-size:11px}.sig-name{font-size:22px;letter-spacing:.025em}.signature time{font-size:11px;letter-spacing:0}.signature-seal{top:36px;width:21px;height:35px;font-size:11px}.afterword{font-size:15px;letter-spacing:.035em;margin-top:29px}.closing{font-size:calc(var(--body-size) + 1px)}.large-type{--body-size:21px}}
@media(max-width:360px){:root{--body-size:17px}.hero{padding-left:28px;padding-right:28px}.hero h1{font-size:32px}.stage{height:278px;padding-top:67px}.envelope{height:190px}.insert{height:182px}.seal{top:75px;width:54px;height:54px;left:calc(50% - 27px);font-size:25px}.address{bottom:23px}.address strong{font-size:11px}.address small{font-size:8px}.insert-title{font-size:23px;margin-top:14px}.sheet{padding-left:25px;padding-right:25px}.reader{padding-left:8px;padding-right:8px}.reader-bar button{font-size:10px;padding-inline:6px;gap:5px}.tools{gap:3px}.letter-body .salutation{font-size:15px}.sig-name{font-size:20px}.large-type{--body-size:20px}}
@media(max-width:760px) and (max-height:780px){.hero{padding-top:31px}.eyebrow{margin-bottom:13px}.hero h1{font-size:32px;margin-bottom:9px}.stage{height:277px;padding-top:65px}.hero-footer{padding-top:12px}.open-controls{margin-top:5px}.hint{margin-top:8px}.silent{padding-block:7px;min-height:34px}.petal-separator{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.stage.opening .insert{transform:translateY(-150px)}.hero.departing{opacity:0}}
@media print{html,body{background:white}.hero,.reader-bar,.afterword,.return-btn,.music-note,.audio-notice{display:none!important}.reader{display:block!important;max-width:none;padding:0;animation:none}.sheet{box-shadow:none;border:0;margin:0;padding:10mm 8mm;overflow:visible}.sheet:before,.sheet:after,.sheet-floral,.texture{display:none}.letter-head{margin-bottom:7mm}.letter-head h2{font-size:24pt}.letter-kicker{font-size:8pt}.letter-body{font-size:11pt;line-height:1.85}.letter-body p{margin-bottom:3mm}.letter-body .salutation{font-size:11pt}.letter-body .heart-paragraph{font-size:11pt;border:0;background:none;padding:0;margin:3mm 0;text-indent:2em}.signature{break-inside:avoid;font-size:11pt}.sig-name{font-size:16pt}.signature time{font-size:9pt}.closing{font-size:12pt}.letter-tail{display:none}@page{size:A4;margin:12mm}}