:root { color-scheme: dark; --bg:#0b0f1a; --panel:#131a2c; --line:#243049; --text:#e8ecf8; --muted:#9aa6c4; --link:#7fdbff; }
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(1200px 600px at 50% -10%, #16203b 0%, var(--bg) 60%); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; line-height:1.6; }
a { color:var(--link); }
.wrap { max-width:960px; margin:0 auto; padding:0 22px; }
header.site { padding:22px 0; }
header.site .brand { font-weight:800; font-size:20px; letter-spacing:-0.01em; color:var(--text); text-decoration:none; }
.hero { padding:54px 0 30px; }
.hero h1 { font-size:clamp(30px,6vw,48px); margin:0 0 10px; letter-spacing:-0.02em; }
.hero p { color:var(--muted); font-size:18px; margin:0; max-width:620px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; padding:24px 0 56px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.card .top { display:flex; align-items:center; gap:14px; }
.icon { width:64px; height:64px; border-radius:15px; flex:0 0 auto; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.mono { display:grid; place-items:center; font-weight:800; font-size:28px; color:#0b0f1a; }
.card .name { font-weight:800; font-size:19px; }
.card .tag { color:var(--muted); margin:0; }
.row { display:flex; align-items:center; gap:12px; margin-top:4px; flex-wrap:wrap; }
.btn { display:inline-block; background:var(--accent,#7c8cff); color:#06121a; font-weight:800; text-decoration:none;
  padding:9px 14px; border-radius:11px; font-size:14px; }
.badge { display:inline-block; border:1px solid var(--line); color:var(--muted); padding:7px 12px; border-radius:11px; font-size:13px; font-weight:700; }
.links { color:var(--muted); font-size:14px; }
.links a { color:var(--muted); }
footer.site { border-top:1px solid var(--line); padding:26px 0 60px; color:var(--muted); font-size:14px; }
footer.site a { color:var(--muted); }
article { padding:40px 0 72px; max-width:760px; }
article h1 { font-size:30px; margin:0 0 6px; }
article h2 { font-size:19px; margin:30px 0 8px; color:#cfd8ff; }
.muted { color:var(--muted); }
.note { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:18px 0; }
.q { font-weight:700; margin:18px 0 2px; }