:where(html) { 
  /* Highlight */
  --highlight: var(--yellow); /* base color */
  --highlight-contrast: var(--yellow-contrast); /* Opposite of the base color; should be visible against the base color */
  --highlight-shade: var(--yellow-shade); /* slightly darker version of the base color */
  --highlight-tint: var(--yellow-tint);  /* slightly lighter version of the base color */
  --highlight-text-color: var(--highlight); /* text color */
  --highlight-border-color: var(--highlight); /* border color */
}


.highlight,
.highlight-color {
  color: var(--highlight);
}
.highlight-weak,
.highlight-weak-bg {
  background-color: var(--highlight-tint);
}
.highlight-bg {
  background-color: var(--highlight);
}
.highlight-fill {
  fill: var(--highlight);
}
.highlight-stroke {
  stroke: var(--highlight);
}
.highlight-box {
  color: var(--highlight-contrast);
  background-color: var(--highlight);
  border: var(--border-width-base) var(--border-style-base) var(--highlight);
  border-radius: var(--border-radius-sharp);
}