.markdown-alert {
  --alert-accent: #3374bc;
  margin-block: 1.5rem;
  padding: .75rem 1rem;
  border-inline-start: .25rem solid var(--alert-accent);
  border-radius: .25rem;
  background: color-mix(in srgb, var(--alert-accent) 11%, transparent);
}

.markdown-alert-tip { --alert-accent: #348353; }
.markdown-alert-important { --alert-accent: #8757c0; }
.markdown-alert-warning { --alert-accent: #a26b12; }
.markdown-alert-caution { --alert-accent: #c14f59; }

.markdown-alert-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block: 0 .4rem;
  font-weight: 700;
}

.markdown-alert-title svg { flex: none; fill: currentColor; }
.markdown-alert > :last-child { margin-block-end: 0; }
.markdown-disclosure { margin-block: 1.25rem; padding: .5rem 1rem; border: 1px solid currentColor; border-radius: .35rem; }
.markdown-disclosure > summary { cursor: pointer; font-weight: 600; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: .2em; }
.markdown-diagram { margin-block: 1.5rem; padding: .75rem; overflow-x: auto; border-radius: .35rem; background: #f8f9fb; }
figure.markdown-diagram > img { display: block; max-width: 100%; height: auto; margin: 0 auto; box-shadow: none; }

.markdown-text-mark {
  color: inherit;
  background: color-mix(in srgb, #eab54d 38%, transparent);
}

pre[data-line] { position: relative; }
pre[data-line] > code { position: relative; display: block; min-width: 100%; width: max-content; }
pre[data-line] .line-highlight.markdown-line-highlight {
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
  background: color-mix(in srgb, #eab54d 19%, transparent);
}
