html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.article-page-shell {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
}

.article-page-shell article,
.article-page-shell .article-surface,
.article-page-shell .content-body,
.article-page-shell .content-body > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.article-surface {
  width: 100%;
  overflow: hidden;
}

@supports (overflow: clip) {
  .article-surface {
    overflow: clip;
  }
}

.content-body,
.content-body :where(p, li, h2, h3, h4, blockquote, figcaption, td, th) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.content-body a,
.content-body :where(code):not(pre code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.content-body pre {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  white-space: pre;
}

.content-body pre code {
  overflow-wrap: normal;
  word-break: normal;
}

.content-body table {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.content-body :where(th, td) {
  border: 1px solid rgba(113, 113, 122, .28);
  padding: .7rem .9rem;
}

.content-body :where(img, video, figure) {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
}

.content-body video {
  width: 100%;
}

.content-body ul,
.content-body ol {
  padding-inline-start: 1.5rem;
}

.content-body blockquote {
  border-inline-start: 4px solid rgba(113, 113, 122, .45);
  border-left: 0;
  padding-inline-start: 1rem;
  padding-left: 0;
}