/* /assets/fonts/noto-serif-sc/noto-serif-sc-500-subset.css */
/* Generated by scripts/subset_serif_font.py — do not edit. Declared after the jsDelivr
   slices so these characters come from this file; anything else falls back to the slices. */
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/noto-serif-sc/noto-serif-sc-500-subset.woff2?v=af92a0234d45ecbd7456ff41b7631c11") format("woff2");
  unicode-range: U+b7,U+2014,U+2018-2019,U+201c-201d,U+2026,U+3000-303f,U+4e00,U+4e03,U+4e09-4e0b,U+4e0d-4e0e,U+4e1a,U+4e24,U+4e2a,U+4e3a-4e3b,U+4e60,U+4e66,U+4e8b-4e8c,U+4e8e,U+4e91,U+4e94,U+4eab,U+4eba,U+4ecb,U+4ed3,U+4ee5,U+4f18,U+4f4f,U+4f53,U+4f5c,U+4fa7,U+4fe1,U+4fee,U+500d,U+507f,U+5148,U+5165,U+5168,U+516c-516d,U+5171,U+5173,U+5177-5178,U+5185,U+518d,U+5199,U+51c6,U+51fa,U+5206,U+5230,U+5236,U+524d,U+52a0,U+52a8,U+5316,U+5339,U+534a,U+535a,U+5373,U+5386,U+539f,U+53c2,U+53d1,U+53d6,U+53e3,U+53f0,U+53f2,U+53f7,U+5408,U+540d-540e,U+542c,U+5546,U+5566,U+5668,U+56db,U+56de,U+56fe,U+5728,U+5730,U+573a,U+5740,U+578b,U+57fa,U+5907,U+591a,U+5927,U+5b58,U+5b66,U+5b87,U+5b9e,U+5ba2,U+5bb9,U+5bc6,U+5bfc,U+5c0f,U+5c40,U+5c55,U+5de5,U+5e03,U+5e73,U+5e93-5e94,U+5ea6-5ea7,U+5efa,U+5f00,U+5f0f,U+5f53,U+5f55,U+5f69,U+5f88,U+5f97,U+5fae,U+5fc3,U+5fd7,U+6001,U+601d,U+6027,U+60ac,U+61c2,U+6210-6211,U+6216,U+6237,U+6253,U+6279,U+6280,U+628a,U+6295,U+636e,U+63a5,U+63a7,U+641c,U+641e,U+6536,U+653f,U+6545,U+6559,U+6570,U+6574,U+6587,U+65b0,U+65b9,U+65e0,U+65e5,U+65f6,U+662f,U+666f,U+667a,U+66f4,U+6700,U+672c-672d,U+672f,U+673a,U+6750,U+6761,U+679c,U+67b6,U+680f,U+6811,U+6838,U+6863,U+6865,U+68d2,U+6982,U+6a0a,U+6a21,U+6b63,U+6c42,U+6cab,U+6cd5,U+6ce1-6ce2,U+6d4b,U+6d4f,U+6e90,U+6ee4,U+70b9,U+7236,U+7269,U+72af,U+732e,U+7406,U+741b,U+751f,U+7528,U+7591,U+7684,U+76d1,U+76ee,U+7814,U+7840,U+786c,U+793a,U+79c1,U+79d1,U+79f0,U+79fb,U+7a0b,U+7a3f,U+7a76,U+7a97,U+7ad9,U+7ade,U+7ae0,U+7b14,U+7b2c,U+7b54,U+7b56,U+7b80,U+7b97,U+7cfb,U+7d22,U+7eaf,U+7ebf,U+7ec3-7ec4,U+7ecf,U+7ed3,U+7ed9,U+7edf,U+7ef4,U+7f16,U+7f51,U+7f6a,U+7f6e,U+7f72,U+8003,U+8054,U+80fd,U+822a,U+8303,U+8349,U+83b7,U+86cb,U+878d,U+8865,U+8981,U+89c2,U+89c8,U+89e3,U+8ba9,U+8bad,U+8bb0,U+8bb2,U+8bba,U+8bbe,U+8bc4,U+8bd5,U+8bf4,U+8bfb,U+8bfe,U+8d28,U+8d44,U+8d5b,U+8def,U+8eab,U+8f6c,U+8f7d,U+8f91,U+8fa9,U+8fc7,U+8fd0-8fd1,U+8fd9,U+8fdb,U+8fde,U+9014,U+901f-9020,U+90e8,U+914d,U+91cc,U+91cf,U+9501,U+957f,U+95ee,U+95f4,U+9605,U+9650,U+968f-9690,U+96c6,U+9762,U+9875,U+9879,U+9884,U+9898,U+98de,U+9a76,U+9a7e,U+9a8c,U+9ad8,U+9c81,U+ff01-ff5e;
}

/* /assets/css/function.css */
/* The approved Function design, applied only to Chinese pages.
   暖白纸色底、近黑正文、衬线标题；ƒ 的紫色只留给标识、链接和当前位置。 */
html[lang="zh-CN"] {
  color-scheme: light;
  --global-bg-color: #faf9f5;
  --global-text-color: #141413;
  --global-text-color-light: #5e5d59;
  --global-theme-color: #6434b2;
  --global-hover-color: #6434b2;
  --global-divider-color: #e6e3d9;
  --global-card-bg-color: #fdfcf9;
  --global-code-bg-color: #f0eee6;
  --function-wash: #f0eee6;
  --function-mark: #d8cdea;
  --function-serif: "Source Serif 4", "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --function-ink: #141413;
  --function-art-terracotta: #d97757;
  --function-art-sky: #6a9bcc;
  --function-art-olive: #7d8c5e;
  --function-art-lavender: #cbc8dd;
  --function-art-sand: #d9c4a3;
  --site-nav-gap: clamp(14px, 1.7vw, 24px);
  scroll-padding-top: 116px;
  scroll-behavior: smooth;
}
html[lang="zh-CN"][data-nav-density="compact"] {
  --site-nav-gap: 12px;
}
html[lang="zh-CN"][data-nav-density="relaxed"] {
  --site-nav-gap: 24px;
}
html[lang="zh-CN"]:not([data-site-font]),
html[lang="zh-CN"][data-site-font="system"] {
  --site-font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[lang="zh-CN"][data-theme="dark"] {
  color-scheme: dark;
  --global-bg-color: #1f1e1d;
  --global-text-color: #f0efe8;
  --global-text-color-light: #b9b6ab;
  --global-theme-color: #c5a2ff;
  --global-hover-color: #c5a2ff;
  --global-divider-color: #3a3935;
  --global-card-bg-color: #262624;
  --global-code-bg-color: #2b2a27;
  --function-wash: #2b2a27;
  --function-mark: #5d4d78;
  --function-ink: #f0efe8;
}
@media (prefers-color-scheme: dark) {
  html[lang="zh-CN"]:not([data-theme]) {
    color-scheme: dark;
    --global-bg-color: #1f1e1d;
    --global-text-color: #f0efe8;
    --global-text-color-light: #b9b6ab;
    --global-theme-color: #c5a2ff;
    --global-hover-color: #c5a2ff;
    --global-divider-color: #3a3935;
    --global-card-bg-color: #262624;
    --global-code-bg-color: #2b2a27;
    --function-wash: #2b2a27;
    --function-mark: #5d4d78;
    --function-ink: #f0efe8;
  }
  html[lang="zh-CN"]:not([data-theme]) .social .contact-icons .fa-github::before {
    color: #f0f6fc !important;
  }
}
body.function-page {
  padding-top: 108px;
  font-family: var(--site-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.function-page ::selection {
  background: var(--function-mark);
  color: var(--global-text-color);
}
.function-page a {
  text-underline-offset: 0.25em;
}
.function-page a:focus-visible,
.function-page button:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: 5px;
  border-radius: 2px;
}
.function-page > .container[role="main"] {
  width: min(1060px, calc(100% - 96px));
  max-width: none;
  padding: 0;
  margin: 0 auto 64px !important;
}
.function-skip {
  position: fixed;
  top: -80px;
  left: 20px;
  padding: 6px 14px;
  background: var(--global-bg-color);
  border: 1px solid var(--global-theme-color);
  z-index: 1100;
}
.function-skip:focus {
  top: 12px;
}
.function-page #navbar {
  position: fixed;
  inset: 19px auto auto 50%;
  transform: translateX(-50%);
  width: min(1060px, calc(100% - 96px));
  min-height: 64px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  background: var(--global-bg-color);
  transition:
    width 480ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 480ms ease,
    box-shadow 480ms ease;
}
html[data-function-scrolled="true"] .function-page #navbar {
  width: min(940px, calc(100% - 56px));
  padding-inline: 24px;
  border-color: var(--global-divider-color);
  border-radius: 40px;
  box-shadow: 0 7px 26px #1d112408;
}
.function-page #navbar .navbar-container {
  width: 100%;
  max-width: none;
  padding: 0;
  min-height: 62px;
}
.function-page #navbar .navbar-container-home .navbar-collapse-main {
  max-width: none;
  flex: 1 1 auto;
}
.function-page #navbar .navbar-menu-list {
  align-items: center;
  justify-content: flex-end;
  column-gap: var(--site-nav-gap);
  margin: 0;
  width: 100%;
}
.function-page #navbar .navbar-menu-list > li:first-child {
  margin-right: auto;
}
.function-page #navbar .navbar-menu-list .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--global-text-color);
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  transition: color 160ms ease;
}
.function-page #navbar .navbar-menu-list .nav-link:hover {
  color: var(--global-text-color-light);
}
.function-page #navbar .navbar-menu-list .active > .nav-link {
  color: var(--global-text-color);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 8px;
}
.function-wordmark,
.function-mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--global-text-color);
  font-family: var(--function-serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.function-wordmark > span,
.function-mobile-brand > span {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--global-theme-color);
}
.function-mobile-brand {
  display: none;
}
.function-page #navbar .dropdown-menu {
  min-width: 196px;
  padding: 6px;
  margin-top: 8px;
  border: 1px solid var(--global-divider-color);
  border-radius: 14px;
  background: var(--global-bg-color);
  box-shadow:
    0 12px 36px #17171c12,
    0 2px 6px #17171c05;
  text-align: left;
  transform-origin: top right;
}
.function-page #navbar .dropdown-menu.show {
  animation: function-menu-enter 170ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.function-page #navbar .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--global-text-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  transition:
    background 150ms ease,
    color 150ms ease;
}
.function-page #navbar .function-menu-arrow {
  color: var(--global-text-color-light);
  font-size: 15px;
}
.function-page #navbar .dropdown-item:hover,
.function-page #navbar .dropdown-item:focus-visible,
.function-page #navbar .dropdown-item.active {
  background: var(--function-wash);
  color: var(--global-theme-color);
}
.function-page #navbar .dropdown-item:focus-visible {
  outline-offset: -2px;
}
.function-page #navbar .dropdown-toggle {
  gap: 4px;
}
.function-page #navbar .dropdown-toggle::after {
  display: none;
}
.function-page #navbar .dropdown-toggle .function-icon {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}
.function-page #navbar .dropdown-toggle[aria-expanded="true"] {
  color: var(--global-theme-color);
}
.function-page #navbar .dropdown-toggle[aria-expanded="true"] .function-icon {
  transform: rotate(180deg);
}
.function-icon {
  display: block;
  flex-shrink: 0;
}
.function-tools {
  flex: 0 0 auto;
}
.function-tools-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--global-divider-color);
}
.function-page #navbar .function-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 10px;
  appearance: none;
  background: transparent;
  box-shadow: none;
  color: var(--global-text-color-light);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease;
}
.function-page #navbar .function-control:hover,
.function-page #navbar .function-control:focus-visible,
.function-page #navbar .function-control[aria-expanded="true"] {
  background: var(--function-wash);
  color: var(--global-theme-color);
}
.function-page #navbar .function-control:focus-visible {
  outline-offset: 3px;
  border-radius: 10px;
}
/* 主题 main.css 给 #light-toggle 加了 translateY(4px)，放在这组按钮里会比搜索、设置低 4px。 */
.function-page #navbar #light-toggle {
  transform: none;
}
.function-control > span[id] {
  color: inherit;
  line-height: 0;
}
.function-control-label {
  font-weight: 500;
  display: none;
}
.function-control-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--global-text-color);
  color: var(--global-bg-color);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
}
.function-control:hover .function-control-tip,
.function-control:focus-visible .function-control-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 300ms;
}
.function-control[aria-expanded="true"] .function-control-tip {
  opacity: 0;
  visibility: hidden;
}
.function-page #navbar .navbar-toggler-main {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 10px;
  border: 0;
  transition: background 160ms ease;
}
.function-page #navbar .navbar-toggler-main:hover,
.function-page #navbar .navbar-toggler-main:focus-visible {
  background: var(--function-wash);
}
.function-page #navbar .navbar-toggler-main .icon-bar {
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
}
.function-page #site-inline-editor-toggle {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border-color: var(--global-divider-color);
  background: var(--global-bg-color);
  box-shadow: 0 4px 16px #17171c0a;
}
.function-page #site-inline-editor-toggle:hover,
.function-page #site-inline-editor-toggle[aria-expanded="true"] {
  background: var(--function-wash);
  box-shadow: 0 4px 16px #17171c0a;
  color: var(--global-theme-color);
  transform: none;
}
.function-page .site-author-menu {
  padding: 6px;
  border-radius: 14px;
  background: var(--global-bg-color);
  box-shadow: 0 12px 36px #17171c12;
}
.function-page .site-author-menu > button,
.function-page .site-author-menu > a {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.function-page .site-author-menu > p {
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0;
}
.function-page .site-settings__icon-button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
@keyframes function-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.function-page #navbar:has(.navbar-collapse-main.show) {
  border-color: var(--global-divider-color);
  box-shadow: 0 7px 26px #1d112408;
}
.function-home a {
  color: inherit;
  text-decoration: none;
}
.function-home a:hover {
  color: var(--global-theme-color);
}
/* Inner pages share the type hierarchy while keeping their existing content and controls. */
.function-page .post-header:not(.post-hero) {
  padding-top: 36px;
  margin-bottom: 38px;
}
.function-page .post-header:not(.post-hero) .post-title {
  font-family: var(--function-serif);
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.function-page .post-header:not(.post-hero) .post-description {
  max-width: 740px;
  font-size: 17px;
  line-height: 1.85;
  color: var(--global-text-color-light);
}
.function-page .blog-hero h1 {
  font-size: clamp(46px, 6vw, 68px);
  letter-spacing: -0.045em;
}
.function-page .blog-hero {
  padding-top: 42px;
  padding-bottom: 40px;
}
.function-page .blog-hero__meta {
  margin-top: 32px;
}
.function-page .blog-feature {
  background: none;
  border: 0;
  border-top: 3px solid var(--global-text-color);
  border-bottom: 1px solid var(--global-divider-color);
  border-radius: 0;
  padding: 28px 0;
}
.function-page .blog-feature:hover {
  transform: none;
}
.function-page .blog-feature__label {
  background: none;
  color: var(--global-theme-color);
  padding: 0;
  letter-spacing: 0;
}
.function-page .blog-feature h2 {
  margin: 26px 0 18px;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.55;
}
.function-page .blog-feature__description {
  margin-bottom: 26px;
}
.function-page .blog-feature__number {
  display: none;
}
.function-page .projects .card {
  border: 1px solid var(--global-divider-color);
  box-shadow: none;
  border-radius: 6px;
}
.function-page .projects .card-title {
  font-size: 21px;
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .function-page > .container[role="main"] {
    width: calc(100% - 56px);
  }
  .function-page #navbar,
  html[data-function-scrolled="true"] .function-page #navbar {
    width: calc(100% - 40px);
    top: 8px;
    border-radius: 18px;
    padding: 0 18px;
  }
  .function-mobile-brand {
    display: inline-flex;
    text-decoration: none;
  }
  .function-page #navbar .navbar-container {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .function-page #navbar .navbar-toggler-main {
    display: block;
    padding: 10px;
  }
  .function-page #navbar .navbar-collapse-main {
    width: 100%;
    flex-basis: 100%;
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
  }
  .function-page #navbar .navbar-menu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    padding: 14px 0 20px;
    align-items: start;
  }
  .function-page #navbar .navbar-menu-list > li:first-child {
    display: none;
  }
  .function-page #navbar .navbar-menu-list .nav-link {
    padding: 8px 0;
    font-size: 15px;
  }
  .function-page #navbar .dropdown-menu {
    position: static;
    border: 0;
    padding: 4px 0 0;
    margin: 0;
    min-width: 0;
    box-shadow: none;
    animation: none;
  }
  .function-page #navbar .dropdown-item {
    padding: 10px;
    min-height: 44px;
  }
  .function-page #navbar .toggle-container {
    padding: 8px 0;
  }
  .function-tools {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 10px;
  }
  .function-tools-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--global-divider-color);
  }
  .function-page #navbar .function-control {
    gap: 9px;
    width: 100%;
    height: 44px;
  }
  .function-control-label {
    display: inline;
    color: inherit;
    font-size: 13px;
  }
  .function-control-tip {
    display: none;
  }
}
@media (max-width: 560px) {
  body.function-page {
    padding-top: 86px;
  }
  .function-page > .container[role="main"] {
    width: calc(100% - 40px);
    margin-bottom: 30px !important;
  }
  .function-page .post-header:not(.post-hero) {
    padding-top: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[lang="zh-CN"] {
    scroll-behavior: auto;
  }
  .function-page #navbar,
  .function-directory-title > span,
  .function-page #navbar .nav-link,
  .function-page #navbar .function-control,
  .function-page #navbar .dropdown-toggle .function-icon,
  .function-page #navbar .navbar-toggler-main,
  .function-page #navbar .dropdown-item,
  .function-control-tip {
    transition: none;
  }
  .function-page #navbar .dropdown-menu.show {
    animation: none;
  }
}

.function-projects section {
  border-top: 3px solid var(--global-text-color);
  padding-top: 24px;
}
.function-projects section + section {
  border-top-width: 1px;
  margin-top: 40px;
}
.function-projects section > h2 {
  color: var(--global-theme-color);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
}
.function-projects ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.function-project {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--global-divider-color);
  padding: 23px 0;
}
.function-project:last-child {
  border-bottom: 0;
}
.function-project h3 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.5;
}
.function-project h3 a {
  color: var(--global-text-color);
  text-decoration: none;
}
.function-project h3 a:hover {
  color: var(--global-theme-color);
}
.function-project h3 span {
  color: var(--global-theme-color);
  font-size: 17px;
  margin-left: 10px;
}
.function-project p {
  color: var(--global-text-color-light);
  font-size: 15px;
  margin: 0;
  max-width: 720px;
}
.function-project-source {
  flex-shrink: 0;
  font-size: 13px;
}
@media (max-width: 560px) {
  .function-project {
    display: block;
    padding: 20px 0;
  }
  .function-project h3 {
    font-size: 21px;
  }
  .function-project-source {
    display: inline-block;
    margin-top: 12px;
  }
}

/* 标题统一用衬线体（对话框、设置面板等界面文字不受影响）。 */
/* 用 :where 把优先级压到最低，各组件可以用普通类名覆盖。 */
:where(.function-page [role="main"]) :where(h1, h2):where(:not(dialog *, .egg-overlay *)) {
  font-family: var(--function-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 通用按钮：实心黑与描边两种，首页与博客共用。 */
.function-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--function-ink);
  border-radius: 10px;
  background: var(--function-ink);
  color: var(--global-bg-color) !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}
.function-button:hover {
  opacity: 0.86;
}
.function-button:active {
  transform: translateY(1px);
}
.function-button--ghost {
  border-color: var(--global-divider-color);
  background: transparent;
  color: var(--global-text-color) !important;
}
.function-button--ghost:hover {
  border-color: var(--global-text-color-light);
  opacity: 1;
}

/* 季节氛围画布（assets/js/atmosphere.js）：盖在正文上方、导航栏下方，不挡任何点击。 */
.season-canvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 450ms ease;
  animation: season-in 900ms ease both;
}
.season-canvas.is-leaving {
  opacity: 0;
}
@keyframes season-in {
  from {
    opacity: 0;
  }
}

/* 日夜切换：关掉默认的整页淡入淡出，由脚本让新主题从按钮处圆形扩散。 */
html.is-theme-revealing::view-transition-old(root),
html.is-theme-revealing::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.is-theme-revealing::view-transition-new(root) {
  z-index: 1;
}
/* 季节氛围在切换主题时单独成一层、叠在最上面实时飘落：圆圈外的旧画面是静态截图，
   落叶一直在动，画面就不会像定格一样。 */
html.is-theme-revealing .season-canvas {
  view-transition-name: season-canvas;
}
html.is-theme-revealing::view-transition-group(season-canvas),
html.is-theme-revealing::view-transition-new(season-canvas) {
  z-index: 2;
  animation: none;
}
html.is-theme-revealing::view-transition-old(season-canvas) {
  display: none;
}
/* 翻页过渡给导航栏和正文单独起了名字；切换主题时收回，让整页一起跟着圆形扩散。 */
html.is-theme-revealing #navbar,
html.is-theme-revealing #site-rendered-content {
  view-transition-name: none;
}

/* /assets/css/function-settings.css */
/* Chinese reading preferences and owner controls share a compact sheet. */
.function-page .site-settings-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--global-divider-color);
  border-radius: 22px;
  box-shadow: 0 24px 100px #17171c26;
}
.function-page .site-settings-dialog::backdrop {
  background: #17171c52;
  backdrop-filter: blur(5px);
}
.function-page .site-settings {
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.function-page .site-settings__header {
  border-bottom: 1px solid var(--global-divider-color);
  padding: 22px 28px 18px;
}
.function-page .site-settings__body {
  padding: 0 28px 16px;
}
.function-page .site-settings__footer {
  padding: 14px 28px 18px;
}
.function-page .site-settings__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.function-page .site-settings__brand > span {
  color: var(--global-theme-color);
  font-family: Georgia, serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
}
.function-page .site-settings__header h2 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.3;
}
.function-page .site-settings__header h2 + p {
  font-size: 14px;
  line-height: 1.7;
}
.function-page .site-settings__icon-button {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--global-text-color) 5%, transparent);
  color: var(--global-text-color);
}
.function-page .site-settings__icon-button:hover {
  background: var(--function-wash);
  color: var(--global-theme-color);
  outline: 0;
}
.function-page .site-settings__public,
.function-page .site-settings__personalization {
  border: 0;
  padding: 0;
}
/* Sections remain named for assistive technology; the three rows need no repeated visible headings. */
.function-page .site-settings__public > .site-settings__section-heading,
.function-page .site-settings__personalization > .site-settings__section-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.function-page .site-settings__preferences {
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.function-page .site-settings__preference {
  min-height: 88px;
  padding: 18px 0;
  gap: 20px;
}
.function-page .site-settings__personalization .site-settings__preference {
  border-top: 1px solid color-mix(in srgb, var(--global-divider-color) 65%, transparent);
}
.function-page .site-settings__preference strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.function-page .site-settings__preference small {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.6;
}
.function-page .site-settings__segmented {
  gap: 2px;
  padding: 4px;
  border-radius: 11px;
}
.function-page .site-settings__segmented a {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.function-page .site-settings__segmented a[aria-current="page"] {
  background: var(--global-theme-color);
  color: var(--global-bg-color);
  box-shadow: none;
}
.function-page .site-settings__select {
  flex: 0 0 180px;
  min-width: 0;
  background: color-mix(in srgb, var(--global-text-color) 4%, var(--global-bg-color));
  border-color: transparent;
  border-radius: 10px;
}
.function-page .site-settings__select select {
  min-height: 44px;
  padding: 10px 34px 10px 14px;
  font-size: 14px;
  font-weight: 500;
}
.function-page .site-settings__select:hover {
  border-color: var(--global-divider-color);
}
.function-page .site-settings__owner {
  border-top: 1px solid var(--global-divider-color);
  border-bottom: 0;
  margin-top: 16px;
  padding: 0;
}
.function-page .site-settings__owner > summary {
  min-height: 64px;
  gap: 14px;
}
.function-page .site-settings__owner > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}
.function-page .site-settings__owner > summary .function-icon {
  color: var(--global-text-color-light);
  width: 17px;
  height: 17px;
}
.function-page .site-settings__owner > summary > small {
  margin-left: auto;
  font-size: 12px;
}
.function-page .site-settings__owner > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 4px;
}
.function-page .site-settings__owner[open] > summary::after {
  content: "";
  transform: rotate(135deg);
}
.function-page .site-settings__owner > summary:focus-visible {
  outline: 2px solid var(--global-theme-color);
  outline-offset: -2px;
  border-radius: 8px;
}
.function-page .site-settings__owner-content {
  padding-bottom: 20px;
}
.function-page .site-settings__owner-content h3 {
  font-weight: 600;
}
.function-page .site-settings__section-heading {
  gap: 12px;
  flex-wrap: wrap;
}
.function-page .site-settings__footer {
  align-items: stretch;
  flex-direction: column;
}
@media (max-width: 575px) {
  .function-page .site-settings-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 20px;
  }
  .function-page .site-settings {
    padding: 0;
  }
  .function-page .site-settings__header {
    padding: 18px 20px 14px;
  }
  .function-page .site-settings__body {
    padding: 0 20px 12px;
  }
  .function-page .site-settings__footer {
    padding: 12px 20px 16px;
  }
  .function-page .site-settings__header h2 {
    font-size: 28px;
  }
  .function-page .site-settings__preference {
    align-items: center;
    flex-direction: row;
    gap: 12px;
  }
  .function-page .site-settings__preference small {
    max-width: 10em;
    font-size: 12px;
  }
  .function-page .site-settings__select {
    flex: 0 0 142px;
    width: auto;
  }
  .function-page .site-settings__segmented {
    align-self: center;
  }
  .function-page .site-settings__segmented a {
    padding-inline: 10px;
  }
  .function-page .site-settings__owner > summary > small {
    display: block;
  }
}
@media (max-width: 360px) {
  .function-page .site-settings__header,
  .function-page .site-settings__body,
  .function-page .site-settings__footer {
    padding-inline: 16px;
  }
  .function-page .site-settings__preference {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }
  .function-page .site-settings__preference small {
    max-width: none;
  }
  .function-page .site-settings__select {
    flex-basis: auto;
  }
  .function-page .site-settings__segmented {
    align-self: flex-start;
  }
}

/* /assets/css/function-home.css */
/* 首页：左栏是人，右栏是去处；下面一条横向的最近更新。版式取自报刊式的博客首页。 */
body.function-home-page {
  padding-top: 88px;
}
.function-home-page > .container[role="main"] {
  width: min(1240px, calc(100% - 80px));
}
.function-home-page #navbar {
  top: 8px;
  width: min(1240px, calc(100% - 80px));
}
.function-intro {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
  padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px);
}
.function-intro-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.function-portrait {
  width: 100%;
  margin: 0 0 30px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--function-wash);
  aspect-ratio: 5 / 4;
}
.function-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 76% 24%;
  transform: none !important;
}
.function-intro-alias {
  margin: 0 0 6px;
  color: var(--global-text-color-light);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.function-intro h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 18px;
  font-size: 44px;
  line-height: 1.2;
}
.function-intro h1 > span {
  color: var(--global-text-color-light);
  font-family: var(--function-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.function-introduction {
  padding: 0;
}
.function-bio {
  margin: 0 0 12px;
  color: var(--global-text-color-light);
  font-size: 16px;
  line-height: 1.85;
  text-wrap: pretty;
}
.function-bio a {
  color: var(--global-text-color);
  text-decoration: underline;
  text-decoration-color: var(--global-divider-color);
  text-decoration-thickness: 1px;
  transition: text-decoration-color 180ms ease;
}
.function-bio a:hover {
  text-decoration-color: currentColor;
}
.function-interest {
  margin: 0;
  color: var(--global-text-color-light);
  font-size: 14px;
  line-height: 1.8;
}
.function-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
/* 右栏：像书的目录，一行一个去处 */
.function-directory {
  display: flex;
  flex-direction: column;
  counter-reset: directory;
}
.function-directory-heading {
  margin: 0 0 6px;
  color: var(--global-text-color-light);
  font-size: 14px;
}
.function-directory-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 24px 8px 24px 0;
  border-bottom: 1px solid var(--global-divider-color);
  color: var(--global-text-color) !important;
  text-decoration: none !important;
  counter-increment: directory;
  transition: background 200ms ease;
}
.function-directory-link:first-of-type {
  border-top: 1px solid var(--global-divider-color);
}
.function-directory-link::before {
  content: counter(directory, decimal-leading-zero);
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 10px;
  color: var(--global-text-color-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.function-directory-title {
  font-family: var(--function-serif);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.function-directory-note {
  grid-column: 2;
  margin-top: 4px;
  color: var(--global-text-color-light);
  font-size: 14px;
}
.function-directory-arrow {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--global-text-color-light);
  font-size: 22px;
  font-weight: 300;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 200ms ease;
}
.function-directory-link:hover .function-directory-arrow {
  color: var(--global-text-color);
  transform: translateX(6px);
}

/* GitHub：唯一的实心按钮，带账号名，醒目但不喧宾夺主 */
.function-button--github svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.function-button-note {
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid color-mix(in srgb, var(--global-bg-color) 30%, transparent);
  color: color-mix(in srgb, var(--global-bg-color) 70%, transparent);
  font-size: 13px;
  font-weight: 400;
}
.function-contact-links {
  align-items: center;
}
.function-text-link {
  padding: 4px 2px;
  color: var(--global-text-color) !important;
  font-size: 15px;
  text-decoration: underline !important;
  text-decoration-color: var(--global-divider-color) !important;
  text-underline-offset: 6px;
}
.function-text-link:hover {
  text-decoration-color: currentColor !important;
}
.function-colophon-links {
  display: inline-flex;
  gap: 20px;
}

/* 最近的更新：通栏横条，竖线分隔，可以左右滑 */
.function-timeline {
  margin: 0 calc(50% - 50vw);
  border-top: 1px solid var(--global-divider-color);
  border-bottom: 1px solid var(--global-divider-color);
}
.function-timeline-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: min(1240px, calc(100vw - 80px));
  margin: 0 auto;
  padding-top: 22px;
}
.function-timeline-heading h2 {
  margin: 0;
  color: var(--global-text-color-light);
  font-family: var(--site-font-family);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.function-timeline-heading > a {
  color: var(--global-text-color-light);
  font-size: 14px;
}
.function-timeline-heading > a:hover {
  color: var(--global-text-color);
}
.function-events {
  display: grid;
  grid-auto-columns: minmax(280px, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 22px max(40px, calc((100vw - 1240px) / 2)) 34px;
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: max(40px, calc((100vw - 1240px) / 2));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.function-events::-webkit-scrollbar {
  display: none;
}
.function-event {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  padding: 4px 40px;
  border-left: 1px solid var(--global-divider-color);
  scroll-snap-align: start;
}
.function-event:first-child {
  padding-left: 0;
  border-left: 0;
}
.function-event h3 {
  margin: 0;
  font-family: var(--function-serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.function-event h3 a {
  color: var(--global-text-color);
}
.function-event h3 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.function-event-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--global-text-color-light);
  font-size: 14px;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.function-event time {
  margin-top: auto;
  color: var(--global-text-color-light);
  font-size: 13px;
}
.function-event .activity-feed__edit {
  position: absolute;
  top: 0;
  right: 12px;
}
.function-reading {
  padding-top: 72px;
}

/* AI 编程用量：照搬 Contrail dashboard 的 Card / StatsPanel / ActivityHeatmap（Tailwind 类换成等值 CSS）。 */
.function-usage {
  --usage-card-bg: #fff;
  --usage-border: #e5e5e5;
  --usage-divider: #f5f5f5;
  --usage-tile-bg: #fafafa;
  --usage-strong: #0a0a0a;
  --usage-muted: #a3a3a3;
  --usage-soft: #737373;
  --usage-title: #737373;
  --usage-model: #404040;
  --usage-level-0: #ebedf0;
  --usage-level-1: #a7f3d0;
  --usage-level-2: #6ee7b7;
  --usage-level-3: #34d399;
  --usage-level-4: #10b981;
  --usage-level-0-badge: #6b7280;
  position: relative;
  padding: 0 0 72px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
}
html[lang="zh-CN"][data-theme="dark"] .function-usage {
  --usage-card-bg: #171717;
  --usage-border: #262626;
  --usage-divider: #262626;
  --usage-tile-bg: #262626;
  --usage-strong: #fafafa;
  --usage-muted: #a3a3a3;
  --usage-soft: #d4d4d4;
  --usage-title: #d4d4d4;
  --usage-model: #e5e5e5;
  --usage-level-0: #121212;
  --usage-level-1: #065f46;
  --usage-level-2: #059669;
  --usage-level-3: #10b981;
  --usage-level-4: #34d399;
  --usage-level-0-badge: #9ca3af;
}
@media (prefers-color-scheme: dark) {
  html[lang="zh-CN"]:not([data-theme]) .function-usage {
    --usage-card-bg: #171717;
    --usage-border: #262626;
    --usage-divider: #262626;
    --usage-tile-bg: #262626;
    --usage-strong: #fafafa;
    --usage-muted: #a3a3a3;
    --usage-soft: #d4d4d4;
    --usage-title: #d4d4d4;
    --usage-model: #e5e5e5;
    --usage-level-0: #121212;
    --usage-level-1: #065f46;
    --usage-level-2: #059669;
    --usage-level-3: #10b981;
    --usage-level-4: #34d399;
    --usage-level-0-badge: #9ca3af;
  }
}
/* 主题的 main.css 给所有 span/div 设了正文颜色；卡片内改回继承，颜色只由下面的类决定。
   :where() 让这条规则的优先级只有一个类选择器，不会压过后面的具体规则。 */
.function-usage :where(p, h3, div, span, strong, b, small, i) {
  color: inherit;
}
.usage-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
  gap: 20px;
}
.usage-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--usage-border);
  border-radius: 12px;
  background: var(--usage-card-bg);
}
.usage-stats {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.usage-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 次要数字与标签排成一行，卡片高度才能和热力图卡片对齐。 */
.usage-figure + .usage-figure {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--usage-divider);
}
.usage-figure + .usage-figure .usage-figure-value {
  font-size: 22px;
}
.usage-figure-label {
  color: var(--usage-title);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.usage-figure-value {
  color: var(--usage-strong);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.usage-figure--hero .usage-figure-value {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.usage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--usage-divider);
  color: var(--usage-muted);
  font-size: 12px;
  line-height: 16px;
}
.usage-footer-value {
  margin-left: 6px;
  color: var(--usage-soft);
  font-variant-numeric: tabular-nums;
}
.usage-footer a {
  color: var(--usage-soft);
  white-space: nowrap;
}
.usage-footer a:hover {
  color: var(--usage-strong);
}
.usage-heatmap-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.usage-heatmap-header h3 {
  margin: 0;
  color: var(--usage-title);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.usage-heatmap-header span {
  color: var(--usage-muted);
  font-size: 12px;
  line-height: 16px;
}
.usage-heatmap-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.usage-heatmap-months,
.usage-heatmap-grid {
  display: grid;
  column-gap: 3px;
}
.usage-heatmap-months {
  margin-bottom: 4px;
  color: var(--usage-muted);
  font-size: 10px;
  line-height: 15px;
  text-transform: uppercase;
}
.usage-heatmap-months span {
  white-space: nowrap;
}
/* 与星期标签列一样固定在左侧，横向滚动时盖住被切掉一半的月份。 */
.usage-heatmap-months > span:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--usage-card-bg);
  box-shadow: 3px 0 0 var(--usage-card-bg);
}
.usage-heatmap-days {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(7, 12px);
  row-gap: 3px;
  padding-right: 8px;
  background: var(--usage-card-bg);
  color: var(--usage-muted);
  font-size: 10px;
  line-height: 1;
}
.usage-heatmap-cells {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 12px);
  gap: 3px;
}
.usage-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--usage-level-0);
  cursor: pointer;
  transition: transform 150ms ease;
}
.usage-cell:hover {
  position: relative;
  z-index: 10;
  transform: scale(1.25);
}
.usage-cell[data-level="1"],
.usage-legend i[data-level="1"] {
  background: var(--usage-level-1);
}
.usage-cell[data-level="2"],
.usage-legend i[data-level="2"] {
  background: var(--usage-level-2);
}
.usage-cell[data-level="3"],
.usage-legend i[data-level="3"] {
  background: var(--usage-level-3);
}
.usage-cell[data-level="4"],
.usage-legend i[data-level="4"] {
  background: var(--usage-level-4);
}
.usage-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--usage-muted);
  font-size: 10px;
  line-height: 15px;
}
.usage-legend-cells {
  display: flex;
  gap: 2px;
}
.usage-legend i {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--usage-level-0);
}
.usage-status:empty {
  display: none;
}
.usage-status {
  margin: 12px 0 0;
  color: var(--usage-soft);
  font-size: 12px;
  text-align: center;
}
.usage-tooltip {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
  max-width: 280px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--usage-border) 50%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--usage-card-bg) 95%, transparent);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.usage-tooltip[hidden] {
  display: none;
}
.usage-tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--usage-divider);
}
.usage-tooltip-day {
  color: var(--usage-title);
  font-size: 11px;
  font-weight: 600;
}
.usage-tooltip-level {
  --badge: var(--usage-level-0-badge);
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--badge) 27%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge) 13%, transparent);
  color: var(--badge);
  font-size: 10px;
  font-weight: 500;
}
.usage-tooltip-level[data-level="1"] {
  --badge: var(--usage-level-1);
}
.usage-tooltip-level[data-level="2"] {
  --badge: var(--usage-level-2);
}
.usage-tooltip-level[data-level="3"] {
  --badge: var(--usage-level-3);
}
.usage-tooltip-level[data-level="4"] {
  --badge: var(--usage-level-4);
}
.usage-tooltip-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.usage-tooltip-amount strong {
  color: var(--usage-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.usage-tooltip-amount span,
.usage-tooltip-caption {
  color: var(--usage-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.usage-tooltip-models {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--usage-divider);
}
.usage-tooltip-model {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usage-tooltip-model-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}
.usage-tooltip-model-name {
  max-width: 120px;
  overflow: hidden;
  color: var(--usage-model);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-tooltip-model-figures {
  display: flex;
  align-items: center;
  gap: 6px;
}
.usage-tooltip-model-figures b {
  color: var(--usage-strong);
  font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
}
.usage-tooltip-model-figures small {
  min-width: 28px;
  color: var(--usage-muted);
  font-size: 9px;
  font-weight: 500;
  text-align: right;
}
.usage-tooltip-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--usage-divider);
}
.usage-tooltip-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--usage-level-4);
}

/* 训练进度卡片：站长在设置面板关闭后，对所有访客隐藏（实时生效，见
   site-preferences.liquid 里 data-published-training-card-visible 的写入）。 */
html[data-published-training-card-visible="false"] [data-training-card] {
  display: none;
}
/* 复用上面 .usage-card / .usage-figure 的卡片语言，曲线颜色取全局主题色
   （--global-theme-color），不新增调色板。 */
.training-minor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--usage-divider);
}
.training-minor-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.training-minor-label {
  color: var(--usage-title);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.training-minor-value {
  color: var(--usage-strong);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.training-chart-card {
  display: flex;
  flex-direction: column;
}
.training-chart-wrap {
  position: relative;
}
.training-chart {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
}
.training-chart-line {
  fill: none;
  stroke: var(--global-theme-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.training-chart-area {
  stroke: none;
  fill: color-mix(in srgb, var(--global-theme-color) 16%, transparent);
}
.training-chart-tooltip {
  position: absolute;
  z-index: 5;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--usage-border) 50%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--usage-card-bg) 95%, transparent);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  color: var(--usage-strong);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.training-chart-tooltip[hidden] {
  display: none;
}
.training-lr-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--usage-divider);
}
.training-lr-label {
  display: block;
  margin-bottom: 6px;
  color: var(--usage-title);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.training-lr-chart {
  display: block;
  width: 100%;
  height: 32px;
}
.training-lr-line {
  fill: none;
  stroke: color-mix(in srgb, var(--global-theme-color) 70%, var(--usage-muted));
  stroke-width: 1.5;
  stroke-linecap: round;
}
@media (max-width: 991.98px) {
  .usage-grid {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .function-usage {
    padding-bottom: 46px;
  }
  .usage-figure--hero .usage-figure-value {
    font-size: 48px;
  }
  .usage-footer {
    margin-top: 16px;
  }
  .usage-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .usage-cell {
    transition: none;
  }
}
.function-home .social {
  margin-top: 40px;
  padding: 72px 0 36px;
  border-top: 1px solid var(--global-divider-color);
  text-align: left;
}
.function-home .social h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.15;
}
.function-home .social .contact-note {
  max-width: 650px;
  margin: 0;
  color: var(--global-text-color-light);
  font-size: 16px;
  line-height: 1.85;
}
.function-home .social .contact-icons {
  justify-content: flex-start;
  gap: 24px;
  margin-top: 32px;
}
.function-colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 48px 0 0;
  color: var(--global-text-color-light);
  font-size: 12px;
}
@media (max-width: 991.98px) {
  .function-home-page > .container[role="main"],
  .function-home-page #navbar,
  html[data-function-scrolled="true"] .function-home-page #navbar {
    width: calc(100% - 40px);
  }
  .function-intro {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 48px;
  }
  .function-timeline-heading {
    width: calc(100vw - 40px);
  }
  .function-events {
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
}
@media (max-width: 760px) {
  body.function-home-page {
    padding-top: 80px;
  }
  .function-home-page > .container[role="main"] {
    width: calc(100% - 32px);
  }
  .function-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    padding: 24px 0 52px;
  }
  .function-portrait {
    aspect-ratio: 16 / 10;
    margin-bottom: 24px;
  }
  .function-intro h1 {
    font-size: 38px;
  }
  .function-directory-link {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    padding-block: 18px;
  }
  .function-directory-title {
    font-size: 26px;
  }
  .function-timeline-heading {
    width: calc(100vw - 32px);
  }
  .function-events {
    grid-auto-columns: minmax(78vw, 1fr);
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .function-event {
    padding-inline: 24px;
  }
  .function-event h3 {
    font-size: 20px;
  }
  .function-reading {
    padding-top: 52px;
  }
  .function-home .social {
    padding-top: 46px;
  }
  .function-home .social h2 {
    font-size: 40px;
  }
  .function-home .social .contact-note {
    font-size: 14px;
  }
  .function-home .social .contact-icons {
    display: grid;
    grid-template-columns: repeat(4, 48px);
    gap: 20px 24px;
    margin-top: 26px;
  }
  .function-colophon {
    gap: 14px;
    padding-top: 32px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .function-directory-arrow,
  .function-directory-link,
  .function-bio a {
    transition: none;
  }
}