:root{
  --bg:#ffffff;
  --card:#ffffff;
  --border:#111111;
  --text:#000000;
  --muted:#555555;
  --accent:#000000;
  --chip:#f5f5f5;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:960px;margin:0 auto;padding:28px 20px}
header{display:flex;align-items:center;gap:16px;margin:6px 0 22px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:18px}
.logo{width:52px;height:52px;border-radius:50%;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.5px}
.logo span{font-size:16px}
.brand{display:flex;flex-direction:column;gap:4px}
h1{font-size:30px;line-height:1.2;margin:0;letter-spacing:.2px}
h2{font-size:22px;margin:4px 0 10px}
p{margin:10px 0}
ul{margin:8px 0 8px 20px;padding:0}
li{margin:6px 0}.muted{color:var(--muted);font-size:14px}
.nav{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.nav a{padding:7px 11px;border:1px solid var(--border);border-radius:999px;color:var(--text);background:var(--chip);text-decoration:none}
.nav a:hover{background:#000;color:#fff}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;margin:18px 0;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--border);font-size:12px;color:var(--text)}
footer{border-top:1px solid var(--border);margin:30px 0 8px;padding-top:18px;color:var(--muted);font-size:14px}
@media (max-width:640px){.wrap{padding:22px 16px}h1{font-size:25px}.nav{width:100%;margin-left:0}.nav a{flex:1;text-align:center}.card{padding:18px}}