/* Article body: load after tokens.css and article chrome styles.
   CommonMark / GFM HTML uses .article-prose; editorial extensions are opt-in.
   Keep the site header, article title, related links and CV outside this wrapper. */
.article-prose {
  color: var(--foreground);
  font: 400 1rem/1.9 var(--font-sans);
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}
.article-prose > :first-child { margin-top: 0; }
.article-prose > :last-child { margin-bottom: 0; }
.article-prose :is(h1, h2, h3, h4, h5, h6) {
  display: block;
  margin: 2.5rem 0 1rem;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.55;
  text-wrap: balance;
  scroll-margin-top: 6rem;
}
.article-prose :is(h1, .heading-example) { font-size: clamp(1.5rem, 4.4vw, 2.125rem); }
.article-prose h2 {
  font-family: "Mochiy Pop One", var(--font-sans);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.5;
}
.article-prose .specimen-label { margin: 1.5rem 0 .5rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 700; }
.article-prose h3 { font-size: 1.125rem; }
.article-prose h4 { font-size: 1rem; }
.article-prose h5 { font-size: .9375rem; }
.article-prose h6 { font-size: .875rem; }
.article-prose :is(h3, h4, h5, h6) { margin-top: 2rem; }
.article-prose p { margin: 0 0 1.25rem; }
.article-prose .article-lead { max-width: none; margin: 0 0 1.5rem; padding: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.85; }
.article-prose strong { font-weight: 800; }
.article-prose em { font-style: italic; }
.article-prose :is(del, s) { text-decoration-thickness: 1px; }
.article-prose mark { padding: .05em .15em; background: var(--accent); color: var(--foreground); box-decoration-break: clone; -webkit-box-decoration-break: clone; border-bottom: 2px solid var(--primary); }
.article-prose small { font-size: .8125em; }
.article-prose a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--muted-foreground); text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.article-prose a:hover { text-decoration-color: var(--foreground); text-decoration-thickness: 2px; background: var(--accent); }
.article-prose :focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: .2rem; }
.article-prose :is(ul, ol) { margin: 0 0 1.25rem; padding-inline-start: 1.6rem; }
.article-prose li { margin: .4rem 0; padding-inline-start: .1rem; }
.article-prose li::marker { color: var(--brand-brown); font-weight: 700; }
.article-prose li > :is(ul, ol) { margin-block: .5rem; }
.article-prose li > p { margin-block: .5rem; }
.article-prose .contains-task-list { padding-inline-start: 0; list-style: none; }
.article-prose .task-list-item { padding-inline-start: 1.6rem; position: relative; }
.article-prose .task-list-item > input[type="checkbox"],
.article-prose .task-list-item > label > input[type="checkbox"] { position: absolute; inset-inline-start: 0; top: .45em; width: 1rem; height: 1rem; margin: 0; accent-color: var(--foreground); opacity: 1; }
.article-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--muted); }
.article-prose blockquote blockquote { margin: 1rem 0; border-inline-start-color: var(--input); background: var(--background); }
.article-prose blockquote > :last-child { margin-bottom: 0; }
.article-prose blockquote cite { display: block; margin-top: .75rem; font-size: .8125rem; font-style: normal; color: var(--muted-foreground); }
.article-prose hr { height: 0; margin: 2.5rem 0; border: 0; border-top: 1px solid var(--border); }
.article-prose :is(code, pre, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; }
.article-prose :not(pre) > code { padding: .15em .35em; border: 1px solid var(--border); border-radius: .3rem; background: var(--muted); overflow-wrap: anywhere; }
.article-prose pre { max-width: 100%; margin: 1.5rem 0; padding: 1.25rem; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); line-height: 1.75; tab-size: 2; white-space: pre; word-break: normal; overflow-wrap: normal; }
.article-prose pre code { padding: 0; border: 0; border-radius: 0; font-size: 1em; white-space: inherit; word-break: inherit; overflow-wrap: inherit; }
.article-prose img { display: block; max-width: 100%; height: auto; margin-block: 1.5rem; border-radius: var(--radius-md); }
.article-prose figure { margin: 1.75rem 0; }
.article-prose figure img { width: 100%; margin: 0; }
.cms-article .article-prose figure img.cms-portrait { max-width: 20rem; margin-inline: auto; }
.cms-article .article-prose .af-highlight { color: inherit; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--primary) 70%, transparent) 58%); padding: 0 .06em; border-radius: .1em; border-bottom: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.article-prose figcaption { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.75; color: var(--muted-foreground); text-align: center; }
.article-prose .article-table-scroll { max-width: 100%; margin: 1.5rem 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.article-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.75; text-align: left; }
.article-prose table.article-table--wide { min-width: 44rem; }
.article-prose .article-table--wide :is(th, td) { min-width: 8rem; }
.article-prose table code { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.article-prose caption { padding: .875rem 1rem; font-size: .875rem; font-weight: 800; text-align: start; background: var(--card); }
.article-prose :is(th, td) { padding: .8rem 1rem; border-top: 1px solid var(--border); vertical-align: top; }
.article-prose thead { background: var(--accent); }
.article-prose th { font-weight: 800; }
.article-prose tbody tr:nth-child(even) { background: var(--background); }
.article-prose :is(th, td)[align="center"] { text-align: center; }
.article-prose :is(th, td)[align="right"] { text-align: right; }
.article-prose :is(th, td)[align="left"] { text-align: left; }
.article-prose dl { margin: 1.5rem 0; }
.article-prose dt { margin-top: 1rem; font-weight: 800; }
.article-prose dd { margin: .35rem 0 1rem 1.25rem; }
.article-prose details { margin: 1.25rem 0; padding: 0 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.article-prose summary,
.article-toc summary { position: relative; display: block; min-height: 44px; padding: 1rem 1.75rem 1rem 0; cursor: pointer; font-weight: 800; line-height: 1.7; list-style: none; word-break: normal; }
.article-prose summary::-webkit-details-marker,
.article-toc summary::-webkit-details-marker { display: none; }
.article-prose summary::after,
.article-toc summary::after { content: ""; position: absolute; right: .2rem; top: 50%; width: .5rem; height: .5rem; border-right: 2px solid var(--brand-brown); border-bottom: 2px solid var(--brand-brown); transform: translateY(-70%) rotate(45deg); }
.article-prose details[open] > summary::after,
.article-toc details[open] > summary::after { transform: translateY(-20%) rotate(225deg); }
.article-prose details[open] > summary { margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.article-prose details[open] { padding-bottom: .25rem; }
.article-prose kbd { padding: .15em .4em; border: 1px solid var(--input); border-bottom-width: 2px; border-radius: .3rem; background: var(--card); white-space: nowrap; }
.article-prose :is(sup, sub) { font-size: .75em; line-height: 0; }
.article-prose abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
.article-prose ruby { ruby-position: over; }
.article-prose rt { font-size: .6em; }
.article-prose .article-callout { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--border); border-inline-start: 4px solid var(--input); border-radius: var(--radius-md); background: var(--muted); font-size: .9375rem; }
.article-prose .article-callout[data-kind="tip"] { background: var(--cream); border-inline-start-color: var(--brand-brown); }
.article-prose .article-callout[data-kind="important"] { background: var(--accent); border-inline-start-color: var(--primary); }
.article-prose .article-callout[data-kind="warning"] { background: var(--maybe-soft); border-inline-start-color: var(--maybe-ink); }
.article-prose .article-callout[data-kind="caution"] { background: var(--repeat-soft); border-inline-start-color: var(--destructive); }
.article-prose .article-callout .callout-title { margin: 0 0 .5rem; font-size: .9375rem; font-family: var(--font-sans); font-weight: 800; }
.article-prose .article-callout > :last-child { margin-bottom: 0; }
.article-prose .article-footnotes { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .8125rem; line-height: 1.8; }
.article-prose .article-footnotes :is(h2, h3) { margin: 0 0 .75rem; font-family: var(--font-sans); font-size: .9375rem; font-weight: 800; }
.article-prose :is([role="doc-noteref"], [role="doc-backlink"]) { display: inline-block; min-width: 1.5em; text-align: center; }
.article-prose [role="doc-backlink"] { min-width: 32px; min-height: 32px; margin-inline-start: .25rem; line-height: 32px; }
.article-prose [role="doc-noteref"] { min-width: 24px; min-height: 24px; line-height: 24px; }
.article-prose [id] { scroll-margin-top: 6rem; }
/* Optional renderer outputs; no math or diagram renderer is bundled. */
.article-prose .article-math { max-width: 100%; margin: 1.5rem 0; padding: 1rem; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.article-prose .article-math > math { min-width: max-content; margin-inline: auto; }
.article-prose .article-diagram { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.article-prose .article-diagram :is(svg, img) { display: block; max-width: 100%; height: auto; margin-inline: auto; }
/* Shared article contents. The existing Ueno design is preserved. */
.article-toc { margin: 1rem 0 2rem; padding: 1.25rem; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: var(--radius-md); background: var(--card); }
.article-body .article-toc h2 { margin: 0 0 .5rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 800; line-height: 1.5; }
.article-body .article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; }
.article-body .article-toc li { margin: 0; }
.article-toc li + li { border-top: 1px solid var(--border); }
.article-toc a { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .65rem 0; font-size: .9375rem; font-weight: 700; line-height: 1.65; text-decoration: none; }
.article-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.article-toc a:hover { text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; }
.article-toc a:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.article-toc--collapsible { padding-block: 0; }
.article-toc--collapsible summary { font-size: 1rem; }
.article-toc--collapsible summary span { margin-inline-start: .5rem; color: var(--muted-foreground); font-size: .8125rem; font-weight: 500; }
.article-toc--collapsible details[open] > summary { border-bottom: 1px solid var(--border); }
.article-toc--collapsible details[open] { padding-bottom: .5rem; }
.article-toc summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); }
.article-section { scroll-margin-top: 6rem; }
@media (max-width: 640px) {
  .article-toc { padding: 1rem; }
  .article-toc--collapsible { padding-block: 0; }
  .article-prose :is(blockquote, pre, .article-callout) { padding: .875rem 1rem; }
  .article-prose blockquote blockquote { padding-inline: .75rem; }
  .article-prose :is(th, td) { padding: .65rem .75rem; }
}
@media print {
  .article-prose details > :not(summary) { display: block; }
  .article-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .article-prose .article-table-scroll { overflow: visible; }
}