:root { --fg:#222; --muted:#666; --accent:#5a4fcf; --bg:#fff; --card:#f7f7fb; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.8; }
.site-header { background:var(--accent); padding:16px 20px; }
.site-header a { color:#fff; font-weight:700; text-decoration:none; font-size:1.1rem; }
main { max-width:720px; margin:0 auto; padding:20px; }
.crumb { color:var(--muted); font-size:.85rem; margin-bottom:16px; }
.crumb a { color:var(--accent); text-decoration:none; }
h1 { font-size:1.5rem; line-height:1.4; }
h2 { font-size:1.2rem; margin-top:2em; border-left:4px solid var(--accent); padding-left:10px; }
.catch { color:var(--muted); font-size:1.05rem; }
.score strong { color:var(--accent); font-size:1.3rem; }
ul { padding-left:1.2em; }
.type-list li { margin-bottom:.4em; }
a { color:var(--accent); }
.matrix-wrap { overflow-x:auto; }
.matrix { border-collapse:collapse; font-size:.8rem; }
.matrix th, .matrix td { border:1px solid #ddd; padding:4px 6px; text-align:center; }
.matrix th { background:var(--card); position:sticky; }
.site-footer { max-width:720px; margin:40px auto 0; padding:20px; color:var(--muted);
  font-size:.8rem; border-top:1px solid #eee; }
.ad { margin:24px 0; padding:12px; text-align:center; background:var(--card); border-radius:8px; }
.ad-label { display:block; font-size:.7rem; color:var(--muted); margin-bottom:6px; }
.ad img { max-width:100%; height:auto; }
.ad-lead { margin:0 0 8px; font-size:.9rem; color:var(--fg); text-align:left; }
.ad a { font-weight:700; }
@media (max-width:480px){ h1{font-size:1.3rem;} main{padding:16px;} }