.word-progress {
  display: flex;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--border-strong);
}
.word-progress > span {
  height: 100%;
}
.word-progress .is-learned {
  background: var(--accent);
}
.word-progress .is-learning {
  background: var(--warning);
}
.word-progress .is-new {
  background: var(--border-strong);
}