:root{
  --bg:#0d1117; --panel:#161b22; --border:#30363d;
  --fg:#e6edf3; --muted:#9da7b3; --accent:#58a6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,"Apple SD Gothic Neo","Pretendard",system-ui,sans-serif;
  line-height:1.65;
}
.site-head{padding:34px 22px 10px;max-width:1100px;margin:0 auto}
.brand{font-size:24px;font-weight:700;color:var(--fg);text-decoration:none}
.tagline{color:var(--muted);font-size:14px;margin-top:4px}
.wrap{max-width:1100px;margin:0 auto;padding:6px 22px 80px}
.site-foot{max-width:1100px;margin:0 auto;padding:20px 22px 50px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--border)}
.site-foot a{color:var(--accent)}

/* filter chips */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.chip{
  background:var(--panel);color:var(--muted);border:1px solid var(--border);
  border-radius:999px;padding:6px 14px;font-size:13.5px;cursor:pointer;
  font-family:inherit;transition:.15s;
}
.chip span{opacity:.6;font-size:12px;margin-left:3px}
.chip:hover{color:var(--fg);border-color:var(--chip,var(--accent))}
.chip.active{
  color:#0d1117;background:var(--chip,var(--accent));
  border-color:var(--chip,var(--accent));font-weight:600;
}
.chip.active span{opacity:.8}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.card{
  background:var(--panel);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:10px;
  padding:16px 18px;display:flex;flex-direction:column;
  min-width:0;overflow-wrap:anywhere;
}
.badge{
  align-self:flex-start;font-size:11px;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:1px 9px;margin-bottom:8px;opacity:.85;
}
.card h2{font-size:16.5px;line-height:1.35;margin-bottom:8px}
.summary{font-size:13.2px;color:var(--fg);opacity:.92}
.points{list-style:none;margin:11px 0 4px}
.points li{
  font-size:12.5px;color:var(--muted);padding-left:15px;position:relative;margin:4px 0;
}
.points li:before{content:"▸";color:var(--accent);position:absolute;left:0}
.src{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--accent);text-decoration:none}
.src:hover{text-decoration:underline}

/* sort toolbar */
.sortbar{display:flex;align-items:center;gap:8px;margin:6px 0 14px;color:var(--muted);font-size:12.5px}
.sortbar .sort{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:999px;padding:3px 11px;font-size:12px;cursor:pointer;
}
.sortbar .sort:hover{color:var(--fg);border-color:var(--accent)}
.sortbar .sort.active{color:var(--accent);border-color:var(--accent)}

@media(max-width:560px){.grid{grid-template-columns:1fr}}