:root{ --bg:#0b1020; --panel:#111834; --muted:#9fb0d9; --text:#eaf0ff; --accent:#5fa8ff; }
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; }
.wrap{ width:min(1100px, 92%); margin:24px auto; }
h1{ margin:0 0 6px; font-size:28px; font-weight:700; letter-spacing:.3px; }
h2{ margin:0 0 10px; font-size:18px; font-weight:600; color:#dfe8ff; }
.muted{ color:var(--muted); }
.devbox{ display:flex; gap:20px; background:linear-gradient(180deg, #0f1735, #0b1127); border:1px solid #1f2a55; border-radius:14px; padding:16px; }
.devbox .col{ flex:1; }
.devbox ul{ margin:0; padding-left:16px; line-height:1.6; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.card{ display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid #1f2a55; border-radius:14px; padding:16px; transition:transform .12s ease, border-color .12s; }
.card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.card-title{ font-weight:700; font-size:18px; margin-bottom:6px; color:#f6f8ff; }
.card-desc{ font-size:14px; margin-bottom:12px; }
.card-meta{ display:flex; gap:12px; font-size:12px; color:var(--muted); }
code{ background:#0d1430; padding:2px 6px; border-radius:6px; border:1px solid #1f2a55; }
footer{ margin-bottom:40px; }
@media (max-width:640px){ .devbox{flex-direction:column;} }