:root { --ink:#17211b; --cream:#f4f0e6; --paper:#fffdf7; --green:#184f3a; --lime:#d7ed6e; --orange:#f05b34; --muted:#6f756f; --line:#d8d4c8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans SC",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; padding:0 max(5vw,24px); display:flex; align-items:center; gap:42px; position:sticky; top:0; z-index:20; background:rgba(244,240,230,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(23,33,27,.13); }
.brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:-.04em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50% 50% 48% 43%; color:var(--cream); background:var(--green); font-family:"ZCOOL XiaoWei"; transform:rotate(-5deg); }
nav { display:flex; gap:30px; margin:auto; font-size:14px; font-weight:600; }
nav a:hover { color:var(--orange); }
.header-cta { font-size:13px; font-weight:700; border-bottom:1px solid; padding-bottom:4px; }
.menu-button { display:none; border:0; background:none; font-size:24px; }
.hero { min-height:690px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; max-width:1400px; margin:auto; padding:70px max(5vw,24px) 90px; overflow:hidden; }
.hero-copy { max-width:700px; z-index:2; }
.eyebrow,.section-kicker { text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:800; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--green); }
.eyebrow span { width:22px; border-top:2px solid var(--orange); }
h1 { font-family:"ZCOOL XiaoWei",serif; font-size:clamp(52px,6vw,88px); line-height:1.08; font-weight:400; margin:24px 0; letter-spacing:-.035em; }
h1 em { color:var(--orange); font-style:normal; position:relative; }
h1 em:after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='8'%3E%3Cpath d='M2 5 Q 45 0 90 4 T198 3' fill='none' stroke='%23f05b34' stroke-width='3'/%3E%3C/svg%3E") center/100% 100%; }
.hero-copy>p { font-size:18px; line-height:1.9; color:#576059; max-width:610px; }
.hero-actions { display:flex; align-items:center; gap:28px; margin:35px 0; }
.button { padding:15px 23px; border-radius:3px; font-weight:700; }
.button.primary { color:white; background:var(--green); box-shadow:5px 5px 0 var(--lime); }
.button:hover { transform:translateY(-2px); }
.text-link { font-size:14px; font-weight:700; border-bottom:1px solid; padding-bottom:4px; }
.trust-row { display:flex; gap:20px; color:var(--muted); font-size:12px; }
.hero-art { height:510px; position:relative; }
.center-sun { position:absolute; display:grid; place-content:center; text-align:center; width:210px; height:210px; top:145px; left:50%; transform:translateX(-50%) rotate(-5deg); border-radius:47% 53% 44% 56%; background:var(--lime); font-size:24px; line-height:.9; letter-spacing:.12em; box-shadow:inset 0 0 0 2px var(--ink); }
.center-sun strong { font-family:"ZCOOL XiaoWei"; font-size:80px; letter-spacing:-.12em; }
.orbit { position:absolute; border:1px dashed #8f968b; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg); }
.orbit-one { width:440px; height:315px; }.orbit-two { width:560px; height:440px; transform:translate(-50%,-50%) rotate(28deg); }
.book { position:absolute; background:var(--paper); border:2px solid var(--ink); padding:18px 14px; width:95px; height:125px; box-shadow:6px 7px 0 rgba(23,33,27,.18); display:flex; flex-direction:column; justify-content:space-between; }
.book b { font-size:28px; }.book small { font-weight:800; }.book-one { left:8%; top:55px; transform:rotate(-12deg); background:#f8b58d; }.book-two { right:1%; top:85px; transform:rotate(8deg); background:#b7d4ce; }.book-three { right:12%; bottom:15px; transform:rotate(-5deg); background:#f3e4ac; }
.spark { position:absolute; font-size:28px; color:var(--orange); }.s1{left:12%;bottom:80px}.s2{right:12%;top:20px}.s3{right:43%;bottom:10px}
.section { padding:110px max(5vw,24px); }
.section-heading { max-width:1240px; margin:0 auto 45px; display:flex; justify-content:space-between; align-items:end; gap:40px; }
.section-kicker { color:var(--orange); display:block; margin-bottom:16px; }
h2 { font-family:"ZCOOL XiaoWei"; font-size:clamp(38px,4.5vw,60px); font-weight:400; margin:0; line-height:1.15; }
.section-heading>p { max-width:420px; color:var(--muted); line-height:1.8; margin:0; }
.resources-section { background:var(--paper); }
.search-wrap { max-width:1240px; margin:0 auto 22px; border-bottom:2px solid var(--ink); display:flex; align-items:center; gap:12px; padding:9px 4px; }
.search-wrap span { font-size:28px; }.search-wrap input { flex:1; border:0; outline:0; background:none; font:inherit; font-size:17px; }.search-wrap kbd { border:1px solid var(--line); padding:4px 7px; border-radius:4px; color:var(--muted); }
.filters { max-width:1240px; margin:0 auto 38px; display:flex; flex-wrap:wrap; gap:9px; }
.filter { border:1px solid var(--line); background:transparent; padding:9px 15px; cursor:pointer; font-family:inherit; border-radius:50px; }.filter.active,.filter:hover { background:var(--ink); color:white; border-color:var(--ink); }
.resource-grid { max-width:1240px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resource-card { border:1px solid var(--line); background:#fff; padding:27px; display:flex; flex-direction:column; min-height:490px; transition:.2s ease; position:relative; }
.resource-card:hover { transform:translateY(-5px); box-shadow:8px 10px 0 var(--lime); border-color:var(--ink); }.resource-card.featured:after { content:"编辑精选"; position:absolute; right:-1px; top:-1px; padding:5px 9px; background:var(--orange); color:#fff; font-size:10px; font-weight:700; }
.card-top { display:flex; align-items:center; gap:11px; }.resource-icon { display:grid; place-items:center; width:44px; height:44px; background:var(--cream); border-radius:50%; font-weight:900; }.type-tag { font-size:11px; color:var(--muted); }
.resource-card h3 { font-size:21px; margin:20px 0 10px; }.summary { color:#626861; line-height:1.7; font-size:14px; min-height:72px; }
dl { margin:8px 0 17px; font-size:12px; }dl div { display:flex; border-top:1px dotted var(--line); padding:8px 0; }dt { color:var(--muted); width:48px; }dd { margin:0; flex:1; }.stars { color:var(--orange); letter-spacing:1px; }
.advice { background:var(--cream); padding:13px; margin-top:auto; }.advice b { font-size:11px; color:var(--green); }.advice p { margin:5px 0 0; font-size:12px; line-height:1.65; }.card-link { margin-top:18px; font-size:13px; font-weight:800; display:flex; justify-content:space-between; }
.empty-state { text-align:center; color:var(--muted); padding:50px; }
.roadmaps-section { background:var(--green); color:white; }.section-heading.light p { color:#bdc8c0; }.section-heading.light .section-kicker { color:var(--lime); }
.roadmap-grid { max-width:1240px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.roadmap-card { position:relative; border:1px solid #4b7665; padding:28px; min-height:390px; background:#1c5941; }.roadmap-card:hover { background:#22664b; }.roadmap-number { font-family:"ZCOOL XiaoWei"; font-size:60px; color:var(--lime); opacity:.5; }.roadmap-tag { position:absolute; top:28px; right:25px; border:1px solid #719282; border-radius:50px; padding:5px 10px; font-size:10px; }.roadmap-card h3 { font-size:22px; }.roadmap-card ol { list-style:none; padding:0; margin:28px 0; }.roadmap-card li { padding:9px 0; color:#d4ded7; font-size:13px; }.roadmap-card li span { display:inline-block; width:7px; height:7px; margin-right:10px; border:1px solid var(--lime); border-radius:50%; }.roadmap-card a { position:absolute; bottom:28px; left:28px; right:28px; display:flex; justify-content:space-between; color:var(--lime); font-size:13px; font-weight:700; }
.packs-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; max-width:1400px; margin:auto; }.packs-copy>p { color:var(--muted); line-height:1.9; max-width:540px; }.notice { margin-top:35px; background:#e6e0d2; border-left:3px solid var(--orange); padding:13px 16px; font-size:12px; line-height:1.7; }.pack-list { border-top:2px solid var(--ink); }.pack-row { display:grid; grid-template-columns:35px 58px 1fr auto; gap:13px; align-items:center; border-bottom:1px solid var(--line); padding:22px 5px; }.pack-row:hover { padding-left:13px; background:rgba(255,255,255,.5); }.pack-index { font-family:"ZCOOL XiaoWei"; color:var(--muted); }.file-badge { font-size:10px; font-weight:800; text-transform:uppercase; border:1px solid; padding:4px; text-align:center; }.pack-info { display:flex; flex-direction:column; gap:5px; }.pack-info small { color:var(--muted); }.download { color:var(--orange); font-size:12px; font-weight:800; }
.about { padding-top:20px; }.about-card { max-width:1240px; margin:auto; background:#f0b28d; padding:65px; position:relative; overflow:hidden; }.about-card:after { content:"✦"; position:absolute; right:6%; bottom:-50px; font-size:200px; color:rgba(255,255,255,.25); }.about-card p { max-width:780px; line-height:1.9; }.about-card a { font-weight:800; border-bottom:1px solid; }
footer { max-width:1240px; margin:0 auto; padding:55px 24px 70px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:30px; color:var(--muted); font-size:12px; }footer p { text-align:center; }footer small { text-align:right; }
@media (max-width:900px) { nav,.header-cta{display:none} nav.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--paper);padding:25px}.menu-button{display:block;margin-left:auto}.hero{grid-template-columns:1fr;padding-top:55px}.hero-art{height:400px}.resource-grid,.roadmap-grid{grid-template-columns:1fr 1fr}.packs-section{grid-template-columns:1fr;gap:45px}.section-heading{align-items:start;flex-direction:column}.trust-row{flex-wrap:wrap}footer{grid-template-columns:1fr;text-align:center}footer p,footer small{text-align:center}}
@media (max-width:600px) { .site-header{height:66px}.hero{min-height:auto;padding-bottom:50px}.hero-art{height:340px;transform:scale(.8);margin:-10px -60px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.section{padding:75px 20px}.resource-grid,.roadmap-grid{grid-template-columns:1fr}.resource-card{min-height:450px}.packs-section{padding-left:20px;padding-right:20px}.pack-row{grid-template-columns:28px 50px 1fr}.download{display:none}.about-card{padding:38px 25px}.trust-row{gap:9px}.search-wrap kbd{display:none}}