How a CSS substring selector silently broke a balance puzzle's triangle shape

A developer at a software team traced two subtle UI bugs to an overly broad CSS attribute selector using the substring match pattern `[class*='border-t']`, which unintentionally targeted unrelated Tailwind utility classes like `border-teal-500` and `border-transparent`. Because CSS triangles are constructed entirely from borders, stripping the top border via a global `!important` override deleted a fulcrum triangle in a balance puzzle rather than merely resizing it. A teal-bordered circle also lost its top edge, but the invisible nature of global overrides meant neither issue triggered any automated test. The fix required just one character of change — switching to an exact class selector `.border-t` — to prevent unrelated classes sharing the same prefix from being matched. The incident highlights a key rule for utility-CSS frameworks: before using a substring attribute selector, verify that no other framework class contains the same string.