:root { --ink:#202827; --muted:#68716e; --paper:#f7f6f1; --panel:#fff; --line:#d9ddd5; --forest:#35645b; --coral:#c96952; --code:#1f2a29; font-family:Inter,"Noto Sans SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); line-height:1.7; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--forest); }
.site-header { border-bottom:1px solid var(--line); background:rgba(247,246,241,.96); }
.header-inner,.page-shell,.footer-inner { width:min(100% - 40px,1040px); margin:0 auto; }
.header-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:baseline; gap:10px; font-weight:700; letter-spacing:.02em; }
.brand-mark { color:var(--forest); font-family:Georgia,serif; font-size:22px; }.brand-note { color:var(--muted); font-size:12px; font-weight:500; }
.site-nav { display:flex; gap:20px; color:var(--muted); font-size:14px; }.site-nav a[aria-current="page"] { color:var(--forest); font-weight:700; }
.page-shell { padding:72px 0 88px; }.eyebrow { margin:0 0 14px; color:var(--forest); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:56px; align-items:end; padding-bottom:56px; border-bottom:1px solid var(--line); }
.hero h1,.article-title,.page-title { margin:0; font-family:Georgia,"Noto Serif SC",serif; font-weight:500; letter-spacing:0; line-height:1.18; }.hero h1 { max-width:720px; font-size:52px; }
.hero-copy { max-width:620px; margin:20px 0 0; color:var(--muted); font-size:17px; }.hero-aside { padding:20px; border-left:3px solid var(--coral); background:var(--panel); color:var(--muted); font-size:14px; }.hero-aside strong { display:block; margin-bottom:4px; color:var(--ink); }
.section { padding-top:56px; }.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:22px; }.section-heading h2 { margin:0; font-size:20px; }.section-heading span { color:var(--muted); font-size:13px; }
.post-list,.now-list { display:grid; border-top:1px solid var(--line); }.post-card { display:grid; grid-template-columns:128px minmax(0,1fr) auto; gap:26px; align-items:baseline; padding:25px 0; border-bottom:1px solid var(--line); }.post-card time,.post-meta { color:var(--muted); font:13px ui-monospace,SFMono-Regular,Consolas,monospace; }.post-card h3 { margin:0; font-size:20px; line-height:1.35; }.post-card p { grid-column:2/3; margin:7px 0 0; color:var(--muted); font-size:14px; }.post-arrow { color:var(--forest); font-size:20px; }
.notes-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.note { min-height:158px; padding:20px; border:1px solid var(--line); border-radius:6px; background:var(--panel); }.note h3 { margin:0 0 8px; font-size:16px; }.note p { margin:0; color:var(--muted); font-size:14px; }.note-label { display:inline-block; margin-bottom:14px; color:var(--coral); font:12px ui-monospace,SFMono-Regular,Consolas,monospace; }
.page-intro { max-width:720px; padding-bottom:40px; border-bottom:1px solid var(--line); }.page-title { font-size:42px; }.page-intro p { max-width:650px; margin:18px 0 0; color:var(--muted); font-size:17px; }.prose { width:min(100%,720px); font-size:16px; }.prose h2 { margin:42px 0 14px; font-family:Georgia,"Noto Serif SC",serif; font-size:27px; font-weight:500; line-height:1.35; }.prose h3 { margin:28px 0 10px; font-size:18px; }.prose p,.prose li { color:#3f4946; }.prose ul { padding-left:22px; }.prose code { padding:2px 5px; background:#e9ede7; color:#264d46; font:13px ui-monospace,SFMono-Regular,Consolas,monospace; }.prose pre { overflow-x:auto; padding:18px; border-radius:6px; background:var(--code); color:#e8eee9; line-height:1.6; }.prose pre code { padding:0; background:transparent; color:inherit; }.article-meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; color:var(--muted); font:13px ui-monospace,SFMono-Regular,Consolas,monospace; }.article-back { display:inline-flex; margin-bottom:32px; color:var(--forest); font-size:14px; }
.now-item { display:grid; grid-template-columns:160px minmax(0,1fr); gap:26px; padding:22px 0; border-bottom:1px solid var(--line); }.now-item strong { color:var(--forest); }.now-item p { margin:0; color:var(--muted); }.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:13px; }.footer-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
@media (max-width:720px) { .header-inner,.page-shell,.footer-inner { width:min(100% - 32px,1040px); }.header-inner { min-height:62px; }.brand-note { display:none; }.site-nav { gap:13px; font-size:13px; }.page-shell { padding:46px 0 60px; }.hero { grid-template-columns:1fr; gap:28px; padding-bottom:42px; }.hero h1 { font-size:39px; }.page-title { font-size:34px; }.hero-copy,.page-intro p { font-size:16px; }.section { padding-top:42px; }.post-card { grid-template-columns:1fr auto; gap:8px 16px; }.post-card p { grid-column:1/-1; }.notes-grid { grid-template-columns:1fr; }.now-item { grid-template-columns:1fr; gap:4px; }.footer-inner { align-items:flex-start; flex-direction:column; justify-content:center; gap:3px; padding:16px 0; } }