@layer components {
  pre > code[class*='language-'] {
    display: block;
    font-family: var(--font-mono);
    font-size: inherit;
    white-space: pre;
    overflow: auto;
    tab-size: 2;
  }
}
::highlight(we-code-comment) {
  color: var(--syntax-comment);
}
::highlight(we-code-keyword) {
  color: var(--color-charcoal);
}
::highlight(we-code-number) {
  color: var(--syntax-number);
}
::highlight(we-code-string) {
  color: var(--syntax-string);
}
::highlight(we-code-function) {
  color: var(--syntax-title);
}
::highlight(we-code-tag) {
  color: var(--syntax-tag);
}
::highlight(we-code-property) {
  color: var(--syntax-attr);
}
::highlight(we-code-operator) {
  color: var(--color-muted);
}
::highlight(we-code-deleted) {
  color: #8b1727;
  background-color: #ffe5e9;
}
::highlight(we-code-inserted) {
  color: #195b30;
  background-color: #e4f6e8;
}

.spoiler {
  background: #e5e7eb;
  color: transparent;
  text-shadow: none;
  border-radius: 0.15em;
  cursor: help;
}
.spoiler:is(:hover, :focus) {
  color: inherit;
}
.spoiler:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.cms-page {
  inline-size: 100%;
  max-inline-size: 54rem;
  margin: 2rem auto;
  padding-inline: 1.25rem;
  font: var(--text-body) / var(--leading-body) var(--font-text);
}
.cms-page :is(img, video, iframe) {
  max-inline-size: 100%;
}
.cms-page img {
  block-size: auto;
}
:is(.cms-page, .post) table {
  border-collapse: collapse;
}
:is(.cms-page, .post) :is(td, th) {
  padding: 0.5rem;
  border: 1px solid var(--color-line);
}
.cms-page audio {
  max-inline-size: 100%;
}
@media print {
  .spoiler {
    color: inherit;
  }
}