STYLE section inside VTT file

Sorry for the newbie question… I’m confused about using the STYLE section in a WebVTT file.

There’s quite a bit of documentation and postings about the STYLE section inside a VTT file. It boils down to something like this (for example):

WEBVTT

STYLE
::cue(.red){ color: red; }


1
00:00:00.100 --> 00:00:50.000
<c.red>This should be a red caption</c>

My tests with Safari/Chrome/Firefox (all Mac) all fail to render the red caption.  However, putting that same style markup in the CSS within the HTML all succeed in rendering the red caption. I’m sure I’m missing something obvious.  Caption vendors will typically be able to deliver a WebVTT file to a client, but have no access to underlying HTML. It should never be necessary for the Webmaster to modify HTML in order to display captions properly.


For a demonstration of my problem, point a browser at:

https://s3-us-west-2.amazonaws.com/ncamftp.wgbh.org/brad/webvtt/capswithstyles.html



What am I doing wrong?

Thanks.

— Brad