/* Approved “收藏来信” concept. Live text and real screenshots, independent
   decorative layers; the art never determines a control's hit target. */
:root {
  --paper:#f4e2dc;--ink:#603844;--muted:#76575a;--accent:#994b64;
  --surface:#fff7ec;--surface-soft:#efd7d0;--line:#d7b5ad;--edge:#d9bdb0;
  --button:#a35368;--button-text:#fff9f0;--glass-fill:#fff7eef5;
  --letter-fill:#fff8ed;--letter-ink:#603844;--letter-muted:#795f5e;
  --botanical:url('../letter/light/botanical.png');
  --title-ribbon:url('../letter/light/title-ribbon.svg');
  --envelope:#edc7bf;--envelope-fold:#f8e5d8;--seal:#b96a78;
  --stamp-mask:linear-gradient(#000 0 0) center/calc(100% - 9px) calc(100% - 9px) no-repeat,radial-gradient(circle,#000 4.6px,transparent 4.9px) 0 0/11px 11px round;
}
:root[data-theme=dark] {
  --paper:#19352b;--ink:#f2eedb;--muted:#c4ceba;--accent:#dfdeb9;
  --surface:#294639;--surface-soft:#284c3d;--line:#607561;--edge:#829073;
  --button:#eee7cc;--button-text:#294638;--glass-fill:#254135f7;
  --letter-fill:#efebd7;--letter-ink:#304735;--letter-muted:#53604c;
  --botanical:url('../letter/dark/botanical.png');
  --title-ribbon:url('../letter/dark/title-ribbon.svg');
  --envelope:#506b51;--envelope-fold:#8d9b73;--seal:#918852;
}
body {
  background-image:linear-gradient(115deg,transparent,var(--paper-highlight)),url('../ornaments/paper.png');
  background-size:auto,460px;background-color:var(--paper);background-blend-mode:normal,multiply;
}
body::before {display:none}
.site-header {height:86px;top:10px;padding:14px 24px;border:1px solid var(--line);border-radius:28px 4px 4px 4px;box-shadow:0 3px 9px #5633270c}
.brand {gap:12px;font-family:"Songti SC",serif}
.brand img {width:44px;height:44px;border-radius:12px}
.brand span {font-size:18px;line-height:1.3}
.brand small {display:block;font:11px/1.5 -apple-system,"PingFang SC",sans-serif;color:var(--muted);margin-top:5px;font-weight:400}
.header-cta {border:0;border-radius:0;padding:8px 18px 16px;min-height:54px;background:var(--letter-fill);color:var(--letter-ink);box-shadow:none;clip-path:polygon(0 0,100% 0,100% 100%,50% 87%,0 100%)}
.theme-toggle {border:0;background:none;border-radius:0;color:var(--ink)}
.hero {position:relative;isolation:isolate;grid-template-columns:1.15fr .85fr;gap:24px 44px;padding:54px 28px 20px;align-items:center}
.hero-copy {z-index:2;min-width:0;max-width:none}
.hero .eyebrow {font-family:"Songti SC",serif;letter-spacing:.16em;border:0;padding:0;margin-bottom:18px}
.hero h1 {font-size:clamp(38px,4.7vw,64px);font-weight:600;line-height:1.28;letter-spacing:.025em}
.hero h1 span {color:var(--ink)}
.hero-lead {font-size:16px;line-height:1.8;margin-bottom:24px}
.hero-actions {gap:16px}
.download-button {position:relative;isolation:isolate;border:0;box-shadow:none;border-radius:0;background:transparent;color:var(--button-text);padding:0 22px;font-size:15px;overflow:visible}
.download-button::before {content:"";position:absolute;inset:-4px;z-index:-1;background:var(--letter-fill);mask:var(--stamp-mask);-webkit-mask:var(--stamp-mask);filter:drop-shadow(0 2px 3px #4b273222)}
.download-button::after {content:"";position:absolute;inset:4px;z-index:-1;background:var(--button);border:1px solid var(--line);transform:none;width:auto;transition:none}
.download-button:hover::after {left:4px}
.download-button:hover {box-shadow:none}
.build-meta {font-variant-numeric:tabular-nums;font-size:12px;gap:9px}
.release-note {font-size:12px;max-width:350px;line-height:1.7}
.mobile-quicklinks {gap:20px;font-size:12px;margin-top:10px}
.hero-visual {padding:20px 25px 36px;border:0;outline:none;background:none;box-shadow:none;min-width:0;isolation:isolate}
.hero-visual::after {display:none}
.hero-visual::before {display:block;content:"";position:absolute;inset:9% 0 4%;background:var(--botanical) right bottom/contain no-repeat;z-index:-1;opacity:.65;transform:none}
.envelope-back {position:absolute;inset:16% 18px 15%;background:linear-gradient(140deg,var(--envelope),var(--envelope-fold));border:1px solid var(--line);transform:rotate(-9deg);z-index:-2;box-shadow:0 7px 18px #20141d16;clip-path:polygon(0 24%,50% 0,100% 24%,100% 100%,0 100%)}
.envelope-back::after {content:"";position:absolute;inset:30% 0 0;background:linear-gradient(32deg,var(--envelope-fold) 49%,transparent 50%),linear-gradient(-32deg,var(--envelope) 49%,transparent 50%)}
.hero-phone,.gallery-phone {position:relative;width:232px;max-width:100%;border:10px solid var(--letter-fill);border-bottom-width:18px;border-radius:0;background:var(--letter-fill);box-shadow:0 8px 16px #211b192b;overflow:visible;transform:none;margin:0}
.hero-phone::after,.gallery-phone::after {content:"";position:absolute;inset:-13px;z-index:-1;background:var(--letter-fill);mask:var(--stamp-mask);-webkit-mask:var(--stamp-mask)}
.hero-phone img,.gallery-phone img {border-radius:0}
.visual-label {bottom:5px;font-size:10px;color:var(--muted)}
.letter-note {grid-column:1/-1;position:relative;display:flex;align-items:center;min-height:115px;padding:20px 130px 20px 130px;margin:0 25px 5px 0;background:var(--letter-fill);border:1px solid var(--line);box-shadow:0 5px 10px #4121290f;transform:rotate(-2deg)}
.letter-note p {font:20px/1.65 "Kaiti SC","Songti SC",serif;letter-spacing:.09em;color:var(--letter-muted);margin:0}
.botanical {display:block;background:var(--botanical) center/contain no-repeat;pointer-events:none}
.note-botanical {position:absolute;width:155px;height:170px;left:-38px;bottom:-12px;transform:rotate(6deg)}
.wax-seal {position:absolute;right:24px;bottom:-16px;display:grid;place-items:center;width:72px;height:72px;background:radial-gradient(circle at 30% 20%,#ffffff32,transparent 70%),var(--seal);border:6px double #ffffff45;border-radius:48% 52% 45% 55%;box-shadow:inset 2px 3px 5px #ffffff32,0 3px 6px #2415153b;transform:rotate(12deg)}
.wax-seal img {width:40px;height:40px;object-fit:contain;filter:sepia(.4);opacity:.9}
.trust-strip {padding:14px 10px;margin-bottom:34px;border-top:0;border-bottom:1px dashed var(--line);gap:18px}
.trust-strip div {padding-left:0;border:0}
.trust-strip strong {font-size:13px}
.trust-strip span {font-size:11px}
.features {padding:0 0 52px}
.features .section-heading {margin:0 0 14px;text-align:center}
.ribbon-title,.section-heading .ribbon-title,.screens .ribbon-title {display:flex;align-items:center;justify-content:center;position:relative;background:var(--title-ribbon) center/100% 100% no-repeat;min-height:83px;width:min(550px,100%);margin:0 auto;padding:18px 64px 23px;color:var(--letter-ink);font:600 28px/1.35 "Songti SC",serif;text-align:center;filter:drop-shadow(0 3px 2px #392d2312)}
.stamp-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feature-stamp {position:relative;isolation:isolate;min-width:0;min-height:215px;padding:42px 20px 24px;filter:drop-shadow(0 4px 5px #4b27321c)}
.feature-stamp::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#fff7,transparent),url('../ornaments/paper.png'),var(--letter-fill);background-size:auto,320px,auto;background-blend-mode:normal,multiply,normal;mask:var(--stamp-mask);-webkit-mask:var(--stamp-mask)}
.feature-stamp::after {content:"";position:absolute;inset:9px;border:1px solid #b8957f55;pointer-events:none}
.feature-stamp h3 {position:relative;z-index:1;font:600 21px/1.4 "Songti SC",serif;color:var(--letter-ink);margin:0 0 10px}
.feature-stamp p {position:relative;z-index:1;font-size:13px;line-height:1.8;color:var(--letter-muted);margin:0;padding-right:70px}
.feature-stamp>img {position:absolute;right:13px;bottom:17px;width:85px;height:85px;object-fit:contain;pointer-events:none}
.stamp-tag {position:absolute;right:16px;top:12px;font:12px/1.4 "Songti SC",serif;padding:2px 8px 4px;border-radius:0 0 0 10px;background:var(--envelope);color:var(--letter-ink);border-bottom:1px solid #ad99864d}
:root[data-theme=dark] .stamp-tag {background:#d4d9bd;color:#344c3b}
.screens {display:block;padding:0 26px 30px;margin-bottom:64px;position:relative;background:var(--glass-fill);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #2c15200d}
.screens .ribbon-title {margin:-15px auto 8px}
.screens-copy {display:flex;flex-direction:column;align-items:center}
.screenshot-source {max-width:640px;text-align:center;font-size:11px!important;margin:6px auto 10px;line-height:1.7!important}
.appearance-switch {margin:0;justify-content:center}
.appearance-switch button {font-size:12px;min-height:44px;border-color:transparent;border-bottom-color:var(--line);border-radius:0;background:transparent}
.screen-tabs {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:min(640px,100%);margin:16px 0 12px}
.screen-tab,.screen-tab.is-active {border:1px solid var(--line);border-radius:7px 7px 2px 2px;padding:7px 5px;min-height:44px;font-size:13px}
.screen-tab.is-active {background:var(--envelope);color:var(--ink);box-shadow:inset 0 -3px var(--accent)}
.screen-caption {width:min(640px,100%);padding:10px 14px;margin:0 0 20px;min-height:0;border:0;background:transparent;gap:2px;text-align:center}
.screen-caption strong {font-size:15px}
.screen-caption span {font-size:12px}
.gallery-stage {display:grid;grid-template-columns:minmax(0,250px) minmax(0,220px);justify-content:center;align-items:center;gap:16px 45px;padding:4px 15px 0;background:none;border:0;outline:0;box-shadow:none}
.gallery-stage::after {display:none}
.gallery-phone {width:220px;max-width:100%;border:9px solid var(--letter-fill);border-bottom-width:16px}
.gallery-phone::after {mask:none;-webkit-mask:none;inset:-12px;border:1px solid var(--line);background:linear-gradient(135deg,var(--envelope-fold) 14px,transparent 14px) top left/35px 35px no-repeat,linear-gradient(-135deg,var(--envelope-fold) 14px,transparent 14px) top right/35px 35px no-repeat,linear-gradient(45deg,var(--envelope-fold) 14px,transparent 14px) bottom left/35px 35px no-repeat,linear-gradient(-45deg,var(--envelope-fold) 14px,transparent 14px) bottom right/35px 35px no-repeat;z-index:2;pointer-events:none}
.album-note {position:relative;min-width:0;min-height:240px;padding:27px 23px 90px;background:var(--letter-fill);box-shadow:0 5px 12px #211b1920;transform:rotate(4deg);border:1px solid #b49e7644;color:var(--letter-ink)}
.album-note>span:first-child {font:21px/1.8 "Kaiti SC","Songti SC",serif;letter-spacing:.07em}
.album-note .botanical {position:absolute;width:140px;height:140px;right:-20px;bottom:-20px;transform:rotate(-12deg)}
.zoom-trigger {grid-column:1/-1;justify-self:center;min-height:44px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);box-shadow:none;font-size:13px}
.journey {padding-bottom:56px}
.journey .section-heading {margin-bottom:20px}
.journey-track {gap:20px}
.journey-track article {padding:20px;background:var(--glass-fill);border:1px dashed var(--line)}
.journey-track h3 {margin:12px 0;font-size:21px}
.guide-intro .eyebrow,.guide-intro>p:last-child {display:none}
.guide-intro h2 {font-size:28px}
.guide-card {background:var(--glass-fill);box-shadow:0 4px 7px #3d243009}
.faq .section-heading h2 {font-size:30px}
.final-cta {background:var(--glass-fill)}
.mobile-dock {isolation:isolate;background:var(--letter-fill);border:1px solid var(--line);color:var(--letter-ink);border-radius:4px;box-shadow:0 -3px 15px #381c1917;overflow:visible;backdrop-filter:none}
.mobile-dock::before {content:"";position:absolute;inset:0 0 auto;height:24px;background:var(--envelope-fold);clip-path:polygon(0 0,100% 0,55% 100%,45% 100%);z-index:-1;border-top:1px solid var(--line);opacity:.65;pointer-events:none}
.mobile-dock .dock-icon {border-radius:9px;flex-shrink:0;width:38px;height:38px}
.mobile-dock>div {flex:1}
.mobile-dock strong {color:var(--letter-ink);font-family:"Songti SC",serif;font-size:15px}
.mobile-dock span {color:var(--letter-muted);font-size:10px}
.mobile-dock a {position:relative;isolation:isolate;background:var(--button);color:var(--button-text);border:4px solid var(--letter-fill);border-radius:0;min-height:44px;padding-inline:15px;font-size:12px;box-shadow:0 0 0 1px var(--line)}
.mobile-dock a::before {content:"";position:absolute;inset:-7px;z-index:-1;background:var(--button);mask:var(--stamp-mask);-webkit-mask:var(--stamp-mask)}
@media(min-width:761px) and (max-width:1100px) {
  .stamp-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-stamp {min-height:185px}
  .hero {padding-inline:8px;gap:24px}
}
@media(max-width:760px) {
  :root {--shell:calc(100% - 32px)}
  .site-header {height:76px;top:6px;width:calc(100% - 24px);margin-top:8px;padding:10px 14px;gap:8px;border-radius:20px 3px 3px 3px}
  .brand img {width:37px;height:37px}
  .brand {gap:9px}
  .brand span {font-size:16px}
  .brand small {font-size:9px;margin-top:3px}
  .header-cta {min-height:50px;padding-inline:12px;font-size:12px}
  .theme-toggle {width:44px;font-size:19px}
  .hero {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px 6px;padding:32px 0 15px;align-items:center}
  .hero-copy {width:auto;text-align:left}
  .hero .eyebrow {font-size:9px;letter-spacing:.06em;margin-bottom:10px}
  .hero h1 {font-size:clamp(26px,7.6vw,36px);line-height:1.34;margin-bottom:12px;letter-spacing:0}
  .hero-lead {font-size:12px;line-height:1.8;margin:0 0 18px;max-width:185px}
  .hero-actions {justify-content:flex-start;gap:12px}
  .download-button {width:auto;min-width:0;max-width:100%;height:48px;min-height:48px;font-size:12px;padding-inline:14px;gap:7px;white-space:nowrap}
  .build-meta {width:100%;justify-content:flex-start;font-size:10px;gap:6px;flex-wrap:wrap}
  .release-note {text-align:left;font-size:10px;margin:7px 0 0;max-width:185px}
  .mobile-quicklinks {gap:12px;font-size:10px;margin-top:4px;justify-content:flex-start;flex-wrap:wrap}
  .mobile-quicklinks a {min-height:44px}
  .hero-visual {width:100%;padding:14px 4px 30px;margin:15px 0 0;align-self:center;max-width:none;height:auto}
  .hero-phone {width:100%;border-width:6px;border-bottom-width:12px}
  .hero-phone::after {inset:-8px}
  .hero-visual::before {inset:0;transform:none}
  .envelope-back {inset:1% 12px 16%;transform:rotate(-8deg)}
  .visual-label {font-size:8px;bottom:6px;letter-spacing:0}
  .letter-note {min-height:78px;margin:2px 18px 0 10px;padding:13px 63px 13px 62px}
  .letter-note p {font-size:14px;line-height:1.6;letter-spacing:.05em}
  .note-botanical {width:100px;height:108px;left:-22px;bottom:-10px}
  .wax-seal {width:48px;height:48px;right:4px;bottom:-10px;border-width:4px}
  .wax-seal img {width:26px;height:26px}
  .trust-strip {gap:12px;padding:13px 3px;margin-bottom:20px}
  .trust-strip strong {font-size:11px}
  .trust-strip span {font-size:9px;line-height:1.6}
  .features {padding-bottom:34px}
  .ribbon-title,.section-heading .ribbon-title,.screens .ribbon-title {min-height:60px;padding:15px 32px 18px;font-size:clamp(18px,4.8vw,23px);width:100%}
  .features .section-heading {margin-bottom:10px}
  .stamp-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .feature-stamp {min-height:170px;padding:34px 14px 19px}
  .feature-stamp h3 {font-size:18px;margin-bottom:8px}
  .feature-stamp p {font-size:11px;line-height:1.9;padding-right:46px}
  .feature-stamp>img {width:57px;height:65px;right:9px;bottom:16px}
  .stamp-tag {font-size:10px;right:13px;top:12px;padding:1px 7px 3px}
  .screens {display:block;padding:0 13px 12px;margin-bottom:35px}
  .screens .ribbon-title {margin-top:-8px;width:calc(100% + 16px);max-width:none;margin-left:-8px}
  .screenshot-source {font-size:10px!important;margin:4px auto 9px}
  .appearance-switch {gap:3px;flex-wrap:nowrap}
  .appearance-switch button {font-size:10px;padding-inline:9px}
  .screen-tabs {grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-block:12px 8px}
  .screen-tab {font-size:11px;padding-inline:2px}
  .screen-caption {padding:4px;margin-bottom:14px}
  .screen-caption strong {font-size:13px}
  .screen-caption span {font-size:10px;line-height:1.7}
  .gallery-stage {grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);padding:5px 4px 0;gap:12px 20px;align-items:center}
  .gallery-phone {width:100%;border-width:6px;border-bottom-width:11px}
  .gallery-phone::after {inset:-8px}
  .album-note {padding:15px 10px 70px;min-height:175px;transform:rotate(3deg)}
  .album-note>span:first-child {font-size:14px;line-height:1.8}
  .album-note .botanical {width:88px;height:100px;right:-8px;bottom:-10px}
  .zoom-trigger {font-size:11px;padding:6px 15px}
  .journey {padding-bottom:30px}
  .journey .section-heading h2 {font-size:25px}
  .journey-track {gap:10px}
  .journey-track article {padding:16px 16px 16px 40px}
  .journey-track article::before {left:16px;top:22px}
  .journey-track h3 {font-size:18px;margin:7px 0}
  .journey-track p {font-size:12px}
  .guide,.faq {padding-bottom:32px}
  .guide-intro h2,.faq .section-heading h2 {font-size:25px}
  .guide-card summary {font-size:14px}
  .mobile-dock {display:flex;gap:10px;padding:17px 14px 10px;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));min-height:72px}
  footer {padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
@media(max-width:350px) {
  .brand span {font-size:14px}.brand small {font-size:8px}.brand img {width:32px;height:32px}
  .site-header {padding-inline:11px}.header-cta {padding-inline:10px}
  .hero h1 {font-size:26px}.hero-lead {font-size:11px}.download-button {font-size:11px;padding-inline:12px}
  .feature-stamp {padding-inline:13px;min-height:178px}.feature-stamp h3 {font-size:17px}
  .feature-stamp p {padding-right:37px;font-size:10px}.feature-stamp>img {width:49px;height:55px;right:9px}
  .album-note {padding-inline:9px}.album-note>span:first-child {font-size:12px}
  .mobile-dock {gap:8px;padding-inline:11px}.mobile-dock .dock-icon {width:32px;height:32px}.mobile-dock a {padding-inline:11px}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}
@media(prefers-reduced-transparency:reduce) {.site-header,.screens,.guide-card {background:var(--surface)}}