Paragraph with growing highlights

The component is self-contained: one file, zero dependencies, palette in local --vibeui-text-003-* variables. It takes the theme from the environment via light-dark() plus a rule for the .dark class. The paragraph arrives as a single string in the text prop and is split into words right here; the highlighted parts are given as words in highlights rather than indices: the component looks for each phrase as a consecutive chain of words, compared without surrounding punctuation. A word reveals with translateY(30%) → 0, blur(10px) → 0, opacity 0 → 1 over 550 ms on cubic-bezier(0.16,1,0.3,1), delayed by calc(45 ms * word index). The highlight grows from the left edge (transform-origin:left) — scaleX 0.78 → 1 and opacity over 300 ms on a spring written out as linear() points; the word under it switches to the accent color (--vibeui-text-003-accent-text) while the backdrop stays lighter than the accent, since accent on accent would not read. A client timer runs the round: it starts once the paragraph has settled, lights the phrases step seconds apart, holds the assembled summary for 1.8 s, clears everything at once and starts again after a 0.7 s pause. Under prefers-reduced-motion the timer never starts and the whole summary is shown at once. The lit state arrives inline (opacity, transform and the word color) rather than through a rule on a data attribute: a re-render flips the attributes of the word and its backdrop at once, and such a rule was recomputed one step behind. The data-on and data-edge attributes stay in the markup as a hook for outside styles.