/* 全站共用 X 默认与暗黑色板，赞助粉彩和媒体背景独立保留。 */
:root {
  --bg: #ffffff; --surface: #ffffff; --band: #f7f9f9; --band-soft: #f7f9f9; --soft: var(--band-soft);
  --fg: #0f1419; --muted: #536471; --line: #eff3f4; --link: #1d9bf0;
  --accent: #0f1419; --accent-fg: #ffffff; --logo-bg: #172235; --logo-fg: #ffffff;
  --site-content-width: 1634px; --site-header-left: 8px; --site-header-right: 8px; --site-header-top: 24px;
  --site-content-side-space: calc(clamp(112px, 12vw, 190px) + 16px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #000000; --band: #16181c; --band-soft: #16181c;
  --fg: #e7e9ea; --muted: #71767b; --line: #2f3336;
  --accent: #eff3f4; --accent-fg: #0f1419; --logo-bg: #eff3f4; --logo-fg: #0f1419;
  color-scheme: dark;
}
/* 按主站中栏对齐所有页头，正文仍保留各页自己的阅读宽度。 */
html { scrollbar-gutter: stable; }
/* 中栏按布局实际宽度独立限宽，广告开关不改变阅读宽度，滚动条也计入可用空间。 */
.page-layout, .ranking-layout { container-type: inline-size; }
.page-layout > .content, .ranking-layout > .page-shell { max-width: min(var(--site-content-width), calc(100cqw - 2 * var(--site-content-side-space))); }
.site-header.site-chrome, .header-inner.site-chrome { width: min(var(--site-content-width), calc(100% - var(--site-header-left) - var(--site-header-right))); margin: var(--site-header-top) auto 0; margin-left: max(var(--site-header-left), calc((100% - var(--site-content-width) + var(--site-header-left) - var(--site-header-right)) / 2)); }
/* 桌面页头按左右赞助是否开启预留空间，与精选中栏的网格位置一致。 */
@media (min-width: 901px) {
  :root[data-sponsor-left="true"] { --site-header-left: calc(clamp(112px, 12vw, 190px) + 24px); }
  :root[data-sponsor-right="true"] { --site-header-right: calc(clamp(112px, 12vw, 190px) + 24px); }
}
/* 页头使用系统字体，避免网络字体加载和不同正文行高造成跳动。 */
.site-chrome { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; min-height: 55px; padding: 0 0 10px; border-bottom: 1px solid var(--line); font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
.site-chrome .site-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; color: var(--fg); font-size: 20px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-wordmark { margin: 0; font: inherit; }
.site-logo { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px; background: var(--logo-bg); color: var(--logo-fg); font-size: 18px; font-weight: 500; }
.site-chrome .site-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 18px; width: auto; }
.site-chrome .site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-chrome .site-nav a:hover { color: var(--link); }
.site-chrome .site-nav a[aria-current="page"] { color: var(--link); }
.site-chrome .language { display: flex; align-items: center; flex: none; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--link) 8%, var(--surface)); }
.site-chrome .language button, .site-chrome .language a { display: grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; text-decoration: none; }
.site-chrome .language [aria-pressed="true"], .site-chrome .language [aria-current="page"] { background: var(--surface); color: var(--link); font-weight: 700; }
.theme-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.theme-switch { display: grid; place-items: center; flex: none; width: 56px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.switch-track { display: block; position: relative; width: 56px; height: 30px; border-radius: 999px; background: var(--muted); transition: background 160ms ease; }
.switch-thumb { display: grid; place-items: center; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; color: #536471; transition: transform 160ms ease; }
.switch-thumb svg { width: 15px; height: 15px; }
.theme-switch[aria-checked="true"] .switch-track { background: var(--link); }
.theme-switch[aria-checked="true"] .switch-thumb { transform: translateX(26px); color: #0f1419; }
@media (max-width: 900px) {
  :root { --site-header-left: 24px; --site-header-right: 24px; --site-content-side-space: 0px; }
}
@media (max-width: 650px) {
  :root { --site-header-left: 12px; --site-header-right: 12px; --site-header-top: 12px; }
}
@media (max-width: 480px) {
  /* 缩紧小屏页头的文字与间距，让英文导航和语言入口保持同一行。 */
  .site-chrome { flex-wrap: nowrap; gap: 8px; }
  .site-chrome .site-brand { gap: 6px; font-size: 15px; }
  .site-logo { width: 24px; height: 24px; }
  .site-chrome .site-nav { gap: 8px; }
  .site-chrome .site-nav a { font-size: 12px; }
  .site-chrome .language { padding: 2px; }
  .site-chrome .language button, .site-chrome .language a { min-width: 28px; padding-inline: 4px; font-size: 10px; }
}
@media (pointer: coarse) {
  /* 没有语言胶囊的 Blog 首页也预留相同触控页头高度。 */
  .site-chrome { min-height: 61px; }
  .site-chrome .language button, .site-chrome .language a { min-width: 44px; min-height: 44px; }
}
@media (max-width: 480px) and (pointer: coarse) {
  /* 保留触控高度，仅收窄宽度，避免语言胶囊把导航挤到下一行。 */
  .site-chrome .language button, .site-chrome .language a { min-width: 28px; }
  .site-chrome { min-height: 59px; }
}
@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-thumb { transition: none; }
}