[data-md-color-scheme="slate"] {
  --md-code-hl-variable-color: #ffa585;
  --md-default-bg-color: hsla(var(--md-hue), 15%, 10%, 1);
}
[data-md-color-scheme="default"] {
  --md-code-hl-variable-color: #a32c00;
}

[data-md-color-scheme="default"] img[src$="_d.svg"],
[data-md-color-scheme="slate"] img[src$="_l.svg"] {
  display: none;
}

.typst-preview {
  display: flex;
  gap: 1em;
  margin: 0 0 1em;
  flex-wrap: wrap;
}

.typst-preview > .typst-source {
  margin: 0;
  overflow-x: auto;
  flex: 1;
}

.typst-preview > .typst-source > .highlight,
.typst-preview > .typst-source > .highlight > :is(pre, .highlighttable) {
  height: 100%;
}

.typst-preview > .typst-source > .highlight > :is(.highlighttable, pre) {
  background: var(--md-code-bg-color);
}

.typst-preview > .typst-source > .highlight > .highlighttable {
  margin: 0;
}

.typst-preview > .typst-source > .highlight > pre {
  margin: 0;
  height: 100%;
}

.typst-preview > .preview {
  background: var(--md-code-bg-color);
  display: flex;
  align-items: center;
}

.typst-preview.vertical > * {
  min-width: 100%;
}

.typst-preview > p {
  display: none;
}

@media screen and (max-width: 700px) {
  .typst-preview > * {
    min-width: 100%;
  }
}

details .md-annotation > .md-tooltip {
  width: auto;
  max-width: 10rem;
}

.typst-preview .typst-source {
  overflow-y: hidden; /* TODO: this doesn't look right */
}