:root { color-scheme: light; --ink:#172033; --muted:#657086; --line:#e3e7ed; --accent:#d55274; --soft:#fff3f6; }
* { box-sizing: border-box; }
body { margin:0; background:#f7f8fa; color:var(--ink); font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
a { color:#b63f60; }
.shell { width:min(860px,calc(100% - 32px)); margin:44px auto 72px; padding:42px clamp(24px,6vw,68px); border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(23,32,51,.07); }
nav { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:40px; padding-bottom:18px; border-bottom:1px solid var(--line); }
nav a { color:var(--muted); font-size:13px; font-weight:650; text-decoration:none; }
.brand { margin-right:auto; color:var(--ink); font-weight:800; }
.eyebrow { margin:0; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:1.5px; }
h1 { margin:6px 0 2px; font-size:36px; letter-spacing:-1px; }
.meta { margin:0 0 34px; color:var(--muted); font-size:13px; }
h2 { margin:32px 0 8px; font-size:19px; }
h3 { margin:20px 0 5px; font-size:15px; }
p,li { color:#3e495d; }
.notice { margin:22px 0; padding:16px 18px; border-left:4px solid var(--accent); border-radius:8px; background:var(--soft); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.button { display:inline-flex; min-height:42px; align-items:center; padding:0 16px; border-radius:10px; background:var(--ink); color:#fff; font-weight:700; text-decoration:none; }
footer { margin-top:42px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
@media (max-width:600px) { .shell { margin:0 auto; width:100%; border:0; border-radius:0; box-shadow:none; } h1 { font-size:29px; } .brand { width:100%; } }

/* Home: the public site shares the app's mint paper / forest ink palette. */
.home { background:#eaf4f0; color:#102b20; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif; }
.home a { color:inherit; }
.home-wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.home-nav { width:min(1180px,calc(100% - 48px)); height:84px; margin:auto; display:flex; align-items:center; gap:42px; }
.home-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.03em; }
.home-brand img { width:38px; height:38px; border-radius:11px; object-fit:cover; }
.home-links { display:flex; gap:28px; margin-left:auto; color:#476559; font-size:13px; font-weight:650; }
.home-links a,.home-footer a { text-decoration:none; }.home-links a:hover,.home-footer a:hover { color:#0d5f42; }
.nav-cta,.home-button { display:inline-flex; align-items:center; gap:16px; min-height:44px; padding:0 18px; border-radius:12px; text-decoration:none; font-size:13px; font-weight:750; }
.nav-cta { background:#123d2d; color:#f5fbf8!important; }.nav-cta span,.home-button span { font-size:18px; line-height:0; }
.hero { min-height:570px; display:grid; grid-template-columns:43% 57%; align-items:center; gap:16px; padding:42px 0 58px; }
.home-kicker { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:#3f735e; font-size:11px; letter-spacing:.1em; font-weight:800; text-transform:uppercase; }.home-kicker i { width:8px; height:8px; border-radius:50%; background:#e16770; display:inline-block; }
.hero h1 { margin:0; color:#0d2a1e; font-size:clamp(46px,6vw,78px); letter-spacing:-.075em; line-height:1.02; }.hero h1 em { color:#146044; font-style:normal; }
.hero-lede { max-width:380px; margin:26px 0 0; color:#547063; font-size:16px; line-height:1.8; }.hero-actions { display:flex; align-items:center; gap:24px; margin-top:30px; }.home-button.primary { background:#114b35; color:#fff; box-shadow:0 8px 22px rgba(17,75,53,.18); }.home-button.primary:hover { background:#0c3a29; transform:translateY(-1px); }.text-link { color:#285b48; font-size:13px; font-weight:750; text-decoration:none; border-bottom:1px solid #99b9ab; padding-bottom:4px; }.text-link span { margin-left:8px; }.hero-note { margin-top:25px; color:#789286; font-size:11px; }.dot { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#4da578; }
.hero-art { position:relative; min-height:470px; }.art-paper { position:absolute; right:4%; top:24px; width:min(530px,96%); height:374px; overflow:hidden; border:1px solid rgba(25,73,54,.28); border-radius:18px; background:#f7fcf9; box-shadow:18px 24px 0 rgba(126,168,150,.24),0 20px 50px rgba(30,77,56,.15); transform:rotate(2.2deg); }.window-bar { height:48px; display:flex; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid #dbe9e2; color:#315746; font-size:12px; }.window-bar > span { width:8px; height:8px; border-radius:50%; background:#d7a39d; }.window-bar > span:nth-child(2){background:#d8be73}.window-bar > span:nth-child(3){background:#79ad8c}.window-bar b { margin-left:8px; font-size:12px; }.window-bar small { margin-left:auto; padding:7px 10px; border-radius:7px; background:#deeee6; color:#286149; font-size:10px; }.window-body { display:grid; grid-template-columns:126px 1fr; height:calc(100% - 48px); }.side-line { display:flex; flex-direction:column; gap:16px; padding:24px 16px; border-right:1px solid #e1ece7; color:#7d9a8d; font-size:11px; }.side-line strong { color:#214e3a; margin-bottom:4px; }.timeline-card { padding:30px 24px; }.wave { display:flex; align-items:center; gap:3px; height:34px; margin-bottom:12px; }.wave b { width:5px; border-radius:4px; background:#67a98a; opacity:.8; }.wave b:nth-child(3n){height:24px}.wave b:nth-child(3n+1){height:13px}.wave b:nth-child(3n+2){height:30px}.tiny-label { color:#83a092; font-size:10px; margin:0 0 20px; }.timeline-card h3 { margin:0 0 24px; color:#173b2b; font-size:21px; letter-spacing:-.04em; line-height:1.35; }.caption-line { padding:10px 0; border-top:1px solid #deebe5; color:#2f6750; font-size:11px; }.caption-line span { display:inline-block; width:24px; color:#ca6b72; font-size:9px; font-weight:800; }.caption-line.muted { color:#9aafa5; }.scribble { position:absolute; z-index:3; left:0; top:10px; color:#c96a70; font-family:"Kaiti SC",cursive; font-size:25px; font-weight:700; line-height:1.2; transform:rotate(-12deg); }.hero-doodle { position:absolute; z-index:4; bottom:-2px; left:2%; width:230px; height:166px; border-radius:18px; object-fit:cover; object-position:center; mix-blend-mode:multiply; box-shadow:8px 12px 0 rgba(202,225,214,.9); transform:rotate(-7deg); }
.signal { display:flex; justify-content:space-between; padding:20px 0 26px; border-top:1px solid #c7ded3; border-bottom:1px solid #c7ded3; color:#6d8d7e; font-size:11px; letter-spacing:.03em; }.signal span:not(:first-child)::before { content:"•"; margin-right:10px; color:#df7776; }
.workflow { display:grid; grid-template-columns:34% 66%; gap:50px; padding:116px 0 108px; }.workflow h2,.feature-band h2,.download h2 { margin:0; color:#123c2b; font-size:clamp(34px,4vw,52px); line-height:1.08; letter-spacing:-.065em; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.steps article { border-top:2px solid #a4c9b7; padding-top:16px; }.steps b { color:#df7776; font-size:11px; }.steps h3 { margin:34px 0 10px; color:#184d36; font-size:19px; }.steps p { margin:0; color:#648274; font-size:13px; line-height:1.75; }
.feature-band { display:grid; grid-template-columns:45% 55%; gap:70px; padding:78px 0; border-top:1px solid #c7ded3; }.feature-band > div:first-child > p:last-child { max-width:400px; margin-top:25px; color:#648274; font-size:14px; line-height:1.8; }.feature-list { border-top:1px solid #9dc2b0; }.feature-list div { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid #c7ded3; }.feature-list strong { color:#194b36; font-size:16px; }.feature-list span { color:#709184; font-size:12px; }
.download { padding:54px 0 105px; }.download-card { display:flex; align-items:center; gap:44px; min-height:270px; padding:42px 64px; border-radius:22px; background:#cfe6dc; overflow:hidden; }.download-card img { width:190px; height:190px; border-radius:42px; box-shadow:10px 16px 0 rgba(89,142,119,.22); }.download-card p:not(.home-kicker) { color:#527464; font-size:14px; }.download-card .home-button { margin-top:18px; }
.home-footer { display:flex; justify-content:space-between; padding:22px 0 30px; border-top:1px solid #c7ded3; color:#719083; font-size:11px; }.home-footer div { display:flex; gap:22px; }
@media (max-width:800px) { .home-nav { height:auto; padding:20px 0; flex-wrap:wrap; gap:18px; }.home-links { order:3; width:100%; margin:0; justify-content:space-between; gap:10px; }.hero { grid-template-columns:1fr; padding-top:54px; }.hero-art { min-height:410px; margin-top:12px; }.art-paper { right:0; }.workflow,.feature-band { grid-template-columns:1fr; gap:38px; padding:80px 0; }.steps { gap:16px; }.download-card { padding:30px; gap:24px; }.download-card img { width:130px; height:130px; border-radius:28px; } }
@media (max-width:560px) { .home-wrap,.home-nav { width:min(100% - 32px,1180px); }.nav-cta { margin-left:auto; }.hero h1 { font-size:48px; }.hero-lede { font-size:14px; }.hero-art { min-height:325px; }.art-paper { height:270px; }.window-body { grid-template-columns:76px 1fr; }.side-line { padding:16px 9px; gap:11px; font-size:9px; }.timeline-card { padding:18px 13px; }.timeline-card h3 { font-size:15px; }.hero-doodle { width:145px; height:105px; }.signal { flex-direction:column; gap:10px; }.signal span:not(:first-child)::before { display:none; }.steps { grid-template-columns:1fr; }.download-card { flex-direction:column; align-items:flex-start; }.download-card img { width:100px; height:100px; }.home-footer { flex-direction:column; gap:15px; }.home-footer div { gap:14px; } }

/* Motion-led landing direction: generous whitespace, bold type, small playful movement. */
.home { background:#fff; color:#101c17; overflow-x:hidden; }
.home::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(circle at 86% 12%,#d9f3e8 0 8%,transparent 24%),radial-gradient(circle at 12% 61%,#f3faf6 0 10%,transparent 28%); }
.home-wrap,.home-nav { width:min(1240px,calc(100% - 64px)); }
.home-nav { height:94px; }
.home-brand img { width:34px;height:34px;border-radius:10px; }.home-brand span { font-size:14px; }
.home-links { color:#61766c; }.nav-cta { background:#06c755; border-radius:99px; padding-inline:20px; box-shadow:none; }.nav-cta:hover { background:#05b84f; }
.hero { min-height:680px; grid-template-columns:48% 52%; padding:40px 0 76px; gap:0; }
.home-kicker { color:#06a74a; letter-spacing:.08em; }.home-kicker i { background:#06c755; }
.hero h1 { color:#111b17; font-size:clamp(58px,7.7vw,106px); letter-spacing:-.095em; line-height:.95; }.hero h1 em { color:#06b653; }
.hero-lede { max-width:420px; margin-top:30px; color:#687e73; font-size:16px; line-height:1.75; }.hero-actions { margin-top:32px; }.home-button.primary { background:#111b17; border-radius:99px; box-shadow:none; padding-inline:24px; }.home-button.primary:hover { background:#06c755; transform:translateY(-2px); }.text-link { color:#1b3328; border:0; }
.hero-art { min-height:560px; }.art-paper { top:42px; right:2%; width:min(590px,100%); height:420px; border:0; border-radius:28px; background:#f0faf5; box-shadow:0 28px 70px rgba(53,113,81,.18); transform:rotate(3deg); animation:floatCard 6s ease-in-out infinite; }.hero-doodle { bottom:2px; left:0; width:250px; height:180px; border-radius:24px; box-shadow:10px 14px 0 #e1f5ea; transform:rotate(-8deg); animation:floatDoodle 5s ease-in-out 1s infinite; }.scribble { left:-15px; top:20px; color:#06b653; font-size:30px; }
.signal { max-width:1240px; padding:22px 0 28px; border-color:#dce9e2; color:#8aa096; }.signal span:not(:first-child)::before { color:#06c755; }
.workflow { padding:150px 0 130px; grid-template-columns:37% 63%; }.workflow h2,.feature-band h2,.download h2 { color:#111b17; font-size:clamp(42px,5.3vw,74px); letter-spacing:-.09em; }.steps article { border-top:1px solid #cbe5d7; }.steps h3 { color:#111b17; font-size:22px; }.steps p { color:#789086; }
.feature-band { padding:110px 0; border-color:#dce9e2; }.feature-list { border-color:#bde2cb; }.feature-list div { border-color:#dce9e2; }.feature-list strong { color:#111b17; }.feature-list span { color:#82968c; }
.download { padding:75px 0 130px; }.download-card { position:relative; min-height:330px; padding:54px 72px; border-radius:32px; background:#06c755; color:#fff; overflow:hidden; }.download-card::after { content:"字幕"; position:absolute; right:-15px; bottom:-80px; color:rgba(255,255,255,.17); font-family:"SourceHanSerifCN-Heavy","Songti SC",serif; font-size:280px; line-height:1; transform:rotate(-12deg); }.download-card > * { position:relative; z-index:1; }.download-card img { width:170px;height:170px;border-radius:40px; box-shadow:12px 18px 0 rgba(4,122,53,.25); }.download-card .home-kicker { color:#bdf7d2; }.download-card .home-kicker i { background:#fff; }.download-card h2 { color:#fff; }.download-card p:not(.home-kicker) { color:#d7f8e2; }.download-card .home-button.primary { background:#111b17; color:#fff; }
.home-footer { border-color:#dce9e2; }
.hero-doodle { border-radius:0; mix-blend-mode:normal; box-shadow:12px 15px 0 #d2e7d9; object-position:center bottom; }
@keyframes floatCard { 0%,100% { transform:rotate(3deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-13px); } }
@keyframes floatDoodle { 0%,100% { transform:rotate(-8deg) translateY(0); } 50% { transform:rotate(-5deg) translateY(-10px); } }
@media (max-width:800px) { .home-wrap,.home-nav { width:calc(100% - 40px); }.hero { min-height:0; padding:65px 0 90px; }.hero h1 { font-size:clamp(54px,14vw,84px); }.hero-art { min-height:430px; margin-top:40px; }.art-paper { top:24px; right:0; }.workflow { padding-top:95px; }.download-card { padding:42px 34px; } }
@media (max-width:560px) { .home-wrap,.home-nav { width:calc(100% - 32px); }.hero-art { min-height:325px; }.art-paper { height:270px; }.hero-doodle { width:145px;height:105px; }.download-card { border-radius:24px; padding:34px 25px; }.download-card img { width:100px;height:100px; }.download-card::after { font-size:170px; bottom:-35px; } }