styles.css

:root{ --bg:#0f172a; --fg:#e2e8f0; --muted:#94a3b8; --card:#111827; --accent:#22c55e }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Arial,Segoe UI,sans-serif}
header{padding:32px 20px;text-align:center;border-bottom:1px solid #1f2937}
header h1{margin:0 0 8px}
header p{margin:0;color:var(--muted)}
main{max-width:980px;margin:0 auto;padding:24px 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.cards li{background:var(--card);border:1px solid #1f2937;border-radius:10px;padding:16px}
h2{margin:28px 0 12px}
code{background:#0b1220;padding:2px 6px;border-radius:6px}
footer{padding:24px 16px;text-align:center;color:var(--muted);border-top:1px solid #1f2937;margin-top:24px}