:root{--bg:#0b0d10;--card:#111418;--muted:#9aa4b2;--fg:#e6edf3;--accent:#3aa0ff;}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,sans-serif;background:#0b0d10;color:var(--fg);line-height:1.55}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1050px;margin:0 auto;padding:28px}
.header{padding:36px 0 8px}
h1{font-size:42px;margin:0 0 6px} .tag{color:var(--muted);font-size:14px;letter-spacing:.4px;text-transform:uppercase}
.hero{background:linear-gradient(180deg,#0b0d10 0%,#0f1318 100%);padding:18px;border-radius:16px;border:1px solid #1c232b}
.hero pre{background:#0c1116;border:1px solid #1c232b;padding:14px;border-radius:12px;overflow:auto}
.btns{display:flex;gap:12px;margin:14px 0 6px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#1b2430;border:1px solid #2a3542}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:var(--card);border:1px solid #1c232b;border-radius:14px;padding:14px}
.card h3{margin:0 0 6px;font-size:16px}
.media{display:flex;gap:12px;flex-wrap:wrap}
.media img,.media video{max-width:100%;border-radius:12px;border:1px solid #1c232b;background:#000}
footer{margin:26px 0 10px;color:var(--muted);font-size:13px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}