.rht {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35ch;
  line-height: 1.1;
}
.rht-prefix {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.rht-item {
  display: inline-block;
  will-change: transform, opacity;
  transition: transform var(--rht-tr, .3s) ease, opacity var(--rht-tr, .3s) ease;
  opacity: 0;
  transform: translateY(20%);
}
.rht-item[data-in="1"] {
  opacity: 1;
  transform: translateY(0);
}
.rht-item[data-out="1"] {
  opacity: 0;
  transform: translateY(-20%);
}
.rht-suffix { white-space: nowrap; }