.h-blog-prose .h-blog-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-inset);
}
.h-blog-prose .h-blog-table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.h-blog-prose table {
  display: table;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.h-blog-prose th,
.h-blog-prose td {
  padding: 12px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  min-width: 8rem;
}
.h-blog-prose th:not([align]),
.h-blog-prose td:not([align]) { text-align: left; }
.h-blog-prose th {
  background: var(--bg-inset);
  color: var(--fg);
  font-weight: 600;
}
.h-blog-prose figure { margin: 1.5em 0; }
.h-blog-prose img { max-width: 100%; height: auto; }
.h-blog-prose figure > img { display: block; margin-inline: auto; }
.h-blog-prose .h-blog-image-link { display: block; width: fit-content; max-width: 100%; margin-inline: auto; }
.h-blog-prose .h-blog-image-link img { display: block; }
.h-blog-prose figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  text-align: center;
  color: color-mix(in srgb, var(--fg-mute) 90%, var(--fg-faint));
}


.h-blog-prose pre {
  max-width: 100%;
  margin: 1.5em 0;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.h-blog-prose pre > code {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.h-blog-prose pre[data-language="text"] {
  
  background-color: var(--bg-inset) !important;
  color: var(--fg) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.h-blog-prose pre[data-language="text"] > code { white-space: inherit; }
@media (max-width: 600px) {
  .h-blog-prose pre { padding: 16px; }
}