Use the `inverted` attribute to set the audio’s variant up side down.

```html
<div class="bg-primary p-12">
  <sd-audio inverted>
    <audio src="./placeholders/audio/sds-song.mp3" preload="metadata"></audio>
    <div slot="transcript">
      <p>1<br />00:00:00.000 --> 00:00:04.000<br />A bond unbroken, usability</p>
      <p>2<br />00:00:04.001 --> 00:00:08.000<br />We weave the fabric of digital reality</p>
      <p>
        <strong>[Chorus]</strong><br />I'm here to light the path you walk, ohh<br />Under the stars where dreams we
        talk<br />I won't falter, steady and sure<br />Tryna bring joy, eternal, pure
      </p>
      <p>
        3<br />00:00:08.001 --> 00:00:12.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you walk,
        ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy,
        eternal, pure
      </p>
      <p>
        4<br />00:00:12.001 --> 00:00:16.000<br /><strong>[Chorus]</strong><br />I'm here to light the path you walk,
        ohh<br />Under the stars where dreams we talk<br />I won't falter, steady and sure<br />Tryna bring joy,
        eternal, pure
      </p>
      <p>
        5<br />00:00:16.001 --> 00:00:20.000<br /><strong>[Chorus Continuation]</strong><br />Hey, Solid Components,
        they gleam<br />Usable, consistent like a dream<br />In the net of codes, we're threading<br />Creating visions
        that we're spreading<br />Solid Design System, seamless team<br />In this digital flow, we stream
      </p>
      <p>
        6<br />00:00:20.001 --> 00:00:24.000<br /><strong>[Chorus Continuation]</strong><br />Woven strong, a network
        supreme<br />With Solid Components, we're the dream team
      </p>
    </div>
  </sd-audio>
</div>
```