html {
  color-scheme: dark;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

#episodeGrid::-webkit-scrollbar {
  width: 10px;
}

#episodeGrid::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.35);
  border-radius: 999px;
}

.episode-pill {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: white;
  border-radius: 18px;
  min-height: 46px;
  font-weight: 700;
  transition: 180ms ease;
}

.episode-pill:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

.episode-pill.is-active {
  background: rgb(251 191 36);
  color: rgb(10 15 24);
  border-color: transparent;
}

.episode-group-pill {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgb(226 232 240);
  border-radius: 999px;
  min-height: 42px;
  font-weight: 700;
  padding: 0 14px;
  transition: 180ms ease;
}

.episode-group-pill:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

.episode-group-pill.is-active {
  background: rgb(251 191 36);
  color: rgb(10 15 24);
  border-color: transparent;
}