:root{--bg:#f4f5f7;--panel:#fff;--ink:#1d2939;--muted:#5d6b7e;--line:#dfe3e8;--bar:#0b1f33;--acc:#0a66c2}
@media (prefers-color-scheme:dark){:root{--bg:#0f1720;--panel:#17212c;--ink:#e6ebf1;--muted:#9aa7b6;--line:#2a3644;--bar:#08131f;--acc:#5aa2ef}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.bar{background:var(--bar);color:#fff;height:52px}
.bar .wrap{display:flex;align-items:center;gap:10px;height:100%}
.mark{width:18px;height:18px;border-radius:3px;background:linear-gradient(135deg,#0a66c2,#3fa9f5)}
.brand{font-weight:600;letter-spacing:.2px;color:#fff;text-decoration:none}
h1{font-size:26px;font-weight:600;margin:36px 0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:flex;gap:14px;align-items:center;padding:18px;background:var(--panel);border:1px solid var(--line);
      border-radius:6px;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.card:hover,.card:focus-visible{border-color:var(--acc);box-shadow:0 2px 10px rgb(0 0 0 / .08);outline:none}
.card b{display:block;font-weight:600}
.card small{color:var(--muted);font-size:13px}
.badge{flex:none;width:40px;height:40px;border-radius:6px;background:var(--c);color:#fff;font-weight:700;
       display:grid;place-items:center;font-size:18px}
.crumb{margin:24px 0 0;color:var(--muted);font-size:13px}.crumb a{color:var(--acc);text-decoration:none}
.crumb+h1{margin-top:6px}
.lead{color:var(--muted);margin-top:-8px}
.info{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 18px;margin:20px 0}
.info dt{font-weight:600;margin-top:12px}.info dd{margin:4px 0 12px}
code{font:13px/1.4 ui-monospace,Consolas,Menlo,monospace;background:var(--bg);border:1px solid var(--line);
     border-radius:4px;padding:3px 6px;overflow-wrap:anywhere}