<pre><span><code class="hljs"><span class="hljs-selector-tag">section</span><span class="hljs-selector-class">.has-pullquote</span> {
  <span class="hljs-attribute">animation</span>: reveal linear both;
  <span class="hljs-attribute">animation-timeline</span>: <span class="hljs-built_in">view</span>();
  <span class="hljs-attribute">animation-range</span>: cover <span class="hljs-number">0%</span> cover <span class="hljs-number">100%</span>;
}</code></span></pre>

html {
  color-scheme: light dark;

  --colorAdjuster: -0.1;
  @media (prefers-color-scheme: light) {
    --colorAdjuster: 0.133;
  }
}

.hljs-keyword,
.hljs-function,
.hljs-selector-tag,
.hljs-selector-class,
.hljs-name {
  color: oklch(calc(0.75 - var(--colorAdjuster)) 0.2 328);
}
.hljs-attr,
.hljs-built_in,
.hljs-class {
  color: oklch(calc(0.75 - var(--colorAdjuster)) 0.2 200);
}
.hljs-params,
.hljs-attribute {
  opacity: 0.9;
  color: oklch(calc(0.75 - var(--colorAdjuster)) 0.2 140);
}
.hljs-string,
.hljs-number {
  opacity: 0.77;
  color: oklch(calc(0.75 - var(--colorAdjuster)) 0.2 50);
}
.hljs-comment {
  opacity: 0.65;
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}