/* 官网统一的粉紫色、居中留白与漫画花园视觉。 */
:root {
  --ink:#382b49; --muted:#74697e; --violet:#8047c7; --violet-deep:#68369f;
  --pink:#bd4e7e; --paper:#fbf8fc; --line:#e8e0ed;
  --display:"Songti SC","STSong","Noto Serif CJK SC",serif;
  --body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --shell:min(1120px,calc(100% - 80px));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); -webkit-font-smoothing:antialiased; }
body.menu-open,html.download-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
img { display:block; max-width:100%; height:auto; }
p { line-height:1.85; }
h1,h2,h3,p { margin-top:0; }
a,button,label { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--violet); outline-offset:5px; }
::selection { background:#e3ccef; color:#382b49; }
.shell { width:var(--shell); margin-inline:auto; }
.icon { display:inline-block; width:22px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.apple-icon { fill:currentColor; stroke:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:12px 20px; border-radius:8px; color:white; background:var(--violet); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header { position:sticky; z-index:40; top:0; height:80px; background:#f8f5fc; border-bottom:1px solid transparent; transition:background .25s,border-color .25s; }
.site-header.is-scrolled { background:rgba(251,248,252,.96); border-color:var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }
.brand { display:flex; align-items:center; gap:16px; }
.brand img { width:152px; height:auto; }
.brand > span { border-left:1px solid #dacee5; padding-left:16px; font-size:12px; letter-spacing:.12em; color:#796886; }
.site-nav { display:flex; align-items:center; gap:32px; font-size:13px; font-weight:550; }
.site-nav > a:not(.button) { padding-block:13px; transition:color .2s; }
.site-nav > a:hover,.site-nav a[aria-current] { color:var(--violet); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:52px; padding:0 26px; border:1px solid transparent; border-radius:999px; background:var(--violet); color:white; font-size:14px; font-weight:650; white-space:nowrap; transition:transform .22s,background .22s,box-shadow .22s; }
.button:hover { background:var(--violet-deep); transform:translateY(-2px); box-shadow:0 10px 24px #7e48b524; }
.site-nav .button:hover { color:white; }
.nav-download { min-height:42px; padding-inline:20px; font-size:13px; }
.nav-download .icon { width:17px; height:17px; }
.menu-toggle { display:none; }
.eyebrow { margin:0 0 22px; font-size:10px; font-weight:600; letter-spacing:.17em; color:#98749f; line-height:1.6; }
.comic-home .site-header { background:transparent; }
.comic-home .site-header.is-scrolled { background:rgba(244,239,248,.93); border-color:rgba(215,201,227,.5); backdrop-filter:blur(14px); }
.garden-hero { position:relative; isolation:isolate; margin-top:-80px; min-height:800px; height:100svh; max-height:940px; overflow:hidden; }
.hero-art { position:absolute; inset:0; z-index:-2; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center 65%; }
.garden-hero::after { position:absolute; z-index:-1; inset:auto 0 0; height:75px; content:""; background:linear-gradient(transparent,var(--paper)); pointer-events:none; }
.hero-copy { position:relative; width:max-content; max-width:calc(100% - 40px); margin:0 auto; padding-top:146px; text-align:center; animation:arrive .9s both; }
.hero-eyebrow { display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:24px; color:#906789; font-size:11px; letter-spacing:.16em; }
.hero-eyebrow span { width:25px; height:1px; background:#cba5c2; }
.hero-copy h1 { position:relative; margin:0; font-family:var(--display); font-size:clamp(48px,4.7vw,68px); font-weight:600; line-height:1.23; letter-spacing:.012em; }
.hero-copy h1 em { font-style:normal; }
.title-heart { position:absolute; width:28px; height:28px; right:-29px; bottom:30px; color:#d781a4; transform:rotate(14deg); fill:#f2cbdc; }
.hero-description { margin:25px 0 0; color:#827187; font-size:14px; line-height:1.9; letter-spacing:.035em; }
.hero-downloads { display:flex; justify-content:center; gap:12px; margin-top:26px; }
.hero-downloads .button { min-width:154px; min-height:54px; box-shadow:0 10px 24px #81519f1c; }
.button-android { background:var(--pink); }
.button-android:hover { background:#a53f6d; box-shadow:0 10px 24px #ac4a7628; }
.availability { margin:16px 0 0; color:#85708b; font-size:10px; letter-spacing:.035em; }
.hero-footnote { position:absolute; bottom:31px; left:0; width:100%; display:flex; align-items:center; flex-direction:column; gap:18px; color:#8e7698; }
.hero-footnote > span { font:16px var(--display); letter-spacing:.16em; }
.hero-footnote a { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:8px; letter-spacing:.15em; }
.hero-footnote a span { height:24px; width:1px; background:#b7a6c4; }
.section-heading { text-align:center; margin-bottom:52px; }
.section-heading h2,.safety-heading h2,.invite-copy h2 { margin-bottom:20px; font:600 clamp(34px,3.2vw,46px)/1.35 var(--display); letter-spacing:.015em; }
.section-heading > p:last-child { color:var(--muted); font-size:14px; margin-bottom:0; }
.story-section { padding-block:104px 82px; }
.story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; }
.story-art { position:relative; aspect-ratio:1; overflow:hidden; border-radius:160px 160px 8px 8px; background:#eee4f1; }
.story-art img { position:absolute; top:0; left:0; width:300%; height:100%; max-width:none; object-fit:fill; transition:transform .8s ease; }
.panel-two img { left:-100%; }
.panel-three img { left:-200%; }
.story-card:hover .story-art img { transform:scale(1.025); }
.story-card:nth-child(2) { padding-top:44px; }
.story-label { display:flex; align-items:center; gap:9px; margin:25px 0 13px; font-size:10px; color:#94779f; letter-spacing:.03em; }
.story-label span { color:#be819f; font:italic 24px Georgia,serif; }
.story-card h3 { margin:0 0 13px; font:600 24px/1.5 var(--display); }
.story-card > p:last-child { margin:0; color:var(--muted); font-size:12px; line-height:1.9; }
.art-note { margin:24px 0 0; color:#8b7e92; font-size:10px; text-align:right; }
.safety-section { padding:88px 0; border-block:1px solid #eae2f0; background:#f1ebf6; }
.safety-layout { display:grid; grid-template-columns:1fr 1fr; gap:86px; align-items:center; }
.safety-heading h2 { font-size:42px; }
.safety-heading > p:not(.eyebrow) { color:var(--muted); font-size:14px; margin-bottom:30px; }
.text-link { display:inline-flex; align-items:center; gap:16px; color:var(--violet); font-size:13px; font-weight:600; }
.text-link .icon { width:21px; transition:transform .2s; }
.text-link:hover .icon { transform:translateX(4px); }
.safety-list article { display:flex; align-items:flex-start; gap:20px; padding:25px 0; border-bottom:1px solid #ded3e7; }
.safety-list article:first-child { padding-top:0; }
.safety-list article:last-child { padding-bottom:0; border-bottom:0; }
.safety-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #d5c5e3; border-radius:50%; flex-shrink:0; color:#976eaf; }
.safety-list h3 { margin:1px 0 8px; font-size:15px; font-weight:600; }
.safety-list p { margin:0; max-width:330px; color:var(--muted); font-size:12px; }
.download-section { padding-block:88px 0; }
.download-invite { position:relative; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; overflow:hidden; border:1px solid #ece0f0; border-radius:26px; padding:64px 76px; background:#f4eaf3; }
.download-invite::before { content:""; position:absolute; inset:0; background:url("./garden-meeting.png") center 25% / cover; opacity:.17; pointer-events:none; }
.download-invite > * { position:relative; }
.invite-copy h2 { margin-bottom:17px; }
.invite-copy > p:not(.eyebrow) { color:var(--muted); font-size:14px; }
.final-download { margin-top:8px; }
.inline-markets { margin-top:17px; display:flex; flex-wrap:wrap; gap:10px; }
.market-empty { margin:0; color:#88708d; font-size:10px; }
.invite-mark { display:flex; align-items:center; flex-direction:column; transform:rotate(6deg); }
.invite-mark > div { display:grid; place-items:center; width:158px; height:158px; border:1px solid #eaddef; border-radius:38px; background:#fdf9ff; box-shadow:0 17px 45px #7e3f9220,inset 0 0 0 7px #fff9; }
.invite-mark img { width:95px; height:95px; }
.invite-mark > strong { margin:24px 0 6px; font:500 29px Georgia,serif; letter-spacing:.07em; color:#765286; }
.invite-mark > span { color:#876590; font-size:12px; letter-spacing:.18em; }
.invite-mark > p { margin:20px 0 0; color:#9a7c9c; font:15px var(--display); }
.contact-invite { display:flex; align-items:center; gap:28px; padding-block:62px; }
.letter-icon { display:grid; place-items:center; width:68px; height:58px; border:1px solid #ddd0e5; border-radius:13px; color:#a878bc; background:#f3edf7; transform:rotate(-8deg); }
.letter-icon .icon { width:30px; height:30px; }
.contact-invite h2 { margin-bottom:8px; font:600 26px var(--display); }
.contact-invite p { margin:0; color:var(--muted); font-size:12px; }
.contact-invite .text-link { margin-left:auto; }
.site-footer { border-top:1px solid #211b31; background:#211b31; color:white; padding-block:70px 120px; }
.site-footer .brand img { filter:brightness(0) invert(1); }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:34px; }
.footer-top p { margin:20px 0 0; color:rgba(255,255,255,.65); font:21px var(--display); letter-spacing:.04em; }
.footer-top nav { display:flex; flex-wrap:wrap; gap:26px; font-size:12px; color:rgba(255,255,255,.8); }
.footer-top nav a:hover,.footer-bottom a:hover { color:white; text-decoration:underline; text-underline-offset:4px; }
.footer-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); font-size:10px; }
.footer-bottom > :last-child { margin-left:auto; }
.download-dock { position:fixed; right:24px; bottom:22px; z-index:45; display:flex; align-items:center; gap:12px; padding:12px; border:1px solid #e5d7ed; border-radius:22px; background:rgba(255,252,255,.97); box-shadow:0 8px 36px #5e367d24; animation:dock-arrive .6s .25s both; }
.dock-mark { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; background:#f2e7fb; }
.dock-mark img { width:31px; height:31px; }
.dock-copy { padding-right:5px; }
.dock-copy strong { display:block; font-size:13px; font-weight:600; }
.dock-copy > span { display:block; margin-top:6px; font-size:9px; color:#8b709d; }
.dock-button { min-height:45px; padding-inline:16px; gap:7px; font-size:12px; }
.dock-button .icon { width:17px; height:17px; }
.download-dialog { width:min(610px,calc(100% - 32px)); max-height:calc(100svh - 40px); margin:auto; padding:0; border:1px solid #e8daef; border-radius:28px; color:var(--ink); background:#fcf9ff; overflow:auto; box-shadow:0 30px 120px #2b12394d; }
.download-dialog::backdrop { background:#33203b59; backdrop-filter:blur(6px); }
.dialog-content { position:relative; padding:40px; text-align:center; }
.dialog-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:#eee5f5; }
.dialog-close:hover { background:#e5d7ed; }
.dialog-mark { display:grid; place-items:center; margin:0 auto 22px; width:70px; height:70px; border:1px solid #e7d4f1; border-radius:19px; background:#f4eafb; }
.dialog-content .eyebrow { font-size:8px; margin-bottom:14px; }
.dialog-content h2 { margin:0 0 14px; font:600 34px/1.3 var(--display); }
#dialog-description { margin:0 0 28px; color:var(--muted); font-size:12px; }
.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
.platform-card { min-width:0; padding:23px 20px; border:1px solid transparent; border-radius:18px; background:var(--violet); color:white; transition:border-color .2s,box-shadow .2s; }
.platform-card:nth-child(2) { background:var(--pink); }
.platform-card.is-selected { border-color:rgba(255,255,255,.65); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.platform-heading { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.platform-heading h3 { font-size:17px; margin:0; font-weight:600; }
.platform-heading .icon { width:23px; height:23px; color:white; }
.platform-pending strong { color:white; font-size:12px; font-weight:500; }
.platform-pending p { color:rgba(255,255,255,.9); font-size:10px; margin:7px 0 0; }
.dialog-note { margin:24px 0 0; color:var(--muted); font-size:11px; }
.dialog-contact { display:inline-flex; align-items:center; gap:10px; font-size:12px; color:var(--violet); }
.dialog-contact .icon { width:17px; height:17px; }
.store-button { display:flex; flex-direction:column; gap:5px; margin-top:10px; padding:13px; border-radius:12px; background:var(--violet); color:white; transition:background .2s; }
.store-button:hover { background:var(--violet-deep); }
.store-button b { font-size:13px; font-weight:600; }
.store-button small { font-size:9px; opacity:.85; }
.store-button-pink { background:#b7507b; }
.platform-card .store-button { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4); }
.platform-card .store-button:hover { background:rgba(255,255,255,.24); }
@keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes dock-arrive { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }

@media(min-width:1600px) {
  .hero-copy { padding-top:168px; }
  .hero-copy h1 { font-size:72px; }
  .hero-art img { object-position:center 70%; }
}
@media(max-width:1020px) {
  :root { --shell:calc(100% - 56px); }
  .brand > span { display:none; }
  .site-nav { gap:24px; }
  .story-grid { gap:24px; }
  .story-card h3 { font-size:21px; }
  .desktop-only { display:none; }
  .safety-layout { gap:45px; }
  .safety-heading h2 { font-size:36px; }
  .download-invite { padding:50px; }
}
@media(max-width:840px) {
  .site-header { height:72px; }
  .garden-hero { margin-top:-72px; }
  .brand img { width:143px; }
  .menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; border:1px solid #e3d8eb; border-radius:50%; background:transparent; align-items:center; }
  .menu-toggle span { display:block; width:17px; height:1.5px; background:#7c578e; transition:transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
  .site-nav { position:absolute; display:none; top:calc(100% + 8px); left:24px; right:24px; padding:22px; border:1px solid #e5d7ed; border-radius:20px; background:#fdfaff; box-shadow:0 20px 50px #60466a24; }
  .site-nav.is-open { display:flex; align-items:stretch; flex-direction:column; gap:8px; }
  .site-nav > a:not(.button) { padding:14px; }
  .site-nav .button { margin-top:8px; min-height:48px; }
  .story-section { padding-block:80px 64px; }
  .story-card h3 { font-size:19px; }
  .story-label { font-size:9px; }
  .story-label span { font-size:20px; }
  .safety-heading h2 { font-size:32px; }
  .safety-icon { width:42px; height:42px; }
  .safety-list article { gap:14px; }
  .safety-list h3 { font-size:14px; }
  .download-invite { padding:40px; gap:25px; }
  .invite-mark > div { width:125px; height:125px; border-radius:30px; }
  .invite-mark img { width:80px; height:80px; }
  .invite-mark > strong { font-size:24px; }
  .footer-top { align-items:flex-start; }
  .footer-top nav { max-width:230px; gap:20px 24px; }
  .footer-bottom > :last-child { margin-left:0; }
}
@media(max-width:640px) {
  :root { --shell:calc(100% - 40px); }
  html { scroll-padding-top:92px; }
  .garden-hero { min-height:802px; height:100svh; max-height:892px; }
  .hero-art img { object-position:center bottom; }
  .hero-copy { max-width:calc(100% - 32px); padding-top:112px; }
  .hero-eyebrow { font-size:9px; letter-spacing:.1em; margin-bottom:22px; gap:9px; }
  .hero-eyebrow span { width:18px; }
  .hero-copy h1 { font-size:clamp(35px,9.4vw,45px); line-height:1.28; letter-spacing:0; }
  .title-heart { width:19px; height:19px; right:-16px; bottom:19px; }
  .hero-description { font-size:12px; line-height:1.9; margin-top:20px; }
  .hero-downloads { gap:10px; margin-top:23px; }
  .hero-downloads .button { min-width:0; min-height:50px; padding-inline:21px; font-size:12px; gap:9px; }
  .hero-downloads .icon { width:19px; height:19px; }
  .availability { font-size:9px; margin-top:13px; }
  .hero-footnote { display:none; }
  .garden-hero::after { height:35px; }
  .story-section { padding-block:64px 52px; }
  .section-heading { margin-bottom:35px; }
  .section-heading .eyebrow { font-size:8px; margin-bottom:17px; }
  .section-heading h2 { font-size:28px; }
  .section-heading > p:last-child { font-size:12px; }
  .story-grid { grid-template-columns:1fr; gap:36px; }
  .story-card { max-width:400px; width:100%; margin:auto; }
  .story-card:nth-child(2) { padding-top:0; }
  .story-art { aspect-ratio:1.16; border-radius:140px 140px 7px 7px; }
  .story-art img { height:auto; min-height:100%; }
  .story-label { margin-top:20px; font-size:10px; }
  .story-card h3 { font-size:24px; }
  .story-card > p:last-child { font-size:12px; }
  .art-note { text-align:center; margin-top:30px; font-size:9px; }
  .safety-section { padding:57px 0; }
  .safety-layout { grid-template-columns:1fr; gap:35px; }
  .safety-heading h2 { font-size:32px; }
  .safety-heading .eyebrow { font-size:8px; }
  .safety-heading > p:not(.eyebrow) { font-size:12px; margin-bottom:22px; }
  .safety-list article { padding-block:22px; gap:18px; }
  .safety-icon { width:43px; height:43px; }
  .safety-list h3 { font-size:14px; }
  .safety-list p { font-size:12px; }
  .download-section { padding-top:48px; }
  .download-invite { grid-template-columns:1fr; text-align:center; padding:38px 22px; border-radius:22px; gap:32px; }
  .invite-copy .eyebrow { font-size:8px; }
  .invite-copy h2 { font-size:33px; }
  .invite-copy > p:not(.eyebrow) { font-size:12px; }
  .invite-mark { display:none; }
  .inline-markets { justify-content:center; }
  .contact-invite { display:grid; grid-template-columns:42px 1fr; gap:14px 20px; padding-block:42px; }
  .letter-icon { width:42px; height:42px; border-radius:10px; }
  .letter-icon .icon { width:23px; height:23px; }
  .contact-invite h2 { font-size:23px; }
  .contact-invite p { font-size:11px; }
  .contact-invite .text-link { grid-column:2; margin:2px 0 0; }
  .site-footer { padding-top:34px; padding-bottom:calc(116px + env(safe-area-inset-bottom)); }
  .footer-top { flex-direction:column; gap:27px; margin-bottom:26px; }
  .footer-top nav { max-width:none; gap:15px 22px; font-size:11px; }
  .footer-top p { font-size:14px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; font-size:9px; padding-top:20px; }
  .download-dock { right:12px; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); gap:10px; border-radius:19px; padding:10px; }
  .dock-mark { width:42px; height:42px; flex-shrink:0; }
  .dock-copy { flex:1; padding:0; }
  .dock-copy strong { font-size:12px; }
  .dock-copy > span { font-size:8px; }
  .dock-button { min-height:43px; padding-inline:14px; font-size:11px; gap:7px; }
  .download-dialog { border-radius:23px; max-height:calc(100svh - 28px); }
  .dialog-content { padding:35px 22px 26px; }
  .dialog-mark { width:60px; height:60px; margin-bottom:20px; }
  .dialog-mark img { width:36px; height:36px; }
  .dialog-content h2 { font-size:28px; }
  .dialog-content .eyebrow { font-size:7px; }
  .platform-grid { gap:10px; }
  .platform-card { padding:18px 13px; border-radius:14px; }
  .platform-heading { gap:7px; margin-bottom:16px; }
  .platform-heading h3 { font-size:14px; }
  .platform-heading .icon { width:19px; height:19px; }
  .platform-pending strong { font-size:11px; }
  .platform-pending p { font-size:9px; }
}
@media(max-width:360px) {
  .hero-copy h1 { font-size:34px; }
  .hero-downloads .button { padding-inline:18px; }
  .dock-copy strong { font-size:10px; }
  .dock-copy > span { font-size:7px; }
  .dock-button { padding-inline:12px; }
  .dialog-content { padding-inline:16px; }
  .platform-card { padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}