CSS Snippets styles not rendered on Live Preview only on Reading mode

[madrigal1]

Steps to reproduce

1. Add custom css for header color in headers.css in the snippets file
2. Activate snippet
3. Check on live preview mode for changed color
4. Compare with Reading mode results

Expected result

**Live preview should give the custom css color **
similar to this video [[My simple note-taking setup | Zettelkasten in Obsidian | Step-by-step guide - YouTube]]

Actual result

a) Live preview mode

b) Reading mode

c) Snippet activated

d) css

h1 .cm-header .cm-header-1 {
  /* You can't find this in any other file. */
  background: #f2709c !important;
  background: -webkit-linear-gradient(
    to right,
    #f2709c 4%,
    #ff9472 100%
  ) !important;
  background: -moz-linear-gradient(
    to right,
    #f2709c 4%,
    #ff9472 100%
  ) !important;
  background: linear-gradient(to right, #f2709c 4%, #ff9472 100%) !important !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

h2 .cm-header-2 {
  background: radial-gradient(
    circle,
    rgba(255, 239, 186, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

Environment

manjaro linux

[madrigal1]

I found a fix

the targeted classees shoudl be

.cm-s-obsidian pre.HyperMD-header-1, .markdown-preview-view h1 

this appears to apply the style