:root {
  --bg: #fbfbfa; --fg: #1d2129; --muted: #5d6470; --line: #e3e5e8; --card: #ffffff;
  --accent: #2563a8; --male: #4a86c5; --female: #e0705f;
  --s0: #2f6db5; --s1: #d9653b; --s2: #2e9467; --s3: #8a5cc2; --s4: #b38a12;
  --pos: #2e9467; --neg: #d0533f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161a; --fg: #e7e9ec; --muted: #9aa1ab; --line: #2c3037; --card: #1c1f24;
    --accent: #7fb0ea; --male: #6ea6e0; --female: #f08b7c;
    --s0: #6ea6e0; --s1: #f0956c; --s2: #5cc394; --s3: #b393e6; --s4: #d9b440;
    --pos: #5cc394; --neg: #f07a66;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.7 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif; }
a { color: var(--accent); }
.top { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
.sub { color: var(--muted); font-size: 13px; }
main { max-width: 960px; margin: 0 auto; padding: 8px 16px 40px; }
h1 { font-size: 24px; line-height: 1.35; margin: 16px 0 2px; }
h2 { font-size: 19px; margin: 40px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
h3 { font-size: 14px; margin: 0 0 4px; color: var(--muted); font-weight: 600; }
.en { margin: 0; color: var(--muted); font-size: 13px; }
.lead, .note { color: var(--muted); font-size: 13px; }
.crumb { font-size: 13px; color: var(--muted); margin-top: 8px; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--line); color: var(--fg); margin-top: 6px; }
.badge.proj { background: #f4e3b5; color: #5a4300; }
.ctrl { display: flex; gap: 8px; align-items: center; margin: 12px 0 4px; }
.ctrl input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--fg); text-decoration: none; font: inherit; cursor: pointer; }
.btn.dis { opacity: .35; }
.btn.play { min-width: 64px; }
.pyr-box { max-width: 820px; margin: 0 auto; }
.pyr-box svg { width: 100%; height: auto; display: block; }
svg .male { fill: var(--male); } svg .female { fill: var(--female); }
svg .male-t { fill: var(--male); font-weight: 700; font-size: 14px; } svg .female-t { fill: var(--female); font-weight: 700; font-size: 14px; }
svg .grid { stroke: var(--line); stroke-width: 1; }
svg .zero { stroke: var(--muted); stroke-width: 1; }
svg .tick { fill: var(--muted); font-size: 11px; }
svg .rowl { fill: var(--fg); font-size: 13px; }
svg .ln { fill: none; stroke-width: 2; stroke-linejoin: round; }
svg .ln.s0 { stroke: var(--s0); } svg .ln.s1 { stroke: var(--s1); } svg .ln.s2 { stroke: var(--s2); } svg .ln.s3 { stroke: var(--s3); } svg .ln.s4 { stroke: var(--s4); }
svg .mk { stroke: var(--fg); stroke-dasharray: 3 3; opacity: .55; }
svg .pos { fill: var(--pos); } svg .neg { fill: var(--neg); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.stats div, .card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.stats dt, .cl { font-size: 12px; color: var(--muted); }
.stats dd { margin: 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 12px 0; }
.cv { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs { font-size: 12px; color: var(--muted); }
.chart { margin: 16px 0; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.lg::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; background: var(--s0); }
.lg.s1::before { background: var(--s1); } .lg.s2::before { background: var(--s2); } .lg.s3::before { background: var(--s3); } .lg.s4::before { background: var(--s4); }
.search { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); margin: 8px 0 12px; }
.clist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.clist a { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; color: var(--fg); }
.clist .n { font-weight: 600; } .clist .e, .clist .p { font-size: 12px; color: var(--muted); }
.clist.compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 2px 8px; }
.clist.compact a { display: inline; padding: 0; border: 0; background: none; color: var(--accent); font-size: 13px; }
.ylist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ylist a { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-variant-numeric: tabular-nums; }
.ylist a[aria-current] { background: var(--accent); color: var(--bg); }
footer { max-width: 960px; margin: 0 auto; padding: 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
@media (max-width: 600px) { h1 { font-size: 20px; } .stats dd, .cv { font-size: 16px; } }