.back-home {
  max-width: 1rem;
  max-height: 1rem;
  color: var(--text-color-primary);
}

.back-home a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.header {
  font-family: var(--font-family-heading);
}

.header h1,
.header h2,
.header h3 {
  color: var(--text-color-primary);
  font-family: var(--font-family-heading), serif;
  font-weight: bold;
}

.header h1.title {
  font-size: 2.33rem;
  margin: 0 0 0.5rem 0;
  text-align: center;
}

.header h2.subtitle {
  font-size: 1.5rem;
  margin: 0.25rem 0 1rem 0;
  text-align: center;
}

.header h3.date {
  font-size: 1.1rem;
  margin: 0;
  text-align: end;
}

.header .category-and-keywords {
  display: flex;
  font-family: var(--font-family-label), sans-serif;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 4rem;
}

.header .category,
.header .keyword {
  display: inline-block;
  color: var(--label-color);
  font-size: 0.67rem;
  background-color: var(--bg-color-label);
  border-radius: 10px;
  padding: 0.2rem 0.5rem 0.3rem 0.5rem;
  margin: 0 0 0.5rem 0;
  line-height: 1;
  text-align: center;
  word-wrap: nowrap;
  white-space: nowrap;
}

.header .keywords {
  display: flex;
  flex-wrap: wrap-reverse;
  color: var(--label-color);
  margin-left: auto;
  justify-items: flex-end;
  align-items: flex-end;
  flex-direction: row-reverse;
}

.header hr {
  color: var(--hr-color);
  margin: 0.5rem 0 0.5rem 0;
}

.vertical-break {
  height: 1rem;
  border: none;
}

.body {
  font-family: var(--font-family-base);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.body p {
  color: var(--text-color-secondary);
  font-size: 1.15rem;
  font-family: var(--font-family-base), serif;
  margin: 0.67rem 0;
  line-height: 1.67;
  text-align: start;
}

.body strong {
  font-weight: 800;
}

.body em {
  font-family: var(--font-family-italic), serif;
  font-style: normal;
}

.body del {
  text-decoration: line-through;
  text-decoration-color: inherit;
}

.body h1,
.body h2,
.body h3,
.body h4,
.body h5,
.body h6 {
  color: var(--text-color-primary);
  font-family: var(--font-family-heading), serif;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.body h1 {
  font-size: 1.85rem;
  margin: 1.33rem 0;
}

.body h1::before {
  content: "#";
  margin-right: 0.6rem;
  opacity: var(--md-opacity-heading);
  transition: 0.5s normal;
}

.body h1:hover::before {
  opacity: 1;
}

.body h2 {
  font-size: 1.67rem;
  margin: 1rem 0;
}

.body h2::before {
  content: "##";
  margin-right: 0.6rem;
  opacity: var(--md-opacity-heading);
  transition: 0.5s normal;
}

.body h2:hover::before {
  opacity: 1;
}

.body h3 {
  font-size: 1.5rem;
  margin: 0.83rem 0;
}

.body h3::before {
  content: "###";
  margin-right: 0.6rem;
  opacity: var(--md-opacity-heading);
  transition: 0.5s normal;
}

.body h3:hover::before {
  opacity: 1;
}

.body h4 {
  font-size: 1.33rem;
  margin: 0.83rem 0;
}

.body h4::before {
  content: "####";
  margin-right: 0.6rem;
  opacity: var(--md-opacity-heading);
  transition: 0.5s normal;
}

.body h4:hover::before {
  opacity: 1;
}

.body h5 {
  font-size: 1.25rem;
  margin: 0.83rem 0;
}

.body h5::before {
  content: "#####";
  margin-right: 0.6rem;
  opacity: var(--md-opacity-heading);
  transition: 0.5s normal;
}

.body h5:hover::before {
  opacity: 1;
}

.body h6 {
  font-size: 1.2rem;
  margin: 0.83rem 0;
}

.body h6::before {
  content: "######";
  margin-right: 0.6rem;
  opacity: var(--md-opacity-heading);
  transition: 0.5s normal;
}

.body h6:hover::before {
  opacity: 1;
}

.body h1.note-label::after,
.body h2.note-label::after,
.body h3.note-label::after,
.body h4.note-label::after,
.body h5.note-label::after,
.body h6.note-label::after {
  display: inline-block;
  margin-left: auto;
  width: fit-content;
  height: min-content;
  content: "~N~";
  color: var(--text-color-label-note);
  font-family: var(--font-family-mono), monospace;
  text-align: center;
}

.body h1.tip-label::after,
.body h2.tip-label::after,
.body h3.tip-label::after,
.body h4.tip-label::after,
.body h5.tip-label::after,
.body h6.tip-label::after {
  display: inline-block;
  margin-left: auto;
  width: fit-content;
  height: min-content;
  content: ">T<";
  color: var(--text-color-label-tip);
  font-family: var(--font-family-mono), monospace;
  text-align: center;
}

.body h1.important-label::after,
.body h2.important-label::after,
.body h3.important-label::after,
.body h4.important-label::after,
.body h5.important-label::after,
.body h6.important-label::after {
  display: inline-block;
  margin-left: auto;
  width: fit-content;
  height: min-content;
  content: "*I*";
  color: var(--text-color-label-important);
  font-family: var(--font-family-mono), monospace;
  text-align: center;
}

.body h1.warning-label::after,
.body h2.warning-label::after,
.body h3.warning-label::after,
.body h4.warning-label::after,
.body h5.warning-label::after,
.body h6.warning-label::after {
  display: inline-block;
  margin-left: auto;
  width: fit-content;
  height: min-content;
  content: "!W!";
  color: var(--text-color-label-warning);
  font-family: var(--font-family-mono), monospace;
  text-align: center;
}

.body h1.caution-label::after,
.body h2.caution-label::after,
.body h3.caution-label::after,
.body h4.caution-label::after,
.body h5.caution-label::after,
.body h6.caution-label::after {
  display: inline-block;
  margin-left: auto;
  width: fit-content;
  height: min-content;
  content: "\\C/";
  color: var(--text-color-label-caution);
  font-family: var(--font-family-mono), monospace;
  text-align: center;
}

.body a {
  color: var(--link-color);
  text-decoration: none;
}

.body a::before {
  content: "[";
  font-family: var(--font-family-mono), monospace;
  opacity: var(--md-opacity-link);
  transition: 0.5s normal;
}

.body a::after {
  content: "]";
  font-family: var(--font-family-mono), monospace;
  opacity: var(--md-opacity-link);
  transition: 0.5s normal;
}

.body a:hover::before,
.body a:hover::after {
  opacity: 1;
}

.body .footnote-reference a {
  color: var(--link-color-footnote);
}

.body .footnote-reference a::before {
  content: "[^";
}

.body .footnote-definition {
  display: flex;
  align-items: flex-start;
  column-gap: 0.25rem;
  margin: 1rem 0;
}

.body .footnote-definition sup.footnote-definition-label {
  color: var(--link-color-footnote);
  vertical-align: baseline;
  font-family: var(--font-family-mono), monospace;
  font-size: 0.83rem;
  position: relative;
}

.body .footnote-definition sup.footnote-definition-label::before {
  content: "[^";
}
.body .footnote-definition sup.footnote-definition-label::after {
  content: "]";
}

.body .footnote-definition p {
  display: inline;
  font-size: 0.9rem;
  margin: auto 0;
}

.body code {
  font-family: var(--font-family-mono), monospace;
  font-size: inherit;
}

.body code::before {
  content: "`";
  font-weight: bold;
  opacity: var(--md-opacity-code);
}

.body code::after {
  content: "`";
  font-weight: bold;
  opacity: var(--md-opacity-code);
}

.body code:hover::before,
.body code:hover::after {
  opacity: 1;
}

.body pre {
  color: var(--text-color-secondary);
  font-size: 1rem;
  margin: 1rem 0;
  padding: 0.83rem 1rem;
  background-color: var(--bg-color-block);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.body pre code {
  font-size: 1rem;
  font-family: var(--font-family-mono), monospace;
}

.body pre code::before,
.body pre code::after {
  content: none;
}

.body ol {
  list-style: none;
  padding-inline-start: 1.2rem;
  counter-reset: ol-counter;
}

.body ol li {
  color: var(--text-color-secondary);
  counter-increment: ol-counter;
  font-size: 1.1rem;
  font-family: var(--font-family-base), serif;
  margin: 0.5rem 0;
  overflow: hidden;
  line-height: inherit;
}

.body ol li::before {
  content: counter(ol-counter) ". ";
  font-family: var(--font-family-mono), monospace;
  opacity: var(--md-opacity-list);
  transition: 0.5s normal;
  float: inline-start;
  margin-right: 0.5em;
  line-height: inherit;
}

.body ol li:hover::before {
  opacity: 1;
}

.body ul {
  list-style-type: none;
  padding-inline-start: 1.2rem;
}

.body ul li {
  color: var(--text-color-secondary);
  font-size: 1.1rem;
  font-family: var(--font-family-base), serif;
  margin: 0.5rem 0;
  overflow: hidden;
  line-height: inherit;
}

.body ul li::before {
  content: "* ";
  font-family: var(--font-family-mono), monospace;
  font-weight: bold;
  opacity: var(--md-opacity-list);
  transition: 0.5s normal;
  float: inline-start;
  margin-right: 0.5em;
  line-height: inherit;
}

.body ul li:hover::before {
  opacity: 1;
}

.body li p {
  margin: 0;
  word-break: break-word;
  line-height: inherit;
}

.body dl {
  margin: 1rem 0 1rem 1.5rem;
  font-family: var(--font-family-base), serif;
}

.body dl dt {
  color: var(--text-color-primary);
  font-weight: bold;
  font-size: large;
  border-left: 0.3rem solid;
  padding: 0.25rem 0.7rem;
}

.body dl dd {
  color: var(--text-color-secondary);
  margin-left: auto;
  border-left: 0.1rem dotted;
  padding: 0.5rem 2rem;
}

.body hr {
  color: var(--hr-color);
  margin: 1.5rem 0;
}

.body blockquote {
  margin: 0.83rem 0 0.83rem 0;
  padding-left: 1rem;
}

.body blockquote p::before {
  content: "> ";
  font-family: var(--font-family-mono), serif;
  font-weight: bold;
  opacity: var(--md-opacity-blockquote);
}

.body blockquote.markdown-alert-note p::before,
.body blockquote.markdown-alert-tip p::before,
.body blockquote.markdown-alert-important p::before,
.body blockquote.markdown-alert-warning p::before,
.body blockquote.markdown-alert-caution p::before {
  content: none;
}

.body blockquote.markdown-alert-note {
  margin: 1rem 0;
  padding: 0 1rem;
  background-color: var(--bg-color-blockquote-note);
  border: 0.1rem solid var(--border-color-blockquote-note);
  border-radius: 10px;
}

.body blockquote.markdown-alert-tip {
  margin: 1rem 0;
  padding: 0 1rem;
  background-color: var(--bg-color-blockquote-tip);
  border: 0.1rem solid var(--border-color-blockquote-tip);
  border-radius: 10px;
}

.body blockquote.markdown-alert-important {
  margin: 1rem 0;
  padding: 0 1rem;
  background-color: var(--bg-color-blockquote-important);
  border: 0.1rem solid var(--border-color-blockquote-important);
  border-radius: 10px;
}

.body blockquote.markdown-alert-warning {
  margin: 1rem 0;
  padding: 0 1rem;
  background-color: var(--bg-color-blockquote-warning);
  border: 0.1rem solid var(--border-color-blockquote-warning);
  border-radius: 10px;
}

.body blockquote.markdown-alert-caution {
  margin: 1rem 0;
  padding: 0 0.5rem 0 1rem;
  background-color: var(--bg-color-blockquote-caution);
  border: 0.1rem solid var(--border-color-blockquote-caution);
  border-radius: 10px;
}

.body img {
  max-width: 80%;
  max-height: 60vh;
  display: block;
  margin: 0.83rem auto;
}

.body table {
  max-width: 100%;
  margin: 1rem auto;
  border-collapse: collapse;
  overflow-x: auto;
  overflow-y: hidden;
  word-break: break-all;
}

.body thead tr th {
  color: var(--thead-color);
  font-family: var(--font-family-thead), serif;
  font-size: large;
  border: 1px solid;
  padding: 0.4rem;
}

.body tbody tr td {
  color: var(--tbody-color);
  font-family: var(--font-family-tbody), serif;
  border: 1px solid;
  padding: 0.2rem;
}

.body input[type="checkbox"]:disabled {
  transform: scale(1.2);
}