:root{
  --bg: #0b1220;
  --fg: #e5e7eb;
  --muted:#94a3b8;
  --card:#0f172a;
  --accent:#60a5fa;
  --ring:#334155;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card:#f8fafc; --accent:#2563eb; --ring:#e5e7eb; }
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:var(--bg); color:var(--fg);
}
.wrap{ max-width:1000px; margin:0 auto; padding:20px }
h1{ margin:0 0 6px }
.muted{ color:var(--muted); margin:0 0 16px }
.search{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--ring);
  background:transparent; color:var(--fg); outline:none;
}
.search:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent) }
.grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card{
  background:var(--card); border:1px solid var(--ring); border-radius:14px; padding:14px;
}
.card h3{ margin:0 0 6px; font-size:1.05rem }
.card p{ margin:6px 0 0; color:var(--muted) }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.tag{
  font-size:.75rem; padding:4px 8px; border-radius:999px; border:1px solid var(--ring); color:var(--muted)
}
.card a{ color:var(--accent); text-decoration:none }
.card a:hover{ text-decoration:underline }
.foot{ opacity:.7 }
code{ background:rgba(255,255,255,.06); padding:.1rem .35rem; border-radius:6px }