Spoiler text in Ghost

I need to use spoiler text in Ghost. That is: Text that is blacked out until you mouse over it, at which point it becomes readable. Unfortunately it doesn't support it by default. I searched but the top result was a page with a dodgy certificate and the other results were unrelated to this, stuff about tagging content in Ghost, spoiling in Discord, etc. Fortunately it's straightforward to hide spoilers with modern CSS. Here's my quick implementation:

<style>
    span.sp {
        background-color: var(--primary-text-color);
    }
    @keyframes unspoil {
        from {background-color: var(--primary-text-color);}
        to {background-color: transparent;}
    }
    span.sp:hover {
        background-color: transparent;
        animation-name: unspoil;
        animation-duration: 0.3s;
    }
</style>

This does fade-in animations on hover. It doesn't do fade-out when it loses hover. That might be nice but I don't care enough right now to search for it.

To use this, you need to insert this on your blog somehow. You can do this in a few ways. The way I plan to do it is to put it in a post directly by inserting an HTML block. Alternatively, if you want it available on all posts by default, plop this tag in your header/footer, or put the CSS in your CSS theme, or wherever you want it.

Assuming you've done that, here's how you use it to spoil text. Insert an HTML block, write your spoiler text in a tag <span class="sp">. Boom, your text is spoiler-tagged.

Example: Test me!