:root { color-scheme: light; --text:#1f2933; --muted:#52606d; --line:#e4e7eb; --blue:#2563eb; --bg:#fff; }
body.dark, html.dark { color-scheme: dark; --text:#f8fafc; --muted:#cbd5e1; --line:#334155; --bg:#0f172a; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:var(--text); background:var(--bg); }
a { color:inherit; text-decoration:none; }
.nav, .footer, .wrap { width:min(1080px, calc(100% - 32px)); margin:0 auto; }
.nav { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:16px; }
.brand { display:flex; align-items:center; line-height:0; }
.brand-logo { width:145px; height:auto; display:block; }
.brand-logo.dark { display:none; }
html.dark .brand-logo.light { display:none; }
html.dark .brand-logo.dark { display:block; }
.nav-links { display:flex; gap:22px; align-items:center; color:#334155; font-size:15px; }
.menu { position:relative; }
.menu-label { background:transparent; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; }
.menu-panel { display:none; position:absolute; top:100%; left:0; z-index:20; min-width:240px; padding:8px 0; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(15,23,42,.12); }
.menu:hover .menu-panel, .menu:focus-within .menu-panel, .menu.open .menu-panel { display:flex; flex-direction:column; }
.menu-panel a { padding:8px 16px; white-space:nowrap; }
.menu-panel a:hover { color:#177bd1; }
.cta { background:var(--blue); color:#fff; border-radius:8px; padding:8px 14px; font-weight:600; }
.mode { border:0; background:transparent; cursor:pointer; font-size:18px; }
h1.blog-title { text-align:center; font-size:48px; margin:12px 0 8px; }
.lede { max-width:640px; margin:0 auto 36px; text-align:center; color:var(--muted); line-height:1.5; }
.featured { display:grid; gap:28px; }
.featured article, .card { display:grid; grid-template-columns:280px 1fr; gap:22px; align-items:center; margin:0 0 28px; }
.featured img, .card img, .cover { width:100%; border-radius:12px; display:block; object-fit:cover; }
.featured h2, .card h2 { margin:0 0 8px; font-size:28px; line-height:1.25; }
.meta, .excerpt { color:var(--muted); }
.excerpt { margin:8px 0 0; }
.tags, .pager { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:8px 0 28px; }
.tags a, .pager a, .pager span { border-radius:999px; padding:6px 12px; background:#f3f4f6; }
.tags a[aria-current="page"], .pager span { background:#111827; color:#fff; }
.crumbs { color:var(--muted); font-size:14px; margin:12px 0; }
.cover { max-height:460px; margin:8px auto 24px; }
.layout { display:grid; grid-template-columns:220px 1fr; gap:28px; align-items:start; }
.toc { position:sticky; top:16px; align-self:start; max-height:70vh; overflow:auto; font-size:14px; color:var(--muted); }
.toc a { display:block; margin:6px 0; }
.toc .deep { margin-left:12px; }
.post-title { font-size:40px; line-height:1.15; margin:0 0 8px; }
.post-body { font-size:18px; line-height:1.7; }
.post-body h2, .post-body .notion-h2 { font-size:28px; margin:28px 0 8px; }
.post-body h3, .post-body .notion-h3 { font-size:22px; margin:22px 0 8px; }
.post-body img, .post-body .notion-image, .post-body video { max-width:100%; height:auto; }
.post-body video { width:100%; }
.post-body table { border-collapse:collapse; width:100%; }
.post-body td, .post-body th { border:1px solid var(--line); padding:8px; }
.share { display:flex; gap:12px; margin:24px 0; }
.footer { display:flex; justify-content:center; gap:16px; color:var(--muted); padding:28px 0 40px; font-size:14px; }
@media (max-width: 800px) {
  .featured article, .card, .layout { grid-template-columns:1fr; }
  .toc { position:static; max-height:none; overflow:visible; }
  .nav-links { display:none; }
  h1.blog-title, .post-title { font-size:32px; }
}