:root{
  --bg:#fbfaf7;--panel:#ffffff;--ink:#16181d;--mut:#6b7280;--faint:#98a0aa;
  --line:#e7e4de;--accent:#1f5f5b;--accent-soft:#eef4f2;--radius:12px;--maxw:780px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1113;--panel:#15181b;--ink:#e9e7e3;--mut:#9ba3ad;--faint:#6e7681;
        --line:#252a2f;--accent:#7fc0b6;--accent-soft:#16211f}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.8 ui-sans-serif,-apple-system,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px}
.brand{font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
nav{display:flex;gap:2px;flex-wrap:wrap}
nav a{color:var(--mut);text-decoration:none;font-size:13.5px;padding:6px 10px;border-radius:8px;
  transition:color .15s ease,background .15s ease}
nav a:hover{color:var(--ink);background:var(--accent-soft)}
nav a.on{color:var(--ink);background:var(--accent-soft);font-weight:550}
main{padding:58px 24px 8px}
h1{font-size:clamp(27px,4vw,38px);line-height:1.16;letter-spacing:-.022em;font-weight:680;margin:0 0 16px}
h2{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:650;letter-spacing:.01em;
  margin:50px 0 14px;color:var(--ink)}
h2::after{content:"";flex:1;height:1px;background:var(--line)}
h3{font-size:14.5px;font-weight:600;margin:30px 0 8px;color:var(--ink)}
p{margin:0 0 14px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin:0 0 12px}
.lede{font-size:clamp(17px,1.7vw,19px);line-height:1.7;color:var(--ink);margin:0 0 8px;max-width:62ch}
.sub{color:var(--mut);font-size:15px;line-height:1.75;margin:0 0 26px;max-width:62ch}
.stats{display:flex;flex-wrap:wrap;gap:14px 30px;padding:16px 0;margin:6px 0 4px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:1px}
.stat b{font-size:19px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--mut)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:16px 0 4px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 15px;font-size:14.5px;line-height:1.72;
  transition:border-color .18s ease,transform .18s ease}
.card:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));transform:translateY(-1px)}
.card b{display:block;font-size:15px;font-weight:650;margin-bottom:6px}
.card small{display:block;margin-top:9px;color:var(--mut);font-size:13px;line-height:1.62}
.card a{text-decoration:none;color:inherit}
.workgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0 4px}
.work{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.work:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));transform:translateY(-1px);
  text-decoration:none}
.work b{display:block;font-size:14.5px;font-weight:640;color:var(--ink);margin-bottom:5px}
.work span{display:block;font-size:13px;line-height:1.62;color:var(--mut)}
.work em{display:block;margin-top:8px;font-style:normal;font-size:12px;color:var(--faint)}
.year{font-size:13px;letter-spacing:.14em;color:var(--accent);font-weight:650;margin:38px 0 4px}
.postlist{list-style:none;padding:0;margin:0}
.postlist li{padding:15px 0;border-bottom:1px solid var(--line)}
.postlist a{font-size:16px;font-weight:550;color:var(--ink);text-decoration:none}
.postlist a:hover{color:var(--accent)}
.postlist time{display:block;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;
  margin-top:3px;letter-spacing:.02em}
.postlist p{color:var(--mut);font-size:14px;line-height:1.7;margin:5px 0 0;max-width:64ch}
.plainlist{list-style:none;padding:0;margin:0}
.plainlist li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.6}
.plainlist a{color:var(--ink);text-decoration:none}
.plainlist a:hover{color:var(--accent)}
.plainlist time{color:var(--faint);font-size:12.5px;margin-right:10px;font-variant-numeric:tabular-nums}
.cta{display:inline-block;padding:11px 20px;border-radius:10px;background:var(--accent);
  color:#fff !important;font-size:14.5px;font-weight:550;text-decoration:none}
@media (prefers-color-scheme:dark){.cta{color:#08110f !important}}
.cta:hover{opacity:.92;text-decoration:none}
.links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.links a{border:1px solid var(--line);padding:9px 15px;border-radius:9px;font-size:14px;
  color:var(--ink);text-decoration:none}
.links a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
table{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0 8px;
  border-top:1px solid var(--line)}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-size:12px;letter-spacing:.03em;color:var(--mut);font-weight:600;
  background:var(--accent-soft);white-space:nowrap}
tr:nth-child(even) td{background:color-mix(in srgb,var(--ink) 2%,transparent)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
ul{padding-left:20px;margin:0 0 14px}
li{margin:5px 0}
.note{background:var(--accent-soft);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:14px 18px;margin:22px 0;font-size:14px;line-height:1.72}
small{color:var(--mut)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--accent-soft);padding:.1em .36em;border-radius:5px}
footer{border-top:1px solid var(--line);margin-top:66px;padding:20px 0 44px;
  color:var(--faint);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer a{color:var(--faint)}
@media(max-width:680px){
  .wrap{padding:0 18px}main{padding:38px 18px 8px}
  nav a{padding:5px 8px;font-size:13px}
  table{display:block;overflow-x:auto;white-space:nowrap;font-size:13px}
  th,td{padding:8px 10px}
  h2{margin-top:38px}
}