:root{
  --bg: #0b0f14;
  --card: rgba(255,255,255,.06);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.12);
  --accent: #6ee7ff;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7fb; --card:#ffffff; --text:#111827; --muted:#4b5563; --line:#e5e7eb; --accent:#2563eb; }
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; background:var(--bg); color:var(--text); }
a{ color:inherit; }
.container{ max-width: 980px; margin:0 auto; padding: 28px 18px 42px; }
.header{ display:flex; justify-content: space-between; align-items:center; gap:12px; padding: 14px 0 24px; border-bottom: 1px solid var(--line); }
.brand{ display:flex; flex-direction:column; gap:4px; }
.brand h1{ margin:0; font-size: 22px; letter-spacing:.2px; }
.brand p{ margin:0; color:var(--muted); font-size: 13px; }
.badges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.badge{ border: 1px solid var(--line); background: var(--card); padding: 8px 10px; border-radius: 999px; font-size:12px; color: var(--muted); }
.hero{ padding: 24px 0 10px; }
.hero h2{ margin:0 0 8px; font-size: 28px; }
.hero p{ margin:0; color:var(--muted); max-width: 70ch; line-height: 1.45; }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 18px; }
.card{ grid-column: span 12; border:1px solid var(--line); background: var(--card); border-radius: 16px; padding: 16px; box-shadow: 0 12px 26px rgba(0,0,0,.18); }
@media (min-width: 760px){
  .card.half{ grid-column: span 6; }
}
.card h3{ margin:0 0 6px; font-size: 18px; }
.card p{ margin:0; color: var(--muted); line-height: 1.45; }
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); text-decoration:none; background: rgba(255,255,255,.04); }
.btn.primary{ border-color: rgba(110,231,255,.35); box-shadow: 0 0 0 3px rgba(110,231,255,.10) inset; }
.kv{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 12px; }
.footer{ margin-top: 22px; padding-top: 16px; border-top:1px solid var(--line); color: var(--muted); font-size: 12px; display:flex; flex-wrap:wrap; gap:10px; justify-content: space-between; }
code{ background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 8px; }