:root { --bg:#f5f7f2; --panel:#fff; --ink:#1d2a22; --muted:#657268; --line:#dce5da; --green:#2f7d4a; --green-dark:#1f5f37; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; line-height:1.8; }
.site-header { height:76px; padding:0 max(24px,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; line-height:1.25; }.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:8px; font-weight:800; }.brand strong,.brand small { display:block; }.brand small,.updated { color:var(--muted); font-size:12px; }.back-link,a { color:var(--green-dark); }.header-actions { display:flex; align-items:center; gap:18px; }.back-link,.demo-link { font-size:14px; font-weight:700; text-decoration:none; }.demo-link { padding:8px 14px; border-radius:7px; color:#fff; background:var(--green); }
main { width:min(920px,calc(100% - 40px)); margin:0 auto; padding:60px 0 48px; }.hero { max-width:760px; }.eyebrow { margin:0 0 8px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.12em; }.hero h1 { margin:0 0 16px; font-size:clamp(30px,5vw,44px); letter-spacing:-.04em; }.hero p { margin:0 0 12px; color:var(--muted); }
.notice { margin:36px 0 28px; padding:18px 20px; display:flex; gap:14px; border:1px solid #cfe0ce; border-radius:10px; background:#edf6ed; font-size:14px; }.notice strong { color:var(--green-dark); white-space:nowrap; }
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.content-grid article { padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(28,48,34,.04); }.content-grid h2 { margin:0 0 12px; font-size:18px; }.content-grid p { margin:0 0 12px; color:#4e5d51; font-size:14px; }.content-grid p:last-child { margin-bottom:0; } footer { padding:24px; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:12px; }
@media (max-width:680px) { .site-header { padding:0 20px; }.header-actions { flex-direction:column; align-items:flex-end; gap:2px; }.back-link,.demo-link { font-size:12px; }.demo-link { padding:4px 9px; }.content-grid { grid-template-columns:1fr; }.notice { display:block; }.notice strong { display:block; margin-bottom:4px; } main { padding-top:40px; } }