:root{--bg:#0f1117;--card:#171a23;--ink:#e8eaed;--muted:#9aa3b2;--accent:#6ea8fe;--accent2:#34d399;--line:#262b36}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header.site{background:#12151d;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:1.15rem;color:var(--ink)}
nav a{margin-left:16px;color:var(--muted);font-size:.95rem}
nav a.active,nav a:hover{color:var(--ink)}
.hero{padding:56px 0 36px;text-align:center}
.hero h1{font-size:2.6rem;margin:0 0 12px;letter-spacing:-.02em}
.lede{font-size:1.15rem;color:var(--muted);max-width:680px;margin:0 auto 24px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--accent);color:#0b1020;font-weight:700;padding:11px 20px;border-radius:10px}
.btn.alt{background:var(--accent2);color:#04130d}
.btn:hover{opacity:.92;text-decoration:none}
h1{font-size:2rem;letter-spacing:-.01em}
h2{font-size:1.4rem;margin:36px 0 14px}
h3{font-size:1.15rem;margin:0 0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:18px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:#3a4456}
.card .tag{color:var(--muted);font-size:.92rem;margin:0 0 10px}
.card.guide .badge{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#04130d;background:var(--accent2);padding:2px 8px;border-radius:999px;margin-bottom:8px}
.hl{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem}
.count{color:var(--accent2);font-size:.85rem;margin:8px 0 0}
.crumb{color:var(--muted);font-size:.9rem;margin:24px 0 8px}
.crumb a{color:var(--muted)}
.tool table.facts{width:100%;border-collapse:collapse;margin:18px 0}
.tool table.facts th,.tool table.facts td{text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top}
.tool table.facts th{width:140px;color:var(--muted);font-weight:600}
.toolchip{float:right;width:230px;margin:0 0 16px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:.9rem}
.toolchip a{color:var(--ink)}
.toolchip span{color:var(--muted);font-size:.85rem}
.visit{margin:22px 0}
.related{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:26px 0}
.related ul{margin:8px 0 0;padding-left:20px}
.bottom{background:#10261c;border:1px solid #1c3b2c;border-radius:14px;padding:16px 20px;margin:30px 0}
.muted{color:var(--muted)}
.small{font-size:.82rem}
footer.site{border-top:1px solid var(--line);margin-top:48px;padding:28px 0;color:var(--muted);font-size:.9rem}
footer.site a{color:var(--muted)}
@media(max-width:640px){.toolchip{float:none;width:auto;margin:0 0 16px}}