Stat Paired Feature Quad Features Block for React

Edit the four constants at the top (BUILD, FAILED, SPEND, SETUP: each a was and a now) and the four entries of STATS. Each entry's figure is counted from its constant (Math.round(BUILD.was / BUILD.now) for the 10 times), its bars' lengths come from shareOf, and its sentence is a template that quotes both figures, so the number, the bars and the text always agree. Add a fifth measure and the grid gains a cell, so keep the count even.

The old figure is always a full bar in a faint foreground, and the new figure is a bar in proportion to it (never under 4%, so a big drop still shows). Both are labelled in words ("Was 12 min", "Now 72 s"), so the bars are decoration and the figures are text.

Durations are written by duration (seconds under two minutes, whole minutes above), money by dollars with a fixed locale so the server and the browser agree, and the failure rate as a count per 10,000. Values with a unit sit in a bdi element, so a right-to-left page keeps "12 min" and "$8,400" in reading order.

The block fades up once when the page loads, and the digits are an odometer that rolls when a value changes. With reduced motion both are off: the block simply appears.

The cells stack one per row, and inside each the number and its bars sit above the icon, heading and sentence. Nothing scrolls sideways at 320 pixels.

The cells, the headings and the sentences follow the page's direction, and each number with its sign or unit keeps its order. The was-and-now labels sit at the start and their figures at the end, in either direction.