.ruth-article .controls { display: grid; gap: 1rem; margin: 1rem 0; }
.ruth-article .control { display: grid; grid-template-columns: 1fr 4rem; align-items: center; gap: .3rem .75rem; }
.ruth-article .control input { grid-column: 1/-1; width: 100%; margin: 0; }
.ruth-article .control output { text-align: right; font-variant-numeric: tabular-nums; }
.ruth-article .metrics { display: grid; gap: .8rem; }
.ruth-article .barrow { display: grid; grid-template-columns: 1fr auto; gap: .35rem; font-size: .85rem; }
.ruth-article .track { grid-column: 1/-1; height: .6rem; background: var(--hwe-rule); border-radius: .15rem; overflow: hidden; }
.ruth-article .fill { height: 100%; transition: width .12s; }
@media (max-width: 500px) {
  .ruth-article .plot text { font-size: 18px; }
  .ruth-article .panel table { font-size: .75rem; }
}