:root {
  --bg:#0b0f13; --card:#121820; --ink:#e8eef6; --muted:#9fb1c7; --chip:#1a2430; --acc:#7cc3ff;
  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box }
html, body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif }

.site-header { padding:24px 20px 10px; border-bottom:1px solid #14202b }
.profile { display:flex; gap:16px; align-items:center; max-width:1100px; margin:0 auto }
.avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid #243344 }

.avatar {
  transition: transform 0.25s cubic-bezier(.4,2,.6,1);
}
.avatar:hover {
  transform: scale(1.5);
  z-index: 2;
  box-shadow: 0 4px 24px #0008;
}
.site-header h1 { margin:0 0 4px; letter-spacing:.4px }
.tagline { margin:0; color:var(--muted) }
.social { margin-top:6px; display:flex; gap:12px }
.link { color:var(--acc); text-decoration:none; border-bottom:1px dashed transparent }
.link:hover { border-color:var(--acc) }

.filters { display:grid; gap:10px; padding:16px 20px; position:sticky; top:0; backdrop-filter:saturate(180%) blur(6px); background:rgba(11,15,19,.7); border-bottom:1px solid #14202b; z-index:10 }
#search { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #203040; background:#0f141b; color:var(--ink) }

.chips { display:flex; flex-wrap:wrap; gap:8px }
.chips.small .chip { font-size:.85rem; opacity:.9 }
.chip { padding:8px 12px; border-radius:999px; background:var(--chip); border:1px solid #243344; color:var(--ink); cursor:pointer; user-select:none }
.chip.active { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc) }

main { padding:14px 20px 48px; max-width:1100px; margin:0 auto }
.stats { color:var(--muted); margin:6px 0 14px }

.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:14px }
.card { background:var(--card); border:1px solid #1d2a38; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow) }
.card h3 { margin:0 0 6px; font-size:1.05rem }
.meta { color:var(--muted); font-size:.9rem; margin-bottom:10px }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }
.badge { font-size:.78rem; padding:4px 8px; border-radius:999px; background:#0e151d; border:1px solid #243344; color:#c6d6ea }
.card a.btn { display:inline-block; margin-top:10px; padding:8px 10px; border-radius:10px; border:1px solid #254056; text-decoration:none; color:var(--acc) }
.card a.btn:hover { border-color:var(--acc) }

details.reflect { margin-top:10px; border-top:1px dashed #223243; padding-top:8px }
details.reflect > summary { cursor:pointer; color:var(--acc) }
.reflect-body { color:var(--ink); white-space:pre-wrap; margin-top:6px }

.site-footer { display:flex; gap:10px; justify-content:center; align-items:center; color:var(--muted); border-top:1px solid #14202b; padding:18px }

@media (prefers-color-scheme: light) {
  :root { --bg:#f6f8fa; --card:#fff; --ink:#111; --muted:#5a6b7d; --chip:#f0f3f7; --acc:#0066cc }
  .filters { background:rgba(255,255,255,.7) }
}