CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875em;
  font-variant-ligatures: common-ligatures;
}

pre {
  background: #1C1A17;
  color: #F2EDE4;
  padding: 1.25rem 1.5rem;
  border-radius: 0.625rem;
  overflow-x: auto;
  line-height: 1.7;
}

:not(pre) > code {
  background: rgba(196, 100, 10, 0.10);
  color: #C4640A;
  padding: 0.15em 0.4em;
  border-radius: 0.25em;
}