/* Shared by Astro articles and the CMS preview. Keep every rule scoped. */
.article-body { color: #3b3541; font-family: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }
.article-body p { margin: 1.2em 0; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { color: #2c2336; font-weight: 650; line-height: 1.5; letter-spacing: -.025em; scroll-margin-top: 94px; }
.article-body h1 { font-size: 1.8em; margin: 1.7em 0 .7em; }
.article-body h2 { font-size: 1.5em; margin: 2.2em 0 .8em; border-left: 4px solid #7c5cff; padding-left: .6em; }
.article-body h3 { font-size: 1.23em; margin: 1.9em 0 .65em; }
.article-body h4 { font-size: 1.08em; margin: 1.6em 0 .6em; }
.article-body a { color: var(--text-muted, #52525b); text-decoration: underline; text-decoration-color: #c9b6e3; text-underline-offset: 4px; transition: color .15s ease; }
.article-body a:hover { color: var(--text-muted, #52525b); }
.article-body strong { color: #32243d; font-weight: 650; }
.article-body em { font-style: italic; }
.article-body del { color: var(--text-muted, #52525b); }
.article-body mark { color: inherit; background: #ece5ff; padding: .03em .12em; border-radius: 3px; }
.article-body .text-purple { color: #6336bf; }
.article-body .text-blue { color: #075e85; }
.article-body .text-pink { color: #9e2364; }
.article-body ul, .article-body ol { padding-left: 1.55em; margin: 1.2em 0; }
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body li { padding-left: .2em; margin: .4em 0; }
.article-body li > p { margin: .4em 0; }
.article-body li > ul, .article-body li > ol { margin: .4em 0; }
.article-body li::marker { color: var(--text-muted, #52525b); }
.article-body .contains-task-list { list-style: none; padding-left: .2em; }
.article-body .task-list-item input { appearance: auto; accent-color: #9470c9; margin-right: .7em; width: 15px; height: 15px; }
.article-body blockquote { margin: 1.7em 0; padding: .4em 1.3em; border-left: 3px solid #b89fd8; background: #f6f2fa; border-radius: 0 10px 10px 0; color: var(--text-muted, #52525b); }
.article-body blockquote p { margin: .6em 0; }
.article-body hr { margin: 2.5em 0; border: 0; border-top: 1px solid #e6deee; }
.article-body img { display: block; box-sizing: border-box; max-width: 100%; height: auto; border: 1px solid #e5ddec; border-radius: 12px; margin-inline: auto; box-shadow: 0 8px 25px -12px #402f5b26; }
.article-body :is(h2, h3, h4) { position: relative; }
.article-body .heading-anchor { position: absolute; left: -21px; top: .2em; width: 18px; font-size: .75em; font-weight: 400; color: var(--text-muted, #52525b); opacity: 0; text-decoration: none; }
.article-body .heading-anchor::before { content: '#'; }
.article-body :is(h2, h3, h4):hover .heading-anchor, .article-body .heading-anchor:focus-visible { opacity: 1; }
.article-body .zoomable-image { cursor: zoom-in; }
.article-body figure { margin: 1.8em 0; }
.article-body .figure-75 { width: 75%; margin-inline: auto; }.article-body .figure-50 { width: 50%; margin-inline: auto; }.article-body .figure-33 { width: 33.333%; margin-inline: auto; }
.article-body figcaption { margin: .8em auto 0; color: var(--text-muted, #52525b); font-size: 14px; line-height: 1.7; text-align: center; }
.article-body .article-gallery { display: grid; gap: 14px; margin: 1.8em 0; align-items: start; }
.article-body .gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-body .gallery-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-body .article-gallery figure { margin: 0; min-width: 0; }
.article-body .article-gallery img { width: 100%; }
.article-body .article-gallery p { margin: 0; }
.article-body .callout { margin: 1.8em 0; padding: 20px 24px; border: 1px solid var(--callout-border, #dbe9e2); border-radius: 12px; background: var(--callout-bg, #f1f8f4); font-size: 16px; }
.article-body .callout-tip { --callout-bg: #f0f8f3; --callout-border: #d1e8d9; --callout-title: #30633f; }
.article-body .callout-note { --callout-bg: #f0f6fc; --callout-border: #d6e5f4; --callout-title: #275a86; }
.article-body .callout-warning { --callout-bg: #fcf7e9; --callout-border: #eee0ba; --callout-title: #775410; }
.article-body .callout-important { --callout-bg: #f7f0fb; --callout-border: #e6d6f1; --callout-title: #704187; }
.article-body .callout .callout-title { display: flex; align-items: center; gap: 10px; color: var(--callout-title); font-size: 14px; font-weight: 650; margin: 0 0 9px; }
.article-body .callout-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 15px; }
.article-body .callout p { margin: .65em 0; }
.article-body .callout > :last-child { margin-bottom: 0; }
.article-body .article-details { margin: 1.7em 0; padding: 16px 22px; border: 1px solid #e3d9ed; border-radius: 12px; background: #faf7fd; font-size: 16px; }
.article-body .article-details > summary { cursor: pointer; font-weight: 600; color: var(--text-muted, #52525b); }
.article-body .article-details > :last-child:not(summary) { margin-bottom: .3em; }
.article-body .article-button { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 9px; margin: .5em 0; background: linear-gradient(110deg, #eee7fc, #e6f2fb); color: #6336bf; text-decoration: none; font-size: 14px; font-weight: 600; }
.article-body .article-button:hover { color: #4e279d; filter: brightness(.98); }
.article-body .article-video { margin: 1.8em 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; border: 1px solid #e7dded; background: #f3edf8; }
.article-body .article-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.article-body .video-link { display: block; padding: 18px 22px; margin: 1.6em 0; border: 1px solid #e1d7eb; border-radius: 12px; font-size: 15px; background: #f8f4fc; }
.article-body .video-unavailable { padding: 18px; border: 1px dashed #dfd4e8; border-radius: 10px; color: var(--text-muted, #52525b); font-size: 14px; }
.article-body :not(pre) > code { padding: .16em .35em; border-radius: 5px; color: var(--text-muted, #52525b); background: #f6edf3; font-size: .86em; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.article-body .code-block { margin: 1.7em 0; border: 1px solid #e5ddec; border-radius: 12px; overflow: hidden; background: #fff; }
.article-body .code-toolbar { padding: 10px 17px; background: #f7f4fa; border-bottom: 1px solid #e9e1ef; display: flex; align-items: center; justify-content: space-between; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--text-muted, #52525b); }
.article-body .copy-code { border: 0; padding: 2px 5px; color: var(--text-muted, #52525b); background: transparent; font: inherit; cursor: pointer; }
.article-body .copy-code:hover { color: #5c3875; }
.article-body pre { overflow-x: auto; padding: 22px; margin: 0; font-size: 13px; line-height: 1.8; tab-size: 2; }
.article-body pre code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
/* Keep github-light syntax groups, with darker accents and comments. */
.article-body .astro-code span[style*="#D73A49" i] { color: #b4233a !important; }
.article-body .astro-code span[style*="#E36209" i] { color: #924600 !important; }
.article-body .astro-code span[style*="#6A737D" i] { color: var(--text-muted, #52525b) !important; }
.article-body .table-scroll { overflow-x: auto; margin: 1.7em 0; border: 1px solid #e4dbea; border-radius: 10px; }
.article-body table { border-collapse: collapse; min-width: 100%; font-size: 14px; line-height: 1.7; text-align: left; }
.article-body th, .article-body td { padding: 13px 17px; border-bottom: 1px solid #eae3ef; min-width: 110px; }
.article-body th { font-weight: 600; background: #f6f1fa; color: var(--text-muted, #52525b); white-space: nowrap; }
.article-body tr:last-child td { border-bottom: 0; }
.article-body tbody tr:nth-child(even) { background: #fcfaff; }
.article-body :focus-visible { outline: 3px solid #9f7cd0; outline-offset: 4px; }
@media (max-width: 600px) {
  .article-body { font-size: 17px; line-height: 1.8; }
  .article-body h2 { font-size: 1.4em; }
  .article-body .callout { padding: 17px 19px; font-size: 15px; }
  .article-body .article-gallery { gap: 10px; }
  .article-body :is(.figure-33, .figure-50) { width: 70%; }
  .article-body .gallery-2, .article-body .gallery-3 { grid-template-columns: minmax(0, 1fr); }
  .article-body pre { padding: 17px; font-size: 12px; }
  .article-body th, .article-body td { padding: 11px 14px; }
}
.article-body .code-line { display: inline-block; min-width: 100%; }
.article-body .code-line::before { content: attr(data-line); display: inline-block; width: 2.5em; margin-right: 1.3em; border-right: 1px solid #e7e0ee; padding-right: .8em; color: var(--text-muted, #52525b); text-align: right; user-select: none; }
.article-body pre { --code-size: 13px; --code-padding: 22px; }
.article-body .code-block.can-fold:not(.is-expanded) pre { max-height: calc(15 * 1.8 * var(--code-size) + 2 * var(--code-padding)); overflow-y: hidden; }
.article-body .expand-code { display: none; width: 100%; padding: 12px; background: #f3eff9; border: 0; border-top: 1px solid #e5ddec; font-size: 13px; font-weight: 600; color: #5838a3; cursor: pointer; }
.article-body .can-fold .expand-code { display: block; }
@media (max-width: 600px) { .article-body pre { --code-size: 12px; --code-padding: 17px; } }