How can the header's background of AMP's accordion be changed?

A dark theme is used for a web page. The default color theme of AMP's accordion does not look good:

<amp-accordion>
        <section>
            <h4>How can I change the header's background?</h4>
            <div>
                Test
            </div>
        </section>
        <section>
            <h4>Anybody?</h4>
            <div>
                Test
            </div>
        </section>
</amp-accordion>

The following in does not have any effect:

h4 {
    background-color: #333
}

Could anyone help?
Please note that AMP does not allow !important.

Solution

Try defining a class on the h4 and applying the background colour to that. I just got it to work in the AMP By Example playground and it didn't complain about it and changed the background colour.

h4.test {background-color: #ff0;}

  <amp-accordion>
    <section expanded>
      <h4 class="test">Section 1</h4>
      <p>Bunch of awesome content.</p>
    </section>
    <section>
      <h4 class="test">Section 2</h4>
      <div>Bunch of even more awesome content. This time in a <code>&lt;div&gt;</code>.</div>
    </section>
    <section>
      <h4 class="test">Section 3</h4>
      <figure>
        <amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="an image"></amp-img>
        <figcaption>Images work as well.</figcaption>
      </figure>
    </section>
  </amp-accordion>