:root{
  --bg:#fff; --fg:#111; --muted:#666; --brand:#0a7cff; --line:#e5e7eb; --card:#fafafa;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0c0f; --fg:#f5f5f5; --muted:#9aa0a6; --brand:#4da3ff; --line:#1f232b; --card:#12151b; }
}
*{ box-sizing:border-box }
body{ margin:0; font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif; color:var(--fg); background:var(--bg) }
.wrap{ max-width:880px; margin:0 auto; padding:28px 20px }
h1{ font-size:34px; margin:0 0 6px }
.lead{ color:var(--muted); margin:0 0 16px }
.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ padding:10px 14px; border-radius:10px; background:var(--brand); color:#fff; text-decoration:none; font-weight:600 }
.btn.ghost{ background:transparent; color:var(--fg); border:1px solid var(--line) }
.grid{ display:grid; gap:22px }
h2{ font-size:18px; margin:8px 0 }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:10px 0 }
.tags{ display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none }
.tags li{ padding:6px 10px; border-radius:999px; background:var(--card); border:1px solid var(--line) }
.pill{ font-size:12px; color:var(--muted); margin-left:6px }
.list{ list-style:none; padding:0; margin:0 }
.list li{ padding:6px 0; border-bottom:1px dashed var(--line) }
.foot{ color:var(--muted); font-size:14px; text-align:center }
a{ color:var(--brand) }