/* Shared by the writer preview and published articles. Keep layout here;
   each application supplies its theme through the --md-* color variables. */
.markdown-content {
  --md-image-margin: 0;
  color: var(--md-text);
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", monospace;
  font-size: var(--md-font-size, 1.05rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.04em;
  text-align: start;
  overflow-wrap: anywhere;
}

.markdown-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--md-heading);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.35;
}

.markdown-content [id] {
  scroll-margin-top: 5rem;
}

.markdown-content h1 {
  font-size: 1.333333em;
  margin: 0 0 1.071429em;
  padding-bottom: 0.214286em;
  border-bottom: 1px solid var(--md-border);
}

.markdown-content h2 {
  font-size: 1.142857em;
  margin: 1.25em 0 0.833333em;
}

.markdown-content h3 {
  font-size: 1.047619em;
  margin: 1.090909em 0 0.727273em;
}

.markdown-content :is(h4, h5, h6) {
  font-size: 0.952381em;
  margin: 1em 0 0.6em;
}

.markdown-content p {
  margin: 0 0 1.142857em;
}

/* Line breaks use their normal line box; paragraphs supply block spacing. */
.markdown-content br {
  display: inline;
  margin: 0;
}

.markdown-content blockquote {
  border-left: 3px solid var(--md-border-strong);
  padding-left: 0.952381em;
  margin: 1.142857em 0;
  color: var(--md-secondary);
  font-style: italic;
}

.markdown-content pre {
  background: var(--md-code-bg);
  border: 1px solid var(--md-border);
  padding: 0.952381em;
  border-radius: 3px;
  overflow-x: auto;
  margin: 1.142857em 0;
  font-family: inherit;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  text-align: start;
}

.markdown-content code {
  background: var(--md-code-bg);
  border: 1px solid var(--md-border);
  padding: 0.15873em 0.37037em;
  border-radius: 2px;
  font-family: inherit;
  font-size: 0.9em;
  color: var(--md-code-text);
}

.markdown-content pre code {
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  white-space: inherit;
}

.markdown-content a {
  color: var(--md-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.markdown-content a:hover {
  color: var(--md-link-hover);
}

.markdown-content hr {
  border: none;
  border-top: 1px solid var(--md-border);
  margin: 1.904762em 0;
}

.markdown-content :is(ul, ol) {
  margin: 0 0 1.142857em 1.428571em;
  padding: 0;
}

.markdown-content li {
  margin-bottom: 0.380952em;
}

.markdown-content li > :is(ul, ol) {
  margin-top: 0.380952em;
  margin-bottom: 0.380952em;
}

.markdown-content li > p {
  margin-bottom: 0.761905em;
}

.markdown-content li:has(> input[type="checkbox"]),
.markdown-content li:has(> p > input[type="checkbox"]),
.markdown-content .task-list-item {
  list-style: none;
}

.markdown-content input[type="checkbox"] {
  accent-color: var(--md-accent);
  width: 0.833333em;
  height: 0.833333em;
  margin: 0 0.4em 0 -1.233333em;
  font-size: inherit;
  vertical-align: -0.05em;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  margin: 1.142857em 0;
  margin-inline: var(--md-image-margin);
}

.markdown-content p > img:only-child {
  margin-block: 0;
}

.markdown-content .img-sm {
  max-width: min(250px, 100%);
}

.markdown-content .img-md {
  max-width: min(450px, 100%);
}

.markdown-content .img-lg {
  max-width: min(650px, 100%);
}

.markdown-content .img-full {
  max-width: 100%;
}

.markdown-content .markdown-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.142857em 0;
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.904762em;
  line-height: inherit;
  overflow-wrap: normal;
  text-align: start;
}

.markdown-content :is(th, td) {
  border: 1px solid var(--md-border);
  padding: 0.473684em 0.736842em;
  text-align: start;
}

.markdown-content :is(th, td)[align="left"] {
  text-align: left;
}

.markdown-content :is(th, td)[align="center"] {
  text-align: center;
}

.markdown-content :is(th, td)[align="right"] {
  text-align: right;
}

.markdown-content th {
  background: var(--md-table-heading-bg);
  color: var(--md-heading);
  font-weight: 700;
}

.markdown-content :is(strong, b) {
  font-weight: 700;
  color: var(--md-heading);
}

.markdown-content :is(em, i) {
  font-style: italic;
}

.markdown-content del {
  text-decoration: line-through;
  opacity: 0.6;
}

.markdown-content u {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.markdown-content :is(sup, sub) {
  font-size: 0.7em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.markdown-content sup {
  top: -0.5em;
}

.markdown-content sub {
  bottom: -0.25em;
}

.markdown-content :is(center, [data-md-align]) {
  margin-block: 1.142857em;
}

.markdown-content [data-md-align] {
  --md-image-margin: 0;
}

.markdown-content center {
  display: block;
  text-align: center;
}

.markdown-content :is(center, [data-md-align="center"]) {
  --md-image-margin: auto;
}

.markdown-content [data-md-align="center"] {
  text-align: center;
}

.markdown-content [data-md-align="right"] {
  --md-image-margin: auto 0;
  text-align: right;
}

.markdown-content [data-md-align="left"] {
  --md-image-margin: 0 auto;
  text-align: left;
}

.markdown-content [data-md-align="justify"] {
  --md-image-margin: 0 auto;
  text-align: justify;
}

/* Nested blocks should not add extra gaps at their container's edges. */
.markdown-content > :first-child,
.markdown-content :is(blockquote, li, center, [data-md-align]) > :first-child {
  margin-top: 0;
}

.markdown-content > :last-child,
.markdown-content :is(blockquote, li, center, [data-md-align]) > :last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .markdown-content a {
    transition: none;
  }
}