:root{color-scheme:light;--paper:#f5f5f2;--surface:#fff;--ink:#404444;--muted:#787f79;--line:#dfe2dc;--mint:#4b8971;--mood:#a38343;--event:#b46459;--mint-paper:#dfebe5;--mood-paper:#eee9dd;--event-paper:#f2e3e1;--hand:"Kaiti SC","STKaiti","KaiTi","Noto Serif CJK SC",serif;--body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{touch-action:manipulation}.symbol-library{position:absolute;width:0;height:0;overflow:hidden}.icon{width:27px;height:27px;flex-shrink:0}.site-wrap{width:min(1160px,calc(100% - 96px));margin:auto}.skip-link{position:fixed;top:-80px;left:20px;padding:8px 16px;background:var(--surface);z-index:10}.skip-link:focus{top:12px}.site-header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:12px;font-family:var(--hand);font-size:22px;letter-spacing:2px}.brand img{border-radius:11px;border:1px solid #e9eae5}.site-header nav{display:flex;align-items:center;gap:32px;font-size:13px;color:var(--muted)}.site-header nav a:hover{color:var(--mint)}.header-download{color:var(--ink);display:flex;gap:13px}.hero{min-height:710px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:52px;padding:76px 0 88px}.eyebrow{margin:0 0 23px;font-size:12px;letter-spacing:2px;color:var(--muted)}.hero-copy .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span{width:5px;height:5px;border-radius:50%;background:var(--mint)}h1,h2,h3,h4,p{margin-top:0}h1,h2,h4,.handwriting{font-family:var(--hand);font-weight:400}h1{font-size:clamp(40px,4.3vw,60px);line-height:1.45;letter-spacing:1px;margin-bottom:22px;white-space:nowrap}.mint-period{color:var(--mint)}.hero-description{color:var(--muted);font-size:15px;line-height:2.1;margin-bottom:30px}.download-button{display:inline-flex;align-items:center;gap:13px;background:var(--ink);color:white;padding:11px 20px;border-radius:12px;line-height:1.15;font-size:19px;transition:background .2s,transform .2s}.download-button:hover{background:var(--mint);transform:translateY(-2px)}.download-button small{display:block;font-size:10px;margin-bottom:4px;letter-spacing:1px}.download-arrow{font-size:18px;margin-left:15px}.download-note{font-size:10px;color:var(--muted);margin:13px 0 0}.letter-scene{--accent:var(--mint);--tint:var(--mint-paper);padding-top:12px;min-width:0;scroll-margin-top:45px}.letter-scene[data-type=mood]{--accent:var(--mood);--tint:var(--mood-paper)}.letter-scene[data-type=event]{--accent:var(--event);--tint:var(--event-paper)}.scene-heading{display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--muted);padding:0 6px}.scene-index{font-size:10px;letter-spacing:1px}.letter-stack{position:relative;margin:56px 4px 52px;height:266px}.envelope,.back-envelope{position:absolute;inset:0;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}.back-envelope{background:var(--tint)}.back-one{transform:translate(4px,9px) rotate(1deg);background:var(--mood-paper)}.back-two{transform:translate(1px,17px) rotate(-1.5deg);background:var(--event-paper)}.envelope{overflow:hidden;background:var(--tint);box-shadow:0 20px 36px -28px #263d2b55;transform:rotate(-3deg);transition:background .3s,border-color .3s}.envelope-flap{position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 11%,var(--tint));clip-path:polygon(0 0,100% 0,50% 53%)}.envelope-bottom{position:absolute;inset:0;background:color-mix(in srgb,var(--surface) 30%,var(--tint));clip-path:polygon(0 100%,50% 53%,100% 100%)}.envelope-heading{position:absolute;top:24px;left:26px;right:26px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--accent)}.envelope-heading .icon{width:23px;height:23px}.envelope-status{margin-left:auto;font-size:10px;color:var(--muted)}.envelope-recipient{position:absolute;top:66px;left:28px;font-family:var(--hand);font-size:19px;letter-spacing:2px;opacity:.85}.seal{position:absolute;left:calc(50% - 23px);top:calc(53% - 23px);width:46px;height:46px;display:grid;place-items:center;padding:0;background:var(--accent);color:white;border:1px solid #ffffff66;border-radius:50%;font-family:var(--hand);font-size:22px;transition:transform .2s,background .3s;box-shadow:0 3px 8px #40444410}.seal:hover{transform:scale(1.1)}.envelope-sender{position:absolute;bottom:22px;left:28px;margin:0;font-family:var(--hand);font-size:16px;letter-spacing:1px}.type-options{display:flex;justify-content:center;gap:6px}.type-option{display:flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;padding:7px 13px;min-height:44px;border-radius:30px;font-size:12px;color:var(--muted);transition:background .2s}.time{--type:var(--mint)}.mood{--type:var(--mood)}.event{--type:var(--event)}.type-option .icon{width:23px;height:23px;color:var(--type)}.type-option[aria-pressed=true]{background:var(--surface);border-color:var(--line);color:var(--ink)}.type-option:hover{background:var(--surface)}.scene-note{text-align:center;color:var(--muted);font-size:11px;letter-spacing:1px;margin:15px 0 0}.section{border-top:1px solid var(--line);padding:80px 0}.section-intro{text-align:center}.section-intro .eyebrow{margin-bottom:14px}h2{font-size:34px;line-height:1.55;letter-spacing:1px;margin-bottom:14px}.section-intro>p:last-child{font-size:13px;color:var(--muted)}.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:52px}.type-detail{min-width:0}.detail-heading{display:flex;align-items:center;gap:9px;color:var(--type);padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:23px}.detail-heading h3{font-size:14px;font-weight:400;margin:0}.detail-heading>span{margin-left:auto;font-size:10px;color:var(--muted);letter-spacing:1px}h4{font-size:23px;margin-bottom:13px}.type-detail p{font-size:12px;line-height:2;color:var(--muted)}.example{font-family:var(--hand);font-size:15px;margin-top:23px;padding-left:13px;border-left:2px solid color-mix(in srgb,var(--type) 40%,transparent);color:var(--type)}.everyday{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:100px;padding:90px 45px}.daily-note{background:color-mix(in srgb,var(--surface) 50%,var(--paper));padding:29px 30px 20px;transform:rotate(-2deg);border:1px solid var(--line);box-shadow:0 12px 30px -25px #40444455}.note-header{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.note-header .icon{width:24px;height:24px}.handwriting{font-size:28px;line-height:2.05;margin:26px 0 32px;letter-spacing:2px}.note-footer{display:flex;justify-content:space-between;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.everyday-copy p:not(.eyebrow){font-size:13px;line-height:2.1;color:var(--muted)}.everyday-copy h2{margin-bottom:22px}.small-feature{display:flex;align-items:center;gap:10px;margin-top:27px;font-size:12px;color:var(--mint)}.small-feature .icon{width:24px;height:24px}.closing{text-align:center;padding:66px 0 72px}.closing img{border-radius:18px;border:1px solid var(--line);margin-bottom:20px}.closing .eyebrow{margin-bottom:13px;font-size:11px}.closing h2{font-size:32px;margin-bottom:25px}.text-link{border-bottom:1px solid var(--mint);color:var(--mint);font-size:13px;display:inline-flex;gap:28px;padding:4px 0}.text-link:hover{color:var(--ink)}.mobile-break{display:none}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 0 32px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.footer-brand{font-family:var(--hand);font-size:15px;color:var(--ink);margin-right:18px}.site-footer nav{display:flex;flex-wrap:wrap;gap:20px}.site-footer a:hover{color:var(--mint)}dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #0002;font-family:var(--body)}dialog::backdrop{background:#1c27294d;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;padding:17px 24px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mint)}.dialog-top button{border:0;background:none;font-size:27px;color:var(--muted);width:38px;height:38px;line-height:1}.sample-paper{padding:30px 36px 16px}.sample-paper .eyebrow{font-size:11px}.sample-paper h2{font-size:28px;margin-bottom:23px}.sample-paper #sample-content{font-family:var(--hand);font-size:18px;line-height:2.05}.sample-signature{text-align:right;font-family:var(--hand);margin-top:27px}.dialog-disclaimer{border-top:1px solid var(--line);margin:0;padding:16px 24px;font-size:10px;color:var(--muted);text-align:center}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--paper:#232524;--surface:#2b2e2c;--ink:#e6ece8;--muted:#a7b2aa;--line:#3c4841;--mint:#9ac8b1;--mood:#d0b37b;--event:#d29a90;--mint-paper:#37423b;--mood-paper:#423f34;--event-paper:#433735}.brand img,.closing img{border-color:#ffffff12}.download-button{background:var(--mint);color:var(--paper)}.download-button:hover{background:#b2d6c4}.seal{color:var(--paper);border-color:#ffffff18}.envelope{box-shadow:0 20px 36px -28px #0008}.daily-note{box-shadow:0 12px 30px -25px #0008}}
@media(min-width:1400px){.hero{gap:85px}}
@media(max-width:1000px){.site-wrap{width:calc(100% - 64px)}.hero{gap:30px;min-height:650px}h1{font-size:42px}.letter-stack{height:235px;margin-top:45px}.envelope-recipient{font-size:17px;top:65px}.type-option{padding:7px 9px;font-size:11px}.everyday{gap:55px;padding:75px 10px}.type-grid{gap:25px}.site-footer{align-items:flex-start}.footer-tagline{display:block;margin-top:3px}.site-footer nav{gap:15px}}
@media(max-width:760px){.site-wrap{width:calc(100% - 44px)}.site-header{padding:19px 0}.brand{font-size:19px;gap:9px}.brand img{width:36px;height:36px;border-radius:10px}.site-header nav{gap:16px;font-size:12px}.site-header nav>a:not(.header-download){display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding:56px 0 54px;gap:55px}.hero-copy{text-align:center}h1{font-size:clamp(34px,6.6vw,47px);letter-spacing:0;line-height:1.5}.hero-copy .eyebrow{justify-content:center;font-size:10px;letter-spacing:1.7px;margin-bottom:21px}.hero-description{font-size:13px;line-height:2;margin-bottom:24px}.download-button{text-align:left;font-size:18px}.download-note{font-size:9px}.letter-scene{width:min(430px,100%);margin:0 auto;padding:0 7px}.scene-heading{font-size:10px}.letter-stack{height:235px;margin:38px 6px 39px}.envelope-heading{left:21px;right:21px;top:21px}.envelope-recipient{left:23px;top:64px}.envelope-sender{left:23px;bottom:18px;font-size:15px}.type-options{gap:7px}.type-option{font-size:12px;padding:7px 12px}.scene-note{font-size:10px}.section{padding:52px 0}.section-intro{text-align:left}.section-intro .eyebrow{font-size:10px}h2{font-size:27px}.type-grid{grid-template-columns:1fr;gap:34px;margin-top:34px}.detail-heading{margin-bottom:17px;padding-bottom:13px}.type-detail p{font-size:13px;margin-bottom:0}h4{font-size:24px;margin-bottom:9px}.example{margin-top:17px;font-size:16px}.everyday{display:flex;flex-direction:column-reverse;gap:35px;align-items:stretch}.everyday-copy p:not(.eyebrow){font-size:12px}.daily-note{width:min(400px,calc(100% - 14px));align-self:center;padding:24px 26px 18px}.handwriting{font-size:27px;margin:20px 0 27px}.closing{padding:45px 0}.closing h2{font-size:28px}.site-footer{display:block;text-align:center;font-size:10px;padding:24px 0}.footer-tagline{display:inline}.site-footer nav{justify-content:center;gap:17px;margin-top:18px}.footer-brand{margin-right:10px}.sample-paper{padding:25px}.sample-paper h2{font-size:25px}.sample-paper #sample-content{font-size:17px}}
@media(max-width:360px){.site-wrap{width:calc(100% - 32px)}h1{font-size:31px}.letter-scene{padding:0}.letter-stack{height:210px}.type-option{padding:6px 8px}.envelope-recipient{font-size:16px}.envelope-status{font-size:9px}.mobile-break{display:block}.footer-tagline{display:block}.hero{padding-top:43px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}