/* Shared visual language for editorial pages, tools, and the directory. */
body.article-site {
  --primary: #a84f2d;
  --primary-dark: #873c21;
  --primary-light: #f7eee8;
  --primary-soft: #ead0c1;
  --text: #292722;
  --text-secondary: #68645d;
  --text-muted: #89847b;
  --bg: #f7f8fa;
  --bg-white: #fff;
  --border: #dfe3e7;
  --border-light: #eaedf0;
  --radius: 3px;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.article-site .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #dfe3e7;
  background: rgba(255, 255, 255, .97);
  box-shadow: none;
  backdrop-filter: saturate(140%) blur(8px);
}
.article-site .site-header > .container {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1240px;
  min-height: 58px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-site .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #292722;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.2px;
  text-decoration: none;
}
.article-site .site-symbol {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}
.article-site .header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto !important;
}
.article-site .header-nav a {
  padding: 0;
  color: #69645d;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  text-decoration: none;
}
.article-site .header-nav a:hover { color: #a84f2d; background: transparent; }

.article-site .article-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}
.article-site .article-list-hero {
  padding: 25px 0 21px;
  margin: 0 0 18px;
  border-bottom: 1px solid #dfe3e7;
  text-align: left;
}
.article-site .article-list-hero h1 {
  margin: 0 0 6px;
  color: #292722;
  font-size: 27px;
  font-weight: 720;
  letter-spacing: -.45px;
}
.article-site .article-list-hero p { margin: 0; color: #68645d; font-size: 13px; }
.article-site .search-box { max-width: 620px; margin: 15px 0 0; }
.article-site .search-box input {
  min-height: 40px;
  padding: 9px 13px 9px 39px;
  border: 1px solid #d7dce1;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}
.article-site .search-box input:focus { border-color: #b9795d; box-shadow: 0 0 0 2px rgba(168,79,45,.1); }
.article-site .filter-pill { border-radius: 3px; }
.article-site .article-card,
.article-site .feature-card,
.article-site .faq-item,
.article-site .tldr,
.article-site .cta-box {
  border-radius: 3px;
  box-shadow: none;
}
.article-site .article-card { border-color: #dfe3e7; transition: border-color .15s, background .15s; }
.article-site .article-card:hover { border-color: #b9795d; background: #fffdfa; transform: none; box-shadow: none; }
.article-site .article-card .ac-tag { border-radius: 2px; }
.article-site .article-header h1 { color: #292722; font-size: 29px; letter-spacing: -.35px; }
.article-site article.article-wrap > .article-header,
.article-site article.article-wrap > .tldr,
.article-site article.article-wrap > .article-body,
.article-site article.article-wrap > .faq-item,
.article-site article.article-wrap > .related-tools,
.article-site article.article-wrap > .cta-box { max-width: 820px; }
.article-site article.article-wrap > .breadcrumb,
.article-site article.article-wrap > .article-header,
.article-site article.article-wrap > .tldr,
.article-site article.article-wrap > .article-body,
.article-site article.article-wrap > .faq-item,
.article-site article.article-wrap > .related-tools,
.article-site article.article-wrap > .cta-box { margin-right: auto; margin-left: auto; }
.article-site .tldr { border-color: #e2e0dc; border-left-color: #a84f2d; background: #fff; }
.article-site .tldr-label { color: #a84f2d; }
.article-site .tldr a { color: #873c21; text-decoration: underline; text-underline-offset: 2px; }
.article-site .article-body a { color: #873c21; }
.article-site .article-body h2 { border-bottom-color: #dfe3e7; }
.article-site .article-body code { border-radius: 2px; }
.article-site .article-body pre { border-radius: 3px; background: #292722; }
.article-site .steps > li::before { border-radius: 3px; background: #a84f2d; }
.article-site .cta-box { background: #292722; }
.article-site .site-footer { border-top: 1px solid #dfe3e7; background: #fff; color: #777169; }
.article-site .site-footer > .container { display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; max-width: 1160px; min-height: 68px; padding: 12px 24px; }
.article-site .site-footer p { margin: 0; font-size: 11px; }
.article-site .site-footer p:first-child { color: #39352f; font-weight: 700; }
.article-site .site-footer .footer-beian { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.article-site .site-footer a { color: #777169; }

@media (max-width: 760px) {
  .article-site .site-header > .container { min-height: 54px; gap: 12px; padding: 7px 16px; }
  .article-site .header-nav { gap: 13px; }
  .article-site .header-nav a { font-size: 11px; white-space: nowrap; }
  .article-site .article-wrap { padding: 15px 16px 42px; }
  .article-site .article-list-hero { padding: 17px 0 16px; }
  .article-site .article-list-hero h1 { font-size: 22px; }
  .article-site .article-header h1 { font-size: 23px; }
  .article-site .site-footer > .container { align-items: flex-start; flex-direction: column; padding: 14px 16px; }
}