/* Reading is the primary surface. Keep one page, one text measure, and native controls. */
:root {
  color-scheme: light;
  --reading-rule: color-mix(in srgb, var(--color-text) 16%, transparent);
  --reading-link: #2863ad;
}
@media (prefers-color-scheme: dark) {
  :root:not([color-scheme="light"]) { color-scheme: dark; --reading-link: #8eb9f0; }
}
:root[color-scheme="dark"] { color-scheme: dark; --reading-link: #8eb9f0; }

html { scroll-padding-top: 92px; }
body { overflow-wrap: break-word; }
a { transition: color 140ms ease, background-color 140ms ease; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--reading-link);
  outline-offset: 4px;
}
.skip-to-content {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 3000;
  transform: translateY(-160%);
  padding: 8px 16px;
  background: var(--color-card);
  color: var(--reading-link);
}
.skip-to-content:focus { transform: none; }

/* The navigation stays in place while reading; no title/menu swap on scroll. */
.l_header {
  max-width: 100%;
  left: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--reading-rule);
  background: var(--color-card);
  box-shadow: none !important;
}
.l_header #wrapper { max-width: 1080px; margin: auto; }
.l_header #wrapper.sub .nav-main { transform: none; }
.l_header #wrapper .nav-sub { display: none; }
.l_header #wrapper .nav-main .title { font-size: 19px; font-weight: 600; }
.l_header .menu > ul > li > a { padding-inline: 12px; font-size: 15px; font-weight: 400; }
.l_header .m_search .input { border: 1px solid var(--reading-rule); border-radius: 5px; }
.l_header .m_search .input:focus { box-shadow: none; }
.l_header .switcher > li > a { border-radius: 5px; }
ul.list-v { border: 1px solid var(--reading-rule); box-shadow: none; }

#safearea { margin: 0; padding: 48px 32px 0; }
.body-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 720px) 224px;
  gap: 64px;
  max-width: 1008px;
  margin: 0 auto;
  align-items: start;
}
#l_main { float: none; width: 100%; min-width: 0; padding: 0; }
#l_side { float: none; width: 224px; min-width: 0; align-self: stretch; }
.body-wrapper:has(#l_main.no_sidebar) { display: block; max-width: 760px; }
.body-wrapper:has(#l_main.no_sidebar) #l_side { display: none; }
#l_main .post, .widget { box-shadow: none !important; border-radius: 0; }
#l_main .article { padding: 0; background: transparent; }

/* List entries are text, not stacks of nested cards. */
#l_main .reading-preview {
  margin: 0;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--reading-rule);
  background: transparent;
  text-align: left;
}
.post-wrapper:first-child .reading-preview { padding-top: 0 !important; }
.reading-preview .article-title { margin: 0 0 9px; font-size: 24px; font-weight: 600; line-height: 1.5; }
.reading-preview .article-title a { color: var(--color-h1); }
.reading-preview .article-title a:hover { color: var(--reading-link); }
.reading-preview-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--color-meta); }
.reading-preview-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.reading-preview .article-desc { margin: 12px 0 0; color: var(--color-list); font-size: 16px; line-height: 1.85; }

/* A stable measure and a real heading scale, including mixed Chinese/Latin prose. */
#l_main .article .article-meta#top { margin: 0 0 36px; }
#l_main .post h1.title { font-size: 32px; font-weight: 650; line-height: 1.45; padding: 0; }
#l_main article.article .new-meta-box { margin-top: 12px; gap: 6px 18px; }
#l_main article.article .new-meta-box .new-meta-item { margin: 0; padding: 0; }
#l_main article.article .new-meta-box :is(p, a, time) { font-size: 14px; }
#l_main article.article .new-meta-box i { display: none; }
#post-body { font-size: 18px; line-height: 1.9; color: var(--color-p); }
#post-body :is(p, li, blockquote) { text-align: left; }
#post-body p { margin: 1em 0; }
#post-body > :first-child { margin-top: 0; }
#post-body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-h1);
  font-weight: 600;
  line-height: 1.5;
  scroll-margin-top: 88px;
  padding: 0;
  border: 0;
}
#post-body h1, #post-body h2 { font-size: 26px; margin: 2em 0 .75em; }
#post-body h3 { font-size: 21px; margin: 1.7em 0 .65em; }
#post-body h4 { font-size: 19px; margin: 1.5em 0 .5em; }
#post-body strong { font-weight: 600; color: inherit; }
#post-body :is(ul, ol) { padding-left: 1.5em; margin: 1em 0; }
#post-body li { font-size: inherit; line-height: inherit; margin: .35em 0; color: inherit; }
#post-body li > :is(ul, ol) { margin: .35em 0; }
#post-body a { color: var(--reading-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#post-body a:hover { text-decoration-thickness: 2px; }
#post-body blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--reading-rule); border-radius: 0; background: transparent !important; }
#post-body blockquote p { font-size: inherit; color: var(--color-list); }
#post-body code { color: var(--color-text); font-size: .88em; background: var(--color-block); border-radius: 3px; padding: .13em .28em; overflow-wrap: break-word; word-break: normal; }
#post-body pre, #post-body figure.highlight { font-size: 14px; line-height: 1.7; border-radius: 4px; background: var(--color-codeblock); }
#post-body pre code { padding: 0; background: transparent; font-size: inherit; overflow-wrap: normal; }
#post-body pre { overflow-x: auto; }
#post-body table:not(.highlight table) { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; line-height: 1.65; }
#post-body table:not(.highlight table) :is(th, td) { padding: 12px 14px; border-color: var(--reading-rule); min-width: 100px; text-align: left; }
#post-body table:not(.highlight table) th { font-weight: 600; background: var(--color-block); }
#post-body table:not(.highlight table) tbody tr:nth-child(even) { background: transparent; }
#post-body .reading-image { display: block; margin: 28px 0 12px; border: 0; text-decoration: none; cursor: zoom-in; }
#post-body img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 3px; }
#post-body p:has(> .reading-image) + p > em:only-child { font-size: 14px; line-height: 1.7; font-style: normal; color: var(--color-meta); }
#post-body .katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 8px; }

/* TOC remains quiet; native details handles its mobile disclosure. */
#l_side .toc-wrapper { background: transparent; box-shadow: none !important; transition: none; }
#l_side .toc-wrapper header { padding: 0 0 14px 12px; background: var(--color-card); }
#l_side .toc-wrapper header i { display: none; }
#l_side .toc-wrapper header span.name { margin: 0; }
#l_side .toc-wrapper .content { padding: 0; max-height: calc(100dvh - 144px); }
#l_side .toc-wrapper a { padding: 5px 10px; font-size: 14px; font-weight: 400; line-height: 1.6; }
#l_side .toc-wrapper .toc-child { max-height: none; transition: none; }
#l_side .toc-wrapper .toc-child a { padding-left: 20px; }
#l_side .toc-wrapper :is(a.active, .toc-item.active > a) { color: var(--color-text); border-left-color: var(--reading-rule); background: none; font-weight: 600; }
.reading-toc { display: none; }

#l_main .article .article-meta#bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--reading-rule); }
#l_main .article .prev-next { margin-top: 32px; gap: 24px; }
#l_main .article .prev-next > a { border-radius: 0; background: transparent !important; padding: 16px 0; border-top: 1px solid var(--reading-rule); }
#l_main .article .prev-next .content { display: none; }
#l_main .article .prev-next .title { font-size: 16px; line-height: 1.7; }
#l_main .prev-next section.post { background: transparent; border: 1px solid var(--reading-rule); border-radius: 4px; box-shadow: none; }
#l_body #s-top, #l_body #s-top:hover { width: 40px; height: 40px; line-height: 40px; border-radius: 4px; box-shadow: none; font-size: 14px; transition: opacity 140ms ease; }
#l_body #s-top.show:hover { transform: none; }
.site-footer { color: var(--color-meta); }
#l_main article:is(#arc, #cat, #tag) { padding: 0; }
#l_main article#tag .all-tags ul { gap: 6px 22px; margin: 0; }
#l_main article#tag .all-tags li { margin: 0; border-radius: 0; }
#l_main article#tag .all-tags li a { padding: 8px 38px 8px 0; background: transparent; }
#l_main article#tag .all-tags li a:hover { color: var(--reading-link); }
#l_main article#tag .all-tags li span { background: transparent; top: 6px; padding: 2px 4px; }
#l_main article#tag .all-tags li span::before { content: ''; }

@media (max-width: 1024px) {
  .body-wrapper { display: block; max-width: 720px; }
  #l_side { display: none; }
  .reading-toc { display: block; margin: 0 0 28px; border: 0; border-top: 1px solid var(--reading-rule); border-bottom: 1px solid var(--reading-rule); border-radius: 0; background: transparent !important; }
  .reading-toc summary { padding: 12px 0; font-size: 15px; font-weight: 500; color: var(--color-text); background: transparent !important; cursor: pointer; }
  .reading-toc nav { padding: 0 0 16px; }
  .reading-toc :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
  .reading-toc .reading-toc-child { padding-left: 18px; }
  .reading-toc a { display: block; padding: 6px 0; color: var(--color-list); font-size: 15px; line-height: 1.6; }
}
@media (max-width: 600px) {
  #safearea { padding: 28px 22px 0; }
  #l_main .post h1.title { font-size: 28px; }
  #l_main .article .article-meta#top { margin-bottom: 24px; }
  #post-body { font-size: 17px; line-height: 1.85; }
  #post-body h1, #post-body h2 { font-size: 23px; }
  #post-body h3 { font-size: 20px; }
  #post-body table:not(.highlight table) :is(th, td) { padding: 10px 12px; min-width: 110px; }
  .reading-preview .article-title { font-size: 21px; }
  #l_main .reading-preview { padding-block: 25px; }
  .reading-preview .article-desc { font-size: 16px; }
  #l_body #s-top { bottom: 18px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Replace legacy anchor spacers with native scroll offsets. */
#l_main .post :is(h1,h2,h3,h4,h5,h6)::before { display: none; }

#l_main article.article .new-meta-box .new-meta-item i { display: none; }
@media (max-width: 1024px) {
  #l_main details.reading-toc { padding: 0; }
  #l_main details.reading-toc summary { margin: 0; line-height: 1.6; }
  #l_main details.reading-toc summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
  #l_main details.reading-toc[open] summary::after { content: '−'; }
  #l_main details.reading-toc li { list-style: none; margin: 0; }
}
@media (max-width: 500px) {
  .l_header:not(.z_search-open) .m_search { display: none; }
  .l_header .nav-main > .title { padding-left: 22px; }
}
#l_main :is(#top, #bottom) .new-meta-box .new-meta-item i { display: none; }
#l_main :is(#top, #bottom) .new-meta-box .new-meta-item { padding: 0; margin: 0; }
#post-body :not(pre) > code { word-break: normal; }
/* These SVGs have their own dark palette and should not be dimmed again. */
#post-body img[src*="/images/biny-tool-system/"] { filter: none !important; }
/* Keep personal links readable even when an icon font is unavailable. */
#l_side .blogger .social-wrapper { display: flex; justify-content: center; gap: 20px; }
#l_side .blogger .social-wrapper .social { width: auto; font: inherit; font-size: 14px; }
#l_side .blogger .social[href*="github.com"]::before { content: 'GitHub'; }
#l_side .blogger .social[href^="mailto:"]::before { content: '邮箱'; }