:root { --ink:#14201c; --muted:#64706b; --line:#dfe6e2; --paper:#f7f8f4; --green:#1d6b52; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; height:76px; padding:0 max(24px,5vw); border-bottom:1px solid #14201c17; background:#f7f8f4eb; backdrop-filter:blur(16px); }
.brand { display:flex; align-items:baseline; gap:8px; font-size:24px; font-weight:800; }
.brand small { color:var(--green); font-size:9px; letter-spacing:.16em; }
nav { display:flex; gap:30px; font-size:14px; }
nav a.active, nav a:hover { color:var(--green); }
.header-action, .button.primary { background:var(--ink); color:#fff; }
.header-action { padding:10px 16px; border-radius:999px; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:5vw; min-height:660px; padding:90px max(24px,7vw); align-items:center; }
.kicker { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.17em; }
.hero h1 { margin:18px 0 26px; font-size:clamp(48px,6vw,86px); line-height:1.04; letter-spacing:-.055em; }
.hero p { max-width:620px; color:var(--muted); font-size:18px; line-height:1.8; }
.hero-actions { display:flex; gap:10px; margin-top:34px; }
.button { padding:14px 20px; border:1px solid var(--ink); border-radius:999px; }
.hero-art { position:relative; height:500px; overflow:hidden; border-radius:48% 48% 46% 54%; background:linear-gradient(155deg,#dff36c 0 45%,#8ec6b2 45% 62%,#1d6b52 62%); }
.sun { position:absolute; right:60px; top:50px; width:130px; height:130px; border-radius:50%; background:#fff0c9; }
.route { position:absolute; border:3px solid; border-color:#fff transparent transparent; border-radius:50%; transform:rotate(-18deg); }
.route-a { left:-60px; bottom:35px; width:520px; height:260px; }
.route-b { left:30px; bottom:95px; width:400px; height:190px; }
.pin { position:absolute; padding:8px 12px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; }
.pin-a { left:18%; top:28%; } .pin-b { right:18%; top:48%; } .pin-c { left:42%; bottom:16%; }
.section { padding:90px max(24px,7vw); }
.section-head h2 { margin:14px 0 32px; font-size:clamp(34px,4vw,58px); letter-spacing:-.04em; }
.section-head.row { display:flex; justify-content:space-between; align-items:end; }
.feature-grid, .article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature-grid article, .article-card { min-height:290px; padding:28px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.feature-grid b { color:var(--green); font-size:12px; }
.feature-grid h3 { margin-top:80px; font-size:24px; }
.feature-grid p, .article-card p { color:var(--muted); line-height:1.7; }
.latest { background:#eef1eb; }
.article-card { display:flex; flex-direction:column; }
.article-card h3 { margin:28px 0 8px; font-size:26px; }
.article-card small { margin-top:auto; }
.tone-1 { background:#20352e; color:#fff; } .tone-1 p { color:#c8d1cd; }
.tone-2 { background:#e5f271; } .tone-3 { background:#ffc5ae; }
.manifesto { display:grid; min-height:520px; padding:40px; place-items:center; text-align:center; background:var(--green); color:#fff; }
.manifesto p { font-size:clamp(40px,6vw,78px); line-height:1.2; letter-spacing:-.05em; }
footer { display:grid; grid-template-columns:1fr 2fr auto; align-items:center; padding:42px max(24px,7vw); border-top:1px solid var(--line); color:var(--muted); }
.library { padding:70px max(24px,7vw) 110px; }
.library-head { text-align:center; }
.library-head h1 { margin:16px 0; font-size:clamp(50px,7vw,86px); }
.library-head p { color:var(--muted); }
.search { display:flex; max-width:680px; margin:34px auto 70px; padding:8px 8px 8px 18px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.search input { min-width:0; flex:1; padding:10px; border:0; outline:none; font:inherit; }
.search button, .empty button { padding:10px 20px; border:0; border-radius:999px; background:var(--ink); color:#fff; }
.library-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:50px; }
.category { display:flex; width:100%; justify-content:space-between; padding:12px 14px; border:0; border-radius:9px; background:transparent; text-align:left; cursor:pointer; }
.category.active { background:var(--ink); color:#fff; }
.list-row { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:20px; padding:28px 0; border-top:1px solid var(--line); }
.list-row h2 { margin:8px 0; font-size:28px; }
.list-row p, .list-row small { color:var(--muted); line-height:1.6; }
.article-detail { max-width:850px; margin:0 auto; padding:90px 28px 130px; }
.article-detail header { padding-bottom:52px; border-bottom:1px solid var(--line); text-align:center; }
.article-detail h1 { margin:18px 0; font-size:clamp(42px,6vw,72px); line-height:1.12; letter-spacing:-.045em; }
.article-detail header p, .article-detail header small { color:var(--muted); line-height:1.7; }
.prose { padding-top:48px; font-family:Georgia,"Noto Serif SC",serif; font-size:18px; line-height:1.9; }
.prose h2, .prose h3 { font-family:Inter,"PingFang SC",sans-serif; }
.prose [data-metgo-media] { display:block; width:100%; max-width:100%; min-height:120px; margin:28px auto; border-radius:12px; background:#eef1eb; }
.prose [data-metgo-media] img { display:block; width:100%; max-width:100%; height:auto; border-radius:inherit; }
.empty { grid-column:1/-1; padding:50px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; }
.skeleton { min-height:200px; border-radius:16px; background:linear-gradient(90deg,#e8ece8,#f5f7f4,#e8ece8); background-size:200% 100%; animation:shine 1.4s infinite; }
.hero-skeleton { min-height:480px; }
@keyframes shine { to { background-position:-200% 0; } }
@media (max-width:800px) {
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:60px; }
  .hero-art { height:380px; }
  .feature-grid, .article-grid, .library-layout { grid-template-columns:1fr; }
  .library-layout aside { display:flex; overflow-x:auto; }
  .category { width:auto; white-space:nowrap; }
  .list-row { grid-template-columns:1fr; }
  .section-head.row, footer { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
}