:root{
  --bg:#0f1418; --panel:#171e24; --panel-border:#26313a;
  --text:#e8eef2; --muted:#9fb0bc; --accent:#f2b544;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
.site-header{max-width:960px;margin:0 auto;padding:20px 20px 0}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:20px}
.brand small{display:block;font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.08em}
.cat-mark{width:36px;height:36px;color:var(--accent);flex:none}
main{max-width:960px;margin:0 auto;padding:0 20px 48px}
.hero{padding:48px 0 8px}
.hero h1{font-size:clamp(28px,6vw,44px);line-height:1.3;margin:0 0 16px}
.hero p{color:var(--muted);max-width:34em;margin:0}
.group-title{font-size:15px;letter-spacing:.1em;color:var(--accent);
  margin:40px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--panel-border)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:6px;text-decoration:none;
  background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:18px}
.card:hover,.card:focus-visible{border-color:var(--accent)}
.card-kind{font-size:11px;letter-spacing:.1em;color:var(--accent)}
.card-name{font-size:17px;line-height:1.45}
.card-desc{font-size:13.5px;color:var(--muted)}
.card-url{margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted)}
.about p{color:var(--muted);max-width:40em}
.site-footer{max-width:960px;margin:0 auto;padding:20px;border-top:1px solid var(--panel-border);
  display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--muted)}
@media (prefers-color-scheme:light){
  :root{--bg:#f7f5f0;--panel:#ffffff;--panel-border:#ddd6c9;--text:#22282c;--muted:#5d6a72;--accent:#a86e00}
}