:root{--fg:#111;--muted:#555;--bg:#fafafa;--card:#fff;--accent:#2563eb;--border:#e5e7eb}
@media (prefers-color-scheme: dark){:root{--fg:#e5e7eb;--muted:#9ca3af;--bg:#0b1020;--card:#111827;--accent:#60a5fa;--border:#1f2937}}
*{box-sizing:border-box}
body{font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg);margin:0}
.wrap{max-width:920px;margin:0 auto;padding:32px 20px 80px}
header{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.id{display:flex;align-items:center;gap:16px}
.avatar{width:84px;height:84px;border-radius:50%;border:2px solid var(--border);object-fit:cover;flex:none}
h1{font-size:2rem;margin:0}
.tag{color:var(--muted)}
.links a{margin-right:14px;color:var(--accent);text-decoration:none}
.links a:hover{text-decoration:underline}
section{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:18px 0;box-shadow:0 1px 0 rgba(0,0,0,.03)}
section h2{margin:0 0 12px;font-size:1.2rem;display:flex;align-items:center;gap:8px}
section h2 .section-link{color:var(--muted);text-decoration:none;font-size:.95rem;font-weight:400;margin-left:auto}
section h2 .section-link:hover{color:var(--accent)}
section h3{margin:14px 0 6px;font-size:1rem}
ul{padding-left:20px;margin:8px 0}
li{margin:4px 0}
.job{margin:10px 0 18px}
.job h3{margin:0;font-size:1rem}
.job .when{color:var(--muted);font-size:.9rem}
.pill{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px 10px;margin:3px 4px 0 0;font-size:.85rem}
footer{color:var(--muted);font-size:.85rem;margin-top:30px;text-align:center}
a{color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:6px}
.post{border-left:3px solid var(--accent);padding:6px 0 6px 12px;margin:10px 0}
.post .meta{color:var(--muted);font-size:.85rem}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.brand-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.brand-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand,var(--accent))}
.brand-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.brand-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--brand,var(--accent));font-weight:700}
.brand-icon svg{width:24px;height:24px;fill:currentColor}
.brand-icon .mono{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:var(--brand,var(--accent));color:#fff;font-size:.72rem;letter-spacing:.5px}
.brand-icon .emoji{font-size:1.35rem;line-height:1}
.brand-title{font-weight:600;flex:1}
.brand-link{color:var(--muted);text-decoration:none;font-size:1rem}
.brand-link:hover{color:var(--brand,var(--accent))}
.metrics{display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:6px}
.metric .n{font-size:1.35rem;font-weight:700;line-height:1.1}
.metric .l{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.bars{display:block;margin-top:8px}
.bars text{font-family:inherit}
.period{color:var(--muted);font-size:.85rem;margin:14px 0 0;text-align:right}
.contrib-wrap{margin:0 0 12px}
.contrib-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.contrib-head .n{font-size:1.2rem;font-weight:700}
.contrib-head .l{color:var(--muted);font-size:.85rem}
.contrib{display:block;width:100%;height:auto}
.contrib rect{stroke:rgba(0,0,0,.04);stroke-width:.5}
.contrib .cl-0{fill:#ebedf0}
.contrib .cl-1{fill:#9be9a8}
.contrib .cl-2{fill:#40c463}
.contrib .cl-3{fill:#30a14e}
.contrib .cl-4{fill:#216e39}
@media (prefers-color-scheme: dark){
  .contrib rect{stroke:rgba(255,255,255,.04)}
  .contrib .cl-0{fill:#161b22}
  .contrib .cl-1{fill:#0e4429}
  .contrib .cl-2{fill:#006d32}
  .contrib .cl-3{fill:#26a641}
  .contrib .cl-4{fill:#39d353}
}
.legend{display:flex;align-items:center;gap:4px;font-size:.78rem;color:var(--muted);margin-top:4px;justify-content:flex-end}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 1px}
.tabs{display:inline-flex;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px;margin:6px 0 0;align-self:flex-start}
.tabs a{padding:6px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-size:.88rem;font-weight:500}
.tabs a:hover{color:var(--fg)}
.tabs a.on{background:var(--accent);color:#fff}
.tabs a.on:hover{color:#fff}