:root{
  --paper:#fff; --ground:#f4f5f7; --ink:#000; --muted:#5c5f66;
  --rule:#e3e5e9; --focus:#0057d9;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium",
         "Yu Gothic","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --wrap:min(1040px,100% - 2.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:15px;line-height:1.75;
  color:var(--ink);background:var(--paper);
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{width:var(--wrap);margin-inline:auto}

/* ---- 共通ヘッダ */
.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:baseline;gap:1.5rem;
  padding:.9rem 0;flex-wrap:wrap}
.brand{font-size:1rem;font-weight:700;letter-spacing:.02em;text-decoration:none}
.top nav{display:flex;gap:1.1rem;font-size:.86rem;margin-left:auto}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink);text-decoration:underline}

/* ---- トップの年別ヒストグラム */
.hero{padding:3.2rem 0 2.4rem;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.3;margin:0 0 .5rem;
  font-weight:700;letter-spacing:.01em}
.hero p{margin:0;color:var(--muted);max-width:34em}
.figure{margin:2.4rem 0 0}
.bars{display:flex;align-items:flex-end;gap:2px;height:132px}
.bar{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative}
.bar .stack{display:flex;flex-direction:column-reverse;border-radius:1px;overflow:hidden}
.bar .seg{display:block}
.bar:hover .stack{outline:1px solid var(--ink);outline-offset:1px}
.bar .tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:.72rem;line-height:1.5;padding:.35rem .55rem;
  white-space:nowrap;opacity:0;pointer-events:none;z-index:5;border-radius:2px}
.bar:hover .tip,.bar:focus-within .tip{opacity:1}
.axis{display:flex;justify-content:space-between;font-size:.74rem;
  color:var(--muted);margin-top:.45rem}

/* ---- カテゴリ索引 */
.section{padding:2.6rem 0}
.section h2{font-size:1.05rem;margin:0 0 1.1rem;font-weight:700}
.cats{list-style:none;margin:0;padding:0;
  display:grid;gap:0 2rem;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.cats li{border-top:1px solid var(--rule)}
.cats a{display:flex;align-items:baseline;gap:.6rem;padding:.62rem 0;
  text-decoration:none}
.cats a:hover .nm{text-decoration:underline}
.chip{width:9px;height:9px;flex:none;border-radius:2px;transform:translateY(-1px)}
.cats .nm{flex:1}
.cats .n{color:var(--muted);font-size:.84rem}

/* ---- 楽曲リスト */
.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--rule)}
.list li:last-child{border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:10px 1fr auto;gap:.75rem;
  align-items:baseline;padding:.62rem 0;text-decoration:none}
.row:hover .ttl{text-decoration:underline}
.rail{width:3px;height:1.05em;border-radius:2px;transform:translateY(.15em)}
.ttl{font-weight:600}
.sub{color:var(--muted);font-size:.83rem;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date{color:var(--muted);font-size:.8rem;white-space:nowrap}

/* ---- 曲ページ */
.song{padding:2.8rem 0 1rem;border-bottom:1px solid var(--rule)}
.song h1{font-size:clamp(1.5rem,4.4vw,2.15rem);margin:0 0 .9rem;line-height:1.28}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.4rem;padding:0;list-style:none}
.tags a{display:inline-flex;align-items:center;gap:.4rem;font-size:.79rem;
  border:1px solid var(--rule);padding:.16rem .55rem;text-decoration:none;border-radius:2px}
.tags a:hover{border-color:var(--ink)}
.desc{font-size:1.02rem;max-width:36em;margin:0 0 1.6rem}
dl.meta{display:grid;grid-template-columns:5.5rem 1fr;gap:.3rem 1rem;
  margin:0 0 1.8rem;font-size:.9rem}
dl.meta dt{color:var(--muted)}
dl.meta dd{margin:0}
.listen{padding:1.8rem 0 2.4rem}
.listen h2{font-size:.92rem;margin:0 0 .3rem;font-weight:700}
.listen .hint{color:var(--muted);font-size:.82rem;margin:0 0 1rem;max-width:34em}
.services{display:flex;flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none}
.svc{display:inline-block;padding:.5rem 1.05rem;border:1.5px solid var(--ink);
  text-decoration:none;font-weight:600;font-size:.88rem;border-radius:2px}
.svc:hover{background:var(--ink);color:#fff}
.src{color:var(--muted);font-size:.82rem;padding:0 0 3rem}
.src a{color:var(--muted)}

/* ---- 検索 */
.searchbox{padding:2.4rem 0 1.2rem}
#q{width:100%;font:inherit;font-size:1.1rem;padding:.7rem .2rem;
  border:0;border-bottom:2px solid var(--ink);background:transparent}
#q::placeholder{color:#9aa0a6}
.filters{display:flex;flex-wrap:wrap;gap:.35rem;margin:1.1rem 0 0;padding:0}
.filters button{font:inherit;font-size:.79rem;padding:.2rem .6rem;cursor:pointer;
  background:var(--paper);border:1px solid var(--rule);border-radius:2px}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.count{color:var(--muted);font-size:.84rem;margin:1.4rem 0 .2rem}

/* ---- ランキング */
.rank{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{border-top:1px solid var(--rule);counter-increment:r}
.rank li:last-child{border-bottom:1px solid var(--rule)}
.rank a{display:grid;grid-template-columns:2rem 1fr auto;gap:.75rem;
  align-items:baseline;padding:.68rem 0;text-decoration:none}
.rank a::before{content:counter(r);color:var(--muted);font-size:.86rem}
.empty{color:var(--muted);border:1px dashed var(--rule);padding:1.4rem;
  border-radius:2px;font-size:.9rem}

footer{border-top:1px solid var(--rule);margin-top:3rem;padding:1.6rem 0 2.6rem;
  color:var(--muted);font-size:.8rem}
footer a{color:var(--muted)}
footer p{margin:.3rem 0}

@media (max-width:560px){
  .row{grid-template-columns:10px 1fr;gap:.6rem}
  .date{grid-column:2;font-size:.76rem}
  .bars{height:96px}
  dl.meta{grid-template-columns:4.6rem 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}