/* ---------------------------------------------------------------------------
   myblog theme — modeled on xdanger.com's light/dark palette
   light: cream background + brick-red accent | dark: teal-gray + mint accent
--------------------------------------------------------------------------- */

:root, html[data-theme="light"] {
  color-scheme: light;
  --bg:            oklch(97.8% .006 83);
  --surface:       oklch(96.5% .007 83);
  --surface-2:     oklch(94.5% .008 83);
  --ink:           oklch(29% .012 60);
  --ink-muted:     oklch(53% .012 62);
  --ink-faint:     oklch(54% .013 62);
  --line:          oklch(90.5% .006 75);
  --line-strong:   oklch(83% .008 72);
  --accent:        oklch(55% .15 19);
  --accent-hover:  oklch(49% .15 19);
  --accent-weak:   oklch(55% .15 19 / .12);
  --accent-contrast: oklch(98.5% .005 83);
  --link:          oklch(55% .15 19);
  --quote:         oklch(55% .15 19);
  --highlight:     oklch(55% .15 19 / .1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg:            oklch(20.5% .008 65);
  --surface:       oklch(24.5% .009 65);
  --surface-2:     oklch(28.5% .01 65);
  --ink:           oklch(92.5% .008 82);
  --ink-muted:     oklch(72% .01 75);
  --ink-faint:     oklch(66% .008 70);
  --line:          oklch(33% .009 65);
  --line-strong:   oklch(44% .01 65);
  --accent:        oklch(78.5% .135 168);
  --accent-hover:  oklch(83.5% .135 168);
  --accent-weak:   oklch(78.5% .135 168 / .18);
  --accent-contrast: oklch(20% .02 162);
  --link:          oklch(78.5% .135 168);
  --quote:         oklch(78.5% .135 168);
  --highlight:     oklch(78.5% .135 168 / .1);
}

/* --------------------------------- base ---------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.site-title, .article-title, .prose h1, .prose h2, .prose h3, .prose h4, .home-hero h1, .year-heading {
  font-family: "LXGW Bright", "Songti SC", "Noto Serif SC", Georgia, ui-serif, serif;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

code, pre, .post-date, .mono, .article-meta, .page-info, .tag-chip, .date {
  font-family: "iA Writer Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-contrast); padding: 8px 14px; border-radius: 4px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* -------------------------------- layout --------------------------------- */

.wrapper {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; padding: 2.5rem 0 3rem; }

.site-header {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0 0.9rem;
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 4px oklch(0% 0 0 / 0.08);
}
html[data-theme="dark"] .site-header.is-scrolled {
  box-shadow: 0 1px 6px oklch(0% 0 0 / 0.35);
}
.site-header-inner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.site-title { margin: 0; font-size: 1.45rem; line-height: 1.1; font-weight: 500; }
.site-title a { color: var(--ink); }
.site-title a:hover { color: var(--link); text-decoration: none; }
.site-tagline { margin: 5px 0 0; font-size: 0.95rem; color: var(--ink-muted); letter-spacing: .01em; }

.site-nav {
  display: flex; align-items: center; gap: 1.1rem;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 0.95rem;
}
.site-nav a { color: var(--ink-muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { font-weight: 600; }

.theme-toggle {
  background: none; border: 1px solid var(--line); color: var(--ink-muted);
  border-radius: 999px; padding: 5px 7px; cursor: pointer; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
html[data-theme="light"] .icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }

.site-footer {
  flex-shrink: 0;
  padding: 1.8rem 0 2rem; font-size: 0.8rem; color: var(--ink-muted);
}
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--link); }
.footer-find { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; }
.footer-find-label { color: var(--ink-faint); font-size: .78rem; }
.footer-find a { font-size: .82rem; }
@media (max-width: 640px) { .footer-find { gap: .3rem .8rem; } }

/* ------------------------------ home / about ------------------------------ */

.home-hero h1 { font-size: 1.6rem; margin: 0 0 1rem; }
.home-bio { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.home-bio li { padding: .2rem 0; }
.home-latest { margin-top: 2.4rem; }
.home-latest h2 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: .06em;
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.home-latest h2 a { font-size: 0.85rem; color: var(--ink-faint); font-weight: 400; }
.home-latest h2 a:hover { color: var(--link); }
.home-latest-list { list-style: none; margin: 0; padding: 0; }

/* ------------------------------- post list ------------------------------- */

.page-shell { max-width: 46rem; }

.year-section + .year-section { margin-top: 2.2rem; }
.year-heading {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.post-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .85rem; }
.post-item {
  display: grid; gap: 2px 1rem;
  grid-template-columns: 9.5rem 1fr;
  align-items: baseline;
}
.post-date { color: var(--ink-faint); font-size: .8rem; white-space: nowrap; }
.post-item-title a { color: var(--ink); font-size: 0.9rem; }
.post-item-title { line-height: 1.45; }
.post-item-title a:hover { color: var(--link); }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1rem;
  font-size: .85rem;
}
.page-info { color: var(--ink-faint); }
.page-num, .page-dots { color: var(--ink-muted); font-size: .85rem; padding: 0 .25rem; }
a.page-num[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* -------------------------------- notes grid ------------------------------ */

.notes-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .notes-grid { grid-template-columns: 1fr 1fr; } }
.note-card {
  position: relative; display: grid;
  border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in oklab, var(--surface) 75%, var(--bg));
  padding: .9rem 1rem;
  transition: border-color .15s;
}
html[data-theme="dark"] .note-card { background: color-mix(in oklab, var(--surface-2) 45%, var(--bg)); }
.note-card:hover { border-color: var(--line-strong); }
.note-title { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.5; }
.note-title a { color: var(--ink); }
.note-title a:hover { color: var(--link); }
.note-excerpt {
  margin-top: .6rem; font-size: .85rem; color: var(--ink-muted);
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* --------------------------------- article ------------------------------- */

.article-header { margin-bottom: 2.2rem; }
.article-title { font-size: 1.75rem; line-height: 1.35; margin: 0 0 .5rem; font-weight: 600; }
.article-subtitle { margin: 0 0 .8rem; color: var(--ink-muted); font-size: .95rem; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  color: var(--ink-muted); font-size: .85rem;
}
.article-meta .tag-chip {
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 10px; font-size: .78rem; color: var(--ink-muted);
}
.article-meta .tag-chip:hover { border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.updated-badge {
  background: var(--accent-weak);
  color: var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: .78rem;
  font-family: inherit;
}

.prose { max-width: 42rem; }
.prose p { margin: 0 0 1.2em; }
.prose h2, .prose h3, .prose h4 {
  font-weight: 600; line-height: 1.4; margin: 2em 0 .8em; color: var(--ink);
  scroll-margin-top: 5rem;
}
.prose h2 { font-size: 1.35rem; }
.prose h3 { font-size: 1.15rem; }
.prose h4 { font-size: 1rem; }
.prose a:not(.heading-anchor) {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, currentColor 28%, transparent);
  transition: text-decoration-color .15s, color .15s;
}
.prose a:not(.heading-anchor):hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.prose img { max-width: 100%; border-radius: 6px; }
.prose blockquote {
  margin: 1.4em 0; padding: .6em 1.1em;
  border-left: 3px solid var(--line-strong); color: var(--ink-muted);
  background: var(--surface);
  font-family: "iA Writer Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em;
  line-height: 1.8;
  border-radius: 0 6px 6px 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code {
  background: var(--surface-2); padding: .15em .4em; border-radius: 4px;
  font-size: .88em;
}
.prose pre {
  position: relative;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 1.1em 1.3em; overflow-x: auto; line-height: 1.6;
}
.prose pre code { background: none; padding: 0; }
.copy-btn {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-muted); border-radius: 6px;
  padding: 3px 8px; font-size: .75rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s, background .15s;
  user-select: none;
}
.prose pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--ink); border-color: var(--accent); }
.copy-btn.copied { opacity: 1; color: var(--color-positive, oklch(58.5% .105 150)); border-color: var(--color-positive, oklch(58.5% .105 150)); }
@media (max-width: 640px) { .copy-btn { opacity: 0.75; } }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: .92em; }
.prose th, .prose td { border: 1px solid var(--line); padding: .45em .8em; text-align: left; }
.prose th { background: var(--surface); font-weight: 600; }

/* -------------------------- TOC (文章目录大纲) -------------------------- */

.toc {
  margin: 0 0 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .75rem 1rem;
}
.toc-summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.toc-count {
  font-size: .75rem;
  color: var(--ink-faint);
  font-weight: 400;
  font-family: ui-monospace, "SF Mono", monospace;
}
.toc-list {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  list-style: none;
  display: grid;
  gap: .3rem;
  font-size: .86rem;
}
.toc-item a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .15s;
}
.toc-item a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.toc-h3 {
  padding-left: .9rem;
  font-size: .82rem;
}

.post-nav {
  display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); margin-top: 2.6rem; padding-top: 1.2rem;
  font-size: .85rem;
}
.post-nav .nav-next { text-align: right; }
.post-nav .nav-label { color: var(--ink-faint); display: block; margin-bottom: .2rem; }

/* ------------------------- admonitions（五档提示块） ------------------------ */

.admonition {
  border-left: 3px solid var(--admon-color, var(--line-strong));
  background: var(--admon-bg, var(--surface));
  border-radius: 0 8px 8px 0;
  padding: .85rem 1.15rem;
  margin: 1.4em 0;
}
.admonition-title {
  margin: 0 0 .45rem;
  font-size: .88rem;
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--admon-color);
}
.admonition-title::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
}
.admonition p:last-child { margin-bottom: 0; }

.admonition-tip {
  --admon-color: oklch(58.5% .105 150);
  --admon-bg: color-mix(in oklab, var(--admon-color) 6%, var(--bg));
}
.admonition-tip .admonition-title::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'/%3E%3C/svg%3E");
}
.admonition-note {
  --admon-color: oklch(56.5% .082 235);
  --admon-bg: color-mix(in oklab, var(--admon-color) 6%, var(--bg));
}
.admonition-note .admonition-title::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
}
.admonition-important {
  --admon-color: oklch(62% .115 47);
  --admon-bg: color-mix(in oklab, var(--admon-color) 6%, var(--bg));
}
.admonition-important .admonition-title::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E");
}
.admonition-caution {
  --admon-color: oklch(72% .15 80);
  --admon-bg: color-mix(in oklab, var(--admon-color) 6%, var(--bg));
}
.admonition-caution .admonition-title::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
}
.admonition-warning {
  --admon-color: var(--accent);
  --admon-bg: color-mix(in oklab, var(--admon-color) 6%, var(--bg));
}
.admonition-warning .admonition-title::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .admonition-tip { --admon-color: oklch(72% .105 168); }
html[data-theme="dark"] .admonition-note { --admon-color: oklch(70% .092 235); }
html[data-theme="dark"] .admonition-important { --admon-color: oklch(70.5% .12 48); }
html[data-theme="dark"] .admonition-caution { --admon-color: oklch(79% .108 82); }
html[data-theme="dark"] .admonition-warning { --admon-color: var(--accent); }

/* --------------------- pull quote（短引用 accent 大字档） --------------------- */

.prose blockquote.pull {
  font-size: 1.15em;
  line-height: 1.6;
  color: var(--ink);
  background: none;
  border-left: 3px solid var(--quote);
  padding: .1em 0 .1em 1em;
  margin: 1.6em 0;
}
.prose blockquote.pull p { margin: 0; }

/* ----------------------- heading anchor（标题锚链接） ----------------------- */

.heading-anchor {
  opacity: 0;
  margin-left: -.85em;
  text-decoration: none;
  color: var(--ink-faint);
  font-weight: 400;
  transition: opacity .15s;
}
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }

/* ------------------------------ KaTeX 排版 ------------------------------ */

.katex { font-size: 1.05em; }
.katex-display { margin: 1.2em 0; overflow-x: auto; overflow-y: hidden; padding: .3em 0; }
.katex-display > .katex { white-space: nowrap; }

/* ------------------------------ Ctrl+K 搜索 ------------------------------ */

.search-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--ink-muted); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; font: inherit; font-size: .8rem;
  transition: border-color .15s;
}
.search-trigger:hover { border-color: var(--accent); color: var(--ink); }
.search-trigger kbd {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 5px; font-size: .72rem; font-family: inherit;
}
.search-dialog {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 0;
}
.search-dialog[open], .search-dialog.open { display: flex; }
.search-box {
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 12px; width: 100%; max-width: 38rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 60vh;
}
.search-input {
  font: inherit; font-size: 1rem; width: 100%;
  border: none; outline: none; background: none; color: var(--ink);
  padding: .9rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.search-results { overflow-y: auto; list-style: none; margin: 0; padding: .4rem; }
.search-results li {
  border-radius: 8px; padding: .55rem .8rem; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.search-results li:hover, .search-results li.active { background: var(--accent-weak); }
.search-results .sr-title { color: var(--ink); font-size: .92rem; }
.search-results .sr-meta { color: var(--ink-faint); font-size: .75rem; white-space: nowrap; }
.search-empty { padding: 1.2rem; text-align: center; color: var(--ink-muted); font-size: .85rem; }

/* -------------------------------- comments -------------------------------- */

.comments { margin-top: 2.8rem; }
.comments h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.comment {
  border: 1px solid var(--line); border-radius: 8px;
  padding: .8rem 1rem; margin-bottom: .8rem;
  background: color-mix(in oklab, var(--surface) 60%, var(--bg));
}
.comment-head { display: flex; gap: .8rem; font-size: .8rem; color: var(--ink-faint); margin-bottom: .4rem; }
.comment-author { color: var(--ink-muted); font-weight: 600; }
.comment-body { font-size: .9rem; white-space: pre-wrap; }

.comment-form {
  margin-top: 1.4rem; display: grid; gap: .7rem;
  border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem;
  background: color-mix(in oklab, var(--surface) 45%, var(--bg));
}
.comment-form h3 { margin: 0; font-size: 1rem; }
.comment-form .row { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.comment-form input, .comment-form textarea {
  font: inherit; width: 100%;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: .5rem .7rem;
}
.comment-form input:focus, .comment-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: var(--accent-contrast);
  border: 1px solid var(--accent); border-radius: 6px;
  padding: .5rem 1.1rem; font: inherit; font-size: .9rem; cursor: pointer;
  transition: background .15s;
  justify-self: start;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); text-decoration: none; }

/* --------------------------------- tags ---------------------------------- */

.tag-cloud { display: flex; flex-wrap: wrap; gap: .55rem .8rem; align-items: baseline; }
.tag {
  color: var(--ink-muted); border-bottom: 1px dotted var(--line-strong);
  line-height: 1.4;
}
.tag:hover { color: var(--link); text-decoration: none; border-bottom-style: solid; }
.tag .tag-count { font-size: .7em; color: var(--ink-faint); margin-left: 2px; }
.tag.size-sm { font-size: .8rem; }
.tag.size-md { font-size: .95rem; }
.tag.size-lg { font-size: 1.1rem; }
.tag.size-xl { font-size: 1.25rem; color: var(--ink); font-weight: 500; }

/* -------------------------------- search --------------------------------- */

.search-form { display: flex; gap: .6rem; margin-bottom: 1.6rem; }
.search-form input {
  flex: 1; font: inherit;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: .5rem .8rem;
}
.search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-form .btn { border-radius: 6px; }

.result-meta { color: var(--ink-faint); font-size: .85rem; margin-bottom: 1.4rem; }

/* ------------------------------- misc pages ------------------------------- */

.empty-state { color: var(--ink-muted); padding: 2rem 0; }

.preview-banner {
  border: 1px solid var(--accent); border-left-width: 4px;
  background: var(--accent-weak); color: var(--ink);
  border-radius: 6px; padding: .6rem 1rem; margin-bottom: 1.6rem;
  font-size: .85rem;
}

.comment.flash-pending { opacity: .75; }
.comment-notice { color: var(--ink-faint); font-size: .85rem; margin: .8rem 0 1.2rem; }

@media (max-width: 640px) {
  .post-item { grid-template-columns: 1fr; gap: 0; }
  .post-item .post-date { margin-bottom: 1px; }
  .comment-form .row { grid-template-columns: 1fr; }
  .site-tagline { display: none; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .nav-next { text-align: left; }
}