:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0b1220; color: #dbe6ff; line-height: 1.6; }
.wrap { max-width: 980px; margin: 0 auto; padding: 22px; }
.nav { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.nav a { color: #9bc3ff; text-decoration: none; font-weight: 600; }
.nav a:hover { text-decoration: underline; }
.hero { display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; align-items: center; }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } }
.muted { color: #98a8cb; }
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; margin-top: 10px; }
.card { background: #121b31; border: 1px solid #223054; border-radius: 10px; padding: 16px; }
.card img { width: 100%; border-radius: 8px; border: 1px solid #2a3d67; }
pre { background: #0f1a2f; border: 1px solid #233559; border-radius: 8px; padding: 12px; overflow: auto; }
footer { border-top: 1px solid #223054; margin-top: 24px; }
a { color: #7eb5ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.badge { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #17345d; color: #bdd7ff; font-size: 12px; margin-right: 8px; }