/* 统一视觉变量：在这里修改全站品牌颜色。 */
:root { --paper:#faf8f2; --white:#fffefa; --green:#315b45; --green-dark:#244534; --ink:#2c3930; --muted:#6e766d; --line:#e3e7dc; --pale:#edf2e7; --gold:#eddfbd; --radius:16px; --shadow:0 6px 24px #263e2d06; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif; font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
body.modal-open { overflow:hidden; }
button,input { font:inherit; } button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; } button { cursor:pointer; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; }
button { color:inherit; } h1,h2,h3,p,figure { margin:0; } h1,h2 { font-family:"Songti SC","Noto Serif CJK SC","SimSun",serif; font-weight:700; }
h1 { font-size:clamp(32px,3.3vw,46px); line-height:1.5; letter-spacing:.04em; } h2 { font-size:30px; line-height:1.45; letter-spacing:.035em; } h3 { font-size:18px; line-height:1.55; } p + p { margin-top:12px; }
:focus-visible { outline:3px solid #b87933; outline-offset:5px; }
[hidden] { display:none!important; } .container { width:min(1220px,calc(100% - 64px)); margin-inline:auto; } .muted { color:var(--muted); } .eyebrow { color:var(--green); font-size:14px; letter-spacing:.17em; margin-bottom:12px; }
.skip-link { position:fixed; top:-80px; z-index:100; background:white; padding:10px; } .skip-link:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:20; background:#fffefaf5; border-bottom:1px solid #e8e9df; backdrop-filter:blur(12px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:26px; min-height:93px; }
.brand { width:205px; flex-shrink:0; } .brand img { width:100%; object-fit:contain; }
#site-nav { display:flex; gap:23px; align-items:center; } #site-nav a { font-size:14px; white-space:nowrap; position:relative; padding:28px 0; } #site-nav a:hover,#site-nav a.active { color:var(--green); } #site-nav a.active::after { content:""; position:absolute; height:2px; background:var(--green); bottom:19px; left:20%; right:20%; }
.menu-toggle { display:none; background:transparent; border:1px solid var(--line); border-radius:8px; padding:8px 14px; }
.hero { background:linear-gradient(115deg,#f5f3e9 0%,#faf8f2 52%,#edf0e5 100%); padding:54px 0 58px; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:35px; align-items:center; }.hero-copy { padding:16px 0; }.hero-subtitle { font-size:22px; color:#4e624e; line-height:1.8; margin-top:16px; } .hero-description { margin-top:18px; font-size:15px; }
.button-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }.button { border:1px solid var(--green); display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:11px 22px; border-radius:8px; background:var(--green); color:white; font-weight:500; transition:background .2s,transform .2s; }.button:hover { background:var(--green-dark); transform:translateY(-2px); }.button:active { transform:translateY(0); }.button.secondary { background:transparent; color:var(--green); }.button.secondary:hover { background:#e6edde; }.button.small { padding:8px 12px; font-size:14px; }
.hero-values { display:flex; flex-wrap:wrap; gap:18px; font-size:13px; color:#65735e; margin-top:30px; }.hero-values span::before { content:"✓"; margin-right:5px; }
.hero-visual { min-width:0; position:relative; aspect-ratio:1.22; border-radius:90px 16px 16px 16px; overflow:hidden; background:linear-gradient(130deg,#f2e3bf,#cfddbd); box-shadow:var(--shadow); }.hero-visual img { width:100%; height:100%; object-fit:cover; }.hero-visual figcaption { position:absolute; bottom:20px; left:24px; right:24px; padding:12px 18px; border:1px solid #ffffff80; border-radius:8px; background:#fffdf0c9; color:#435d43; font-family:"SimSun",serif; font-size:16px; text-align:center; }
.purchase { background:#f3ead5; border:1px solid #e8dcc0; border-radius:var(--radius); padding:28px 30px; margin-top:30px; display:grid; grid-template-columns:280px 1fr; gap:30px; align-items:center; }.purchase h2 { font-size:25px; }.purchase-heading>p:last-child { font-size:14px; color:#817657; margin-top:8px; }.purchase .eyebrow { font-size:12px; margin-bottom:5px; }.purchase-channels { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.channel { padding:15px 14px; background:#fffcf2; border:1px solid #e9dfcc; border-radius:12px; }.channel-heading { display:flex; align-items:center; gap:8px; margin-bottom:7px; }.platform-badge { font-size:13px; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#d75b55; color:white; }.platform-badge.douyin { background:#333b37; }.platform-badge.xianyu { background:#f4db70; color:#60562f; }.channel h3 { font-size:16px; }.channel p { font-size:13px; }.channel small { font-size:12px; color:var(--muted); display:block; min-height:24px; }.channel button { margin-top:8px; font-size:13px; border:0; padding:0; background:transparent; color:var(--green); text-align:left; }
.section { padding-top:64px; padding-bottom:64px; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }.section-heading .eyebrow { margin-bottom:5px; }.section-heading>p { font-size:14px; }.quick-section { padding-top:48px; padding-bottom:48px; }.quick-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }.quick-card { border:1px solid var(--line); background:var(--white); border-radius:14px; padding:22px 18px 14px; position:relative; transition:transform .2s,box-shadow .2s; }.quick-card:hover,.resource-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px #30452c0b; }.quick-card h3 { font-size:16px; margin-top:13px; }.quick-card p { font-size:13px; line-height:1.7; color:var(--muted); margin-top:5px; }.quick-card>span:last-child { display:block; text-align:right; color:#607755; margin-top:9px; }.icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-size:25px; }.mint { background:#e7eedf; color:#56794a; }.butter { background:#f4ebcd; color:#9b813e; }.blue { background:#e2ecee; color:#5f8292; }.peach { background:#f5e5d8; color:#a9794f; }.pink { background:#f1e2df; color:#b07976; }
.resource-section { background:#f0f3ea; border-block:1px solid #e5e9dd; }.resource-toolbar { display:flex; justify-content:space-between; gap:20px; align-items:center; }.search { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:9px; border:1px solid #d7dfcf; background:var(--white); flex:1; max-width:620px; }.search>span { font-size:26px; line-height:1; color:var(--green); }.search input { width:100%; min-width:0; border:0; background:transparent; padding:3px 0; font-size:14px; color:var(--ink); }.search kbd { font:12px inherit; color:#929a8c; white-space:nowrap; }.filters { display:flex; gap:6px; flex-wrap:wrap; }.filters button,.category-filters button { border:1px solid transparent; background:transparent; border-radius:7px; padding:8px 14px; font-size:14px; }.filters button[aria-pressed="true"] { background:var(--green); color:white; }.filters button:hover,.category-filters button:hover { border-color:#859b79; }.category-filters { display:flex; flex-wrap:wrap; gap:4px; margin-top:20px; padding-bottom:20px; border-bottom:1px solid #dce3d4; }.category-filters button { padding:5px 10px; font-size:13px; color:#637259; }.category-filters button[aria-pressed="true"] { background:#dfe8d6; color:var(--green-dark); }.resource-subheading { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }.resource-subheading p,.catalog-note { font-size:13px; color:var(--muted); }.catalog-note { margin:5px 0 18px; }.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.resource-card { background:var(--white); border:1px solid #e0e6d8; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }.resource-cover { min-height:156px; padding:22px 25px; position:relative; display:flex; flex-direction:column; justify-content:center; background:#e2ead9; color:#486543; overflow:hidden; }.resource-cover::after { content:""; position:absolute; right:-25px; top:28px; width:145px; height:145px; border-radius:50%; border:26px solid #ffffff33; }.resource-cover small { font-size:11px; letter-spacing:.18em; margin-bottom:10px; }.resource-cover strong { font-family:"SimSun",serif; font-size:24px; font-weight:400; letter-spacing:.1em; position:relative; z-index:1; }.resource-cover .cover-line { width:34px; height:2px; background:currentColor; margin-top:15px; opacity:.4; }.resource-cover[data-tone="sand"] { background:#eee3cf; color:#8b714b; }.resource-cover[data-tone="blue"] { background:#e1e9e7; color:#4d7373; }.resource-cover[data-tone="rose"] { background:#efe0d9; color:#9a6f5a; }.resource-cover[data-tone="sage"] { background:#dce4d7; color:#577450; }.resource-cover[data-tone="gold"] { background:#eee7c9; color:#8b803b; }.resource-cover img { width:100%; height:160px; object-fit:cover; }.resource-body { padding:20px 22px; display:flex; flex:1; flex-direction:column; }.resource-meta { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:#75806d; margin-bottom:10px; align-items:center; }.badge { display:inline-block; padding:2px 8px; border-radius:4px; background:#eaf0e3; color:#547149; font-size:12px; }.badge.physical { background:#f5eacf; color:#8e7435; }.resource-body h3 { font-size:18px; }.resource-body>p { color:var(--muted); font-size:14px; margin-top:9px; }.resource-body .audience { font-size:12px; margin-top:12px; }.resource-body button { margin-top:18px; align-self:stretch; background:transparent; border:1px solid #cddbc4; padding:8px; border-radius:7px; color:var(--green); font-size:14px; }.resource-body button:hover { background:var(--pale); }.empty-state { text-align:center; padding:45px 16px; }.empty-state p { margin:12px 0 20px; }
.section-label { display:inline-block; border:1px solid #dbe3d2; border-radius:6px; color:#6e7e61; font-size:13px; padding:5px 12px; }.section-intro { color:#617059; max-width:850px; }.section-intro+.muted { font-size:14px; margin-top:6px; }.test-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:26px; }.test-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; }.task-diagram { height:91px; display:flex; gap:7px; align-items:center; justify-content:center; border-radius:9px; margin-bottom:16px; background:#f2f3e9; font-size:26px; color:#59734e; letter-spacing:2px; }.task-diagram span { display:inline-grid; place-items:center; }.task-diagram .mini-card { background:white; width:30px; height:41px; border:1px solid #d8dfd0; border-radius:5px; font-size:21px; }.test-card h3 { font-size:17px; min-height:54px; }.test-card>p { color:var(--muted); font-size:13px; margin-top:7px; }.test-card .status { font-size:12px; color:#957747; margin-bottom:16px; }.test-card .button { margin-top:auto; }.text-button { background:none; border:0; padding:9px 0 0; font-size:13px; color:#647a56; }.disclaimer { margin-top:24px; padding:12px 18px; background:#f0f1e7; border-radius:8px; color:#75806c; font-size:12px; }
.assessment-section { background:#eef1e7; }.assessment-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:24px; }.assessment-grid div { background:#fffdf6; border:1px solid var(--line); padding:20px 10px; border-radius:10px; text-align:center; font-size:14px; }.assessment-grid div::after { content:"即将上线"; display:block; font-size:12px; color:#939a89; margin-top:5px; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.service-grid article { border:1px solid var(--line); border-radius:var(--radius); background:var(--white); padding:25px; }.small-number { color:#a3b291; font-family:Georgia,serif; font-size:28px; }.service-grid h3 { margin:7px 0 12px; }.service-grid p { color:var(--muted); font-size:14px; }.counseling { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; background:#e8eedf; padding:36px 42px; border:1px solid #dce5d0; border-radius:var(--radius); align-items:center; }.counseling p { margin-top:15px; }.counseling .button { margin-top:22px; }.consult-steps { padding:0; margin:25px 0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; counter-reset:steps; }.consult-steps li { font-size:14px; }.consult-steps li::before { counter-increment:steps; content:counter(steps,decimal-leading-zero); display:block; color:#6e895a; font:23px Georgia,serif; margin-bottom:8px; }.consult-steps li:not(:last-child)::after { content:" →"; color:#91a181; margin:0 4px; }.counseling .muted { font-size:14px; }
.about-grid { display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:80px; }.about-brand { background:radial-gradient(ellipse,#eef0e0,transparent 67%); padding:24px; }.about-brand img { width:250px; margin:auto; }.about-lead { font-family:"SimSun",serif; font-size:22px; color:#5b7252; margin:20px 0; }.text-link { display:inline-block; margin-top:18px; color:var(--green); border-bottom:1px solid #a6b794; }
.contact-section { background:#eff1e8; }.contact-layout { display:grid; grid-template-columns:1fr 170px; gap:44px; }.contact-details { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 32px; margin:0; }.contact-details dt { font-size:13px; color:#76826b; }.contact-details dd { margin:4px 0 0; font-size:14px; }.qr-placeholder { min-height:155px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #b7c3a8; border-radius:10px; color:#818f73; background:#f7f8f0; }.qr-placeholder span { font-size:40px; line-height:1; }.qr-placeholder p { font-size:13px; margin-top:12px; }
footer { padding:30px 0; border-top:1px solid var(--line); background:#fffdf7; }.footer-inner { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:30px; align-items:center; }.footer-inner img { width:162px; }.footer-inner p { font-size:12px; color:#839079; margin-top:9px; }.footer-inner>p { text-align:right; }.footer-inner nav { display:grid; grid-template-columns:repeat(4,1fr); gap:8px 16px; font-size:12px; }
dialog { border:1px solid var(--line); border-radius:18px; padding:32px; width:min(580px,calc(100% - 32px)); max-height:85vh; max-height:85dvh; overflow:auto; color:var(--ink); background:var(--white); box-shadow:0 20px 90px #132d2733; }dialog::backdrop { background:#1b2d2566; backdrop-filter:blur(4px); }.dialog-close { position:absolute; right:12px; top:10px; width:36px; height:36px; border:0; border-radius:50%; background:#f0f2e8; font-size:26px; z-index:1; }.dialog-title { padding-right:25px; font-size:25px; margin:14px 0; }.dialog-cover { border-radius:12px; margin-top:20px; }.dialog-details { margin:18px 0; }.dialog-details dt { font-size:13px; color:var(--muted); margin-top:12px; }.dialog-details dd { margin:2px 0 0; }.copy-value { padding:14px; background:var(--pale); border-radius:9px; user-select:all; margin:18px 0; }.dialog-note { color:var(--muted); font-size:14px; margin:14px 0; }.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:50; padding:12px 20px; border-radius:10px; background:var(--green-dark); color:white; max-width:calc(100% - 32px); box-shadow:var(--shadow); font-size:14px; }
.test-page { min-height:100vh; }.test-page .test-header { padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; }.test-header img { width:185px; }.test-main { max-width:850px; padding:55px 0 80px; }.test-main h1 { margin:15px 0; font-size:36px; }.test-main .task-diagram { max-width:380px; height:140px; margin-top:30px; }.test-information { margin-top:30px; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--white); }.test-information h2 { font-size:23px; margin-bottom:14px; }.test-information p { color:var(--muted); }.planned-flow { display:flex; flex-wrap:wrap; gap:12px; padding:0; list-style:none; margin-top:20px; }.planned-flow li { padding:7px 12px; background:var(--pale); border-radius:6px; font-size:14px; }.test-main .button-row { margin-bottom:24px; }.unavailable { display:inline-block; background:#e8e8dd; border:1px solid #d5dac9; color:#777e6b; padding:11px 22px; border-radius:8px; cursor:not-allowed; }
@media(min-width:1500px) { .hero { padding-top:68px; padding-bottom:68px; } }
@media(max-width:1120px) { #site-nav { gap:13px; } .brand { width:175px; } #site-nav a { font-size:13px; }.purchase { grid-template-columns:1fr; gap:18px; }.purchase-heading { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:18px; }.purchase-heading .eyebrow { display:none; }.quick-grid { grid-template-columns:repeat(3,1fr); }.test-grid { grid-template-columns:repeat(3,1fr); }.assessment-grid { grid-template-columns:repeat(4,1fr); }.footer-inner { grid-template-columns:1fr 1.4fr; }.footer-inner>p { grid-column:1/-1; text-align:left; margin:0; } }
@media(max-width:900px) { .header-inner { min-height:78px; }.menu-toggle { display:block; } #site-nav { display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); padding:15px 32px; border-bottom:1px solid var(--line); grid-template-columns:repeat(2,1fr); gap:0; box-shadow:var(--shadow); }#site-nav.open { display:grid; }#site-nav a { padding:10px; font-size:15px; }#site-nav a.active::after { display:none; }.hero-grid { gap:24px; }.hero-subtitle { font-size:18px; }.hero-description { font-size:14px; }.hero-values { gap:8px; }.hero-visual { aspect-ratio:.85; border-top-left-radius:55px; }.hero-visual figcaption { font-size:14px; left:12px; right:12px; }.resource-grid { grid-template-columns:repeat(2,1fr); }.resource-toolbar { align-items:stretch; flex-direction:column; gap:12px; }.search { max-width:none; }.service-grid { grid-template-columns:repeat(2,1fr); }.counseling { gap:28px; }.about-grid { gap:30px; }.contact-details { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .container { width:calc(100% - 36px); }html { scroll-padding-top:90px; }.header-inner { min-height:74px; }.brand { width:157px; }.hero { padding:25px 0 30px; }.hero-grid { grid-template-columns:1fr; }.hero-copy { padding:10px 0; }.hero h1 { font-size:31px; }.hero-subtitle { font-size:20px; }.hero-description { font-size:14px; }.desktop-break { display:none; }.hero-visual { aspect-ratio:1.6; border-radius:40px 12px 12px 12px; }.hero-visual figcaption { bottom:12px; padding:7px; }.hero-values { font-size:12px; gap:12px; margin-top:20px; }.button-row { margin-top:22px; gap:10px; }.button { padding:10px 16px; font-size:14px; }.purchase { margin-top:20px; padding:22px 18px; }.purchase h2 { font-size:24px; }.purchase-channels { grid-template-columns:1fr; gap:10px; }.channel { display:grid; grid-template-columns:1fr auto; padding:12px; column-gap:10px; }.channel-heading { grid-row:1/3; align-self:center; margin:0; }.channel h3 { font-size:14px; }.channel>p,.channel small,.channel button { grid-column:2; font-size:12px; }.channel button { margin-top:4px; }.section { padding:42px 0; }.section-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:20px; }h2 { font-size:26px; }.quick-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.quick-card { padding:16px; }.quick-card>span:last-child { margin:0; }.resource-grid { grid-template-columns:1fr; gap:18px; }.resource-cover { min-height:145px; }.category-filters { gap:3px; }.category-filters button { font-size:12px; padding:5px 7px; }.search { gap:8px; }.search input { font-size:13px; }.search kbd { display:none; }.filters button { padding:7px 12px; }.test-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.test-card { padding:13px; }.test-card h3 { font-size:15px; }.test-card .button { padding:8px 5px; font-size:12px; }.task-diagram { font-size:22px; letter-spacing:0; gap:4px; }.task-diagram .mini-card { width:23px; }.assessment-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.service-grid { grid-template-columns:1fr; gap:12px; }.service-grid article { padding:20px; }.counseling { padding:26px 20px; grid-template-columns:1fr; gap:28px; }.about-grid { grid-template-columns:1fr; gap:22px; }.about-brand img { width:185px; }.about-brand { padding:0; }.contact-layout { grid-template-columns:1fr; gap:25px; }.contact-details { gap:20px; }.qr-placeholder { width:145px; min-height:145px; }.footer-inner { grid-template-columns:1fr; gap:20px; }.footer-inner nav { grid-template-columns:repeat(3,1fr); }.footer-inner>p { grid-column:auto; }.test-header img { width:150px; }.test-header>a { font-size:13px; }.test-main { padding:30px 0; }.test-main h1 { font-size:29px; }.test-information { padding:20px; }dialog { padding:25px 20px; }.dialog-title { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { transition:none!important; animation:none!important; } }