:root { color-scheme: light; --ink:#18334a; --muted:#5c7488; --line:#dbe8ef; --paper:#fff; --wash:#f3fbff; --accent:#167db2; }
* { box-sizing: border-box; }
body { margin:0; background:var(--wash); color:var(--ink); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",Arial,sans-serif; }
.site-nav { height:64px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(20px, calc((100% - 980px)/2)); position:sticky; top:0; z-index:1; }
.brand { color:var(--ink); font-weight:700; text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand img { width:32px; height:32px; border-radius:9px; }
.site-nav nav { display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end; }
.site-nav nav a, footer a { color:var(--accent); text-decoration:none; }
main { max-width:900px; margin:48px auto; padding:0 20px; }
.paper { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,5vw,56px); box-shadow:0 12px 38px rgba(20,74,106,.08); }
h1 { margin:0 0 8px; font-size:clamp(28px,5vw,40px); line-height:1.25; }
.updated { color:var(--muted); margin:0 0 32px; }
h2 { margin:32px 0 8px; font-size:22px; line-height:1.4; }
p { margin:12px 0; }
a { color:var(--accent); }
footer { color:var(--muted); text-align:center; padding:0 20px 42px; font-size:14px; }
@media (max-width:640px) { .site-nav { height:auto; min-height:64px; gap:10px; padding-top:12px; padding-bottom:12px; align-items:flex-start; } .site-nav nav { gap:8px 12px; font-size:14px; } }