:root { --bg:#f7f7f5; --card:#ffffff; --ink:#1d1d1f; --muted:#6b6b70; --line:#e3e3e0; --accent:#1a73e8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#151516; --card:#1f1f21; --ink:#f2f2f2; --muted:#a3a3a8; --line:#323235; --accent:#8ab4f8; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
main { max-width:720px; margin:0 auto; padding:40px 16px 64px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.mark { width:36px; height:36px; border-radius:9px; background:#202124; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:7px; flex:none; }
.mark i { border-radius:3px; }
.mark i:nth-child(1) { background:#d93a2b; } .mark i:nth-child(2) { background:#e8b528; }
.mark i:nth-child(3) { background:#2f9e55; } .mark i:nth-child(4) { background:#3d6fa8; }
h1 { font-size:28px; margin:0; }
h2 { font-size:19px; margin:28px 0 6px; }
p, li { color:var(--ink); }
.lede { color:var(--muted); font-size:17px; margin:4px 0 20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px 20px 14px; margin:18px 0; }
code { font:14px ui-monospace, SFMono-Regular, Menlo, monospace; background:var(--line); padding:1px 5px; border-radius:5px; overflow-wrap:anywhere; }
a { color:var(--accent); }
nav { display:flex; gap:18px; flex-wrap:wrap; margin-top:32px; padding-top:16px; border-top:1px solid var(--line); font-size:15px; }
.date { color:var(--muted); font-size:14px; }