:root{
  --bg:#0b0b10;
  --card:#12121a;
  --ink:#e9e9f0;
  --muted:#b9b9c9;
  --accent:#ffffff;
  --line:#1e1e29;
  --pill:#1a1a24;
  --radius:18px;
  --shadow:0 8px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.wrap{width:min(980px, calc(100% - 24px)); margin-inline:auto}

.site-header, .site-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0;
}
.brand{font-weight:700; letter-spacing:.5px}
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--pill); color:var(--ink);
  border:1px solid var(--line); padding:.5rem .9rem;
  border-radius:999px; text-decoration:none; transition:transform .15s ease, opacity .2s ease;
}
.pill:hover{transform:translateY(-1px); text-decoration:none}

.controls{margin-top:8px; display:grid; gap:12px}
.search{display:flex; gap:10px}
.search input{
  flex:1; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:999px;
  padding:.8rem 1rem; outline:none;
}
.search input::placeholder{color:var(--muted)}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  background:transparent; color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:.35rem .8rem; cursor:pointer;
}
.tag.active{background:var(--ink); color:#111}
.count{color:var(--muted); font-size:.95rem}

.list{margin:16px 0 40px; display:grid; gap:18px}
.group{border-top:1px solid var(--line); padding-top:12px}
.group h2{
  margin:0; font-size:.95rem; color:var(--muted); letter-spacing:.1em;
}
.items{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-top:10px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 14px; box-shadow:var(--shadow); transition:transform .15s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); border-color:#2a2a3a}
.card a{display:block; text-decoration:none}
.term{font-weight:600; margin:0 0 6px}
.excerpt{color:var(--muted); font-size:.95rem; margin:0}

#entry .entry{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px; box-shadow:var(--shadow); margin-block:16px 32px;
}
.entry h1{margin:0 0 8px}
.meta{color:var(--muted); font-size:.95rem; margin-bottom:16px}
.entry .content{line-height:1.65}
.entry .content h2{margin:1.1em 0 .4em}
.entry .content code{
  background:#0f0f17; border:1px solid var(--line); border-radius:8px;
  padding:0 .35rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.entry .tags{margin-top:16px}
.entry .tags .tag{cursor:default}