:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#555;
  --border:#e5e7eb;
  --link:#0b5fff;
  --card:#fafafa;
  --shadow:0 1px 8px rgba(0,0,0,.06);
  --radius:14px;
  --sidebar:300px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f14;
    --text:#e8eef7;
    --muted:#a8b3c5;
    --border:#1f2a37;
    --link:#6aa7ff;
    --card:#0f1620;
    --shadow:0 1px 10px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  gap:28px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
@media (max-width: 900px){
  .container{grid-template-columns:1fr; gap:16px}
}
.topnav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  padding: 14px 16px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  z-index:5;
}
.topnav .brand{font-weight:800; margin-right:10px}
.topnav a{color:var(--text); opacity:.86}
.topnav a.active{opacity:1; text-decoration:underline; text-underline-offset:6px}
.sidebar{
  position:sticky;
  top:64px;
  align-self:start;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow: var(--shadow);
}
@media (max-width: 900px){
  .sidebar{position:static}
}
.avatar{
  width:132px;
  height:132px;
  border-radius:999px;
  border:1px solid var(--border);
  object-fit:cover;
  display:block;
  margin-bottom:10px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.name{font-size:26px; font-weight:800; margin:6px 0 2px}
.subtitle{color:var(--muted); margin:0 0 10px}
.follow{list-style:none; padding:0; margin:12px 0 0;}
.follow li{margin:6px 0; color:var(--muted)}
.follow li a{color:var(--text)}
.main{min-width:0}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  padding:18px;
  box-shadow: var(--shadow);
  margin: 0 0 16px;
}
h1,h2,h3{line-height:1.25}
h1{margin:0 0 8px}
h2{margin:0 0 10px; font-size:20px}
h3{margin:12px 0 6px; font-size:16px}
ul{margin:8px 0 0 20px}
.small{color:var(--muted); font-size:14px}
.footer{margin-top:18px; color:var(--muted); font-size:14px;}
.badge{
  display:inline-block;
  padding:2px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:13px;
  color:var(--muted);
  margin: 0 8px 8px 0;
}
.kv{display:flex; flex-wrap:wrap; gap:10px}
.kv .badge{background: color-mix(in srgb, var(--bg) 60%, transparent)}
.pub-item{margin:10px 0}
.pub-title{font-weight:700}
.pub-meta{color:var(--muted); font-size:14px}
.controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 10px 0 0}
input,select{border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--bg); color:var(--text);}