:root{--bg:#0b0c10;--card:#111317;--text:#e6e6e6;--muted:#a5a7ac;--accent:#41e0d0}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);
font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:980px;margin:40px auto;padding:0 20px}
h1{font-size:28px;margin:0 0 20px} h2{font-size:22px;margin:20px 0 8px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid #1b1e25;border-radius:16px;padding:16px}
a.card{text-decoration:none;color:inherit;transition:transform .05s ease}
a.card:hover{transform:translateY(-2px)}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;
background:#1b1e25;border:1px solid #2a2f38;color:var(--muted)}
.btn{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:12px;
border:1px solid #2a2f38;text-decoration:none;color:var(--text)}
.btn:hover{border-color:#434a57}
.small{color:var(--muted);font-size:14px}
.hero{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#1b1e25, var(--accent))}
ul{margin:8px 0 0 18px}
pre{background:#0e1014;border:1px solid #1b1e25;padding:12px;border-radius:12px;overflow:auto}