:root {
  --bg: #ffffff; --fg: #1a1a1a; --muted: #666; --accent: #2563eb;
  --border: #e5e7eb; --card: #f8f9fb; --maxw: 820px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a; --fg: #e8eaed; --muted: #9aa0a6; --accent: #6ea8fe;
    --border: #2a2e35; --card: #1c1f25;
  }
}
html { -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.7;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 48px 20px 96px; }
header h1 { font-size: 28px; margin: 0 0 4px; }
header p { color: var(--muted); margin: 0 0 28px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button {
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 14px;
}
.filters button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 14px;
  background: var(--card); transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card h2 { font-size: 19px; margin: 0; }
.card .date { color: var(--muted); font-size: 13px; white-space: nowrap; }
.card .tag {
  display: inline-block; font-size: 12px; padding: 2px 10px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted); margin-top: 8px;
}
.card .vis {
  display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px;
  margin: 8px 0 0 8px; font-weight: 700;
}
.card .vis.pub { background: rgba(34,197,94,.14); color: #15803d; }
.card .vis.priv { background: rgba(100,116,139,.14); color: #475569; }
@media (prefers-color-scheme: dark) {
  .card .vis.pub { background: rgba(34,197,94,.18); color: #4ade80; }
  .card .vis.priv { background: rgba(148,163,184,.16); color: #cbd5e1; }
}
.card .summary { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }