:root {
  --skm-color-1-12: #a40d0d;
  --skm-color-2-12: #a65a0d;
  --skm-color-3-12: #a6a60d;
  --skm-color-4-12: #5aa60e;
  --skm-color-5-12: #0da30d;
  --skm-color-6-12: #0da65a;
  --skm-color-7-12: #0da5a5;
  --skm-color-8-12: #0e5aa6;
  --skm-color-9-12: #0d0da5;
  --skm-color-10-12: #590da5;
  --skm-color-11-12: #a50da5;
  --skm-color-12-12: #a60e5a;
}

.mode-badge {
  background-color: #111;
  border-radius: 0.3rem;
  color: #fff;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0.125em;
  padding: 0.3em 0.45em;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}

.mode-ionian, .mode-major {
  background-color: var(--skm-color-1-12);
}

.mode-dorian {
  background-color: var(--skm-color-3-12);
}

.mode-phrygian {
  background-color: var(--skm-color-5-12);
}

.mode-lydian {
  background-color: var(--skm-color-6-12);
}

.mode-mixolydian {
  background-color: var(--skm-color-8-12);
}

.mode-aeolian, .mode-minor {
  background-color: var(--skm-color-10-12);
}

.mode-locrian {
  background-color: var(--skm-color-12-12);
}

.cp-ionian, .cp-major {
  color: var(--skm-color-1-12);
}

.cp-dorian {
  color: var(--skm-color-3-12);
}

.cp-phrygian {
  color: var(--skm-color-5-12);
}

.cp-lydian {
  color: var(--skm-color-6-12);
}

.cp-mixolydian {
  color: var(--skm-color-8-12);
}

.cp-aeolian, .cp-minor {
  color: var(--skm-color-10-12);
}

.cp-locrian {
  color: var(--skm-color-12-12);
}