/* ============================================================================
 * AzureArchive — 软件官网模板
 * 参考 https://yostar.cn/ 的设计语言：
 *   黑色导航/页脚 + 浅灰内容区 + #FFE656 黄色强调 + 杂志式留白排版
 * 换肤只改 :root 令牌
 * ==========================================================================*/

/* ---------- 1. 令牌 ---------- */
:root {
  --ink:      #000000;
  --paper:    #f5f5f5;
  --white:    #ffffff;
  --yellow:   #ffe656;
  --gray:     #848383;
  --gray-2:   #969696;
  --gray-3:   #505050;
  --gray-4:   #303030;
  --text:     #111111;
  --text-2:   #666666;
  --line:     #e2e2e2;

  --nav-h:    76px;
  --maxw:     1240px;
  --gut:      40px;

  --font: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font); line-height: 1.75; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.28; letter-spacing: -0.01em; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--yellow); color: #111; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- 3. 顶部导航（黑） ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); background: var(--ink);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 58px; }
.nav__link { position: relative; font-size: 17px; color: var(--gray); padding: 6px 0; transition: color .3s var(--ease); }
.nav__link:hover { color: #d8d8d8; }
.nav__link.is-on { color: var(--white); }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  border-radius: 2px; background: var(--yellow); opacity: 0; transform: translateY(6px);
  transition: all .3s var(--ease);
}
.nav__link.is-on::after, .nav__link:hover::after { opacity: 1; transform: none; }
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.nav__lang {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 96px; height: 30px; padding: 0 14px; border: 2px solid var(--gray);
  border-radius: 4px; color: var(--white); font-size: 13.5px;
}
.nav__lang i { width: 8px; height: 8px; border-right: 2px solid var(--gray-2); border-bottom: 2px solid var(--gray-2); transform: rotate(45deg) translate(-2px,-2px); }
.nav__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 158px; height: 44px; padding: 0 22px; background: var(--yellow);
  color: #000; border-radius: 22px; font-size: 17px; font-weight: 800;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,230,86,.35); }
.nav__burger { display: none; width: 28px; height: 20px; position: relative; }
.nav__burger span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; transition: .3s var(--ease); }
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 9px; }
.nav__burger span:nth-child(3) { top: 18px; }
.nav.is-open .nav__burger span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- 4. 首屏 KV 轮播 ---------- */
.hero { position: relative; margin-top: var(--nav-h); height: clamp(400px, 66vh, 760px); background: #0a0e17; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.hero__slide.is-on { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.06) 46%, rgba(0,0,0,.34) 100%),
    linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,0) 42%);
}
.hero__brand { position: absolute; left: 60px; bottom: 132px; max-width: 620px; z-index: 2; }
.hero__brand img { height: 46px; width: auto; margin-bottom: 16px; }
.hero__kicker { font-size: 13.5px; letter-spacing: .34em; color: var(--yellow); font-weight: 700; margin-bottom: 10px; }
.hero__title { font-size: clamp(28px, 3.6vw, 50px); color: #fff; font-weight: 800; letter-spacing: -.02em; }
.hero__sub { color: rgba(255,255,255,.72); font-size: 15px; margin-top: 14px; max-width: 520px; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: 50%; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.55);
  display: grid; place-items: center; color: #fff; transition: all .3s var(--ease); z-index: 3;
}
.hero__arrow:hover { background: var(--yellow); border-color: var(--yellow); color: #000; }
.hero__arrow svg { width: 18px; height: 18px; }
.hero__arrow--prev { left: 26px; }
.hero__arrow--next { right: 26px; }
.hero__thumbs {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero__thumb { width: 92px; height: 52px; border-radius: 5px; overflow: hidden; border: 2px solid transparent; opacity: .5; transition: all .32s var(--ease); }
.hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero__thumb:hover { opacity: .85; }
.hero__thumb.is-on { border-color: var(--yellow); opacity: 1; transform: translateY(-4px); }
.hero__count { position: absolute; right: 34px; bottom: 32px; z-index: 3; display: flex; align-items: center; gap: 14px; color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .26em; }
.hero__count::before { content: ""; width: 1px; height: 36px; background: rgba(255,255,255,.5); }

/* ---------- 5. 区块 ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: #fff; }
.tabs { display: flex; align-items: center; gap: 44px; padding-top: 40px; }
.tabs a { position: relative; font-size: 17px; color: var(--gray); padding-bottom: 12px; transition: color .3s var(--ease); }
.tabs a:hover { color: var(--text); }
.tabs a.is-on { color: var(--text); font-weight: 700; }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--yellow); opacity: 0; transition: opacity .3s var(--ease); }
.tabs a.is-on::after { opacity: 1; }
.tag {
  display: inline-block; background: var(--yellow); color: #111; font-size: 13.5px; font-weight: 700;
  letter-spacing: .06em; padding: 8px 30px 8px 16px; margin-bottom: 26px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.sec-title { font-size: clamp(26px, 3.2vw, 42px); letter-spacing: -.02em; }
.sec-desc { color: var(--text-2); font-size: 17px; margin-top: 18px; max-width: 680px; }
.sec-head { margin-bottom: 56px; }

/* ---------- 6. 装饰 ---------- */
.frame { position: relative; }
.frame::before { content: ""; position: absolute; left: -20px; top: -20px; width: 100%; height: 100%; background: var(--yellow); }
.frame img { position: relative; z-index: 1; width: 100%; }
.frame--rev::before { left: auto; right: -20px; }
.dots { position: absolute; width: 104px; height: 104px; z-index: 2;
  background-image: radial-gradient(var(--gray-3) 1.8px, transparent 1.8px);
  background-size: 15px 15px; opacity: .45; }

/* ---------- 7. 关于 ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 76px; align-items: center; }
.about-text p { color: var(--text-2); font-size: 15px; }
.about-text p + p { margin-top: 18px; }
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; margin-top: 40px; }
.about-facts b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.about-facts span { font-size: 13.5px; color: var(--gray); }

/* ---------- 8. 功能特性 ---------- */
.feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 84px; align-items: center; padding: 54px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__no { font-size: 13.5px; font-weight: 800; letter-spacing: .22em; color: #c9b400; }
.feature h3 { font-size: clamp(22px, 2.3vw, 30px); margin: 14px 0 18px; }
.feature p { color: var(--text-2); font-size: 15px; }
.feature__list { margin-top: 22px; display: grid; gap: 10px; }
.feature__list li { position: relative; padding-left: 24px; color: var(--text-2); font-size: 15px; }
.feature__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 3px; border-radius: 2px; background: var(--yellow); }
.feature__cta { margin-top: 32px; }

/* ---------- 9. 按钮 ---------- */
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 40px;
  border: 2px solid var(--gray); border-radius: 999px; color: var(--gray);
  font-size: 15px; font-weight: 700; transition: all .3s var(--ease);
}
.btn-outline:hover { border-color: var(--text); color: var(--text); }
.btn-solid {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 46px;
  border-radius: 999px; background: var(--yellow); color: #000; font-size: 17px; font-weight: 800;
  transition: all .3s var(--ease);
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,230,86,.36); }
.btn-solid--ghost { background: transparent; border: 2px solid rgba(255,255,255,.4); color: #fff; }
.btn-solid--ghost:hover { border-color: #fff; box-shadow: none; }

/* ---------- 10. 更新动态 ---------- */
.news-row { display: grid; grid-template-columns: 132px 200px 1fr auto; gap: 34px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); transition: all .35s var(--ease); }
.news-row:hover { background: var(--white); padding-left: 18px; padding-right: 18px; }
.news-row__date { display: flex; align-items: baseline; gap: 8px; color: var(--gray); }
.news-row__date .y { font-size: 15px; }
.news-row__date .d { font-size: 40px; font-weight: 300; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.news-row__date .m { font-size: 15px; }
.news-row__thumb { aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; }
.news-row__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-row:hover .news-row__thumb img { transform: scale(1.05); }
.news-row h4 { font-size: 21px; margin-bottom: 10px; }
.news-row p { color: var(--text-2); font-size: 15px; }
.news-row__more { color: var(--gray); font-size: 13.5px; white-space: nowrap; }
.news-row:hover .news-row__more { color: var(--text); }
.news-more { display: flex; justify-content: center; margin-top: 46px; }

/* ---------- 11. 下载区 ---------- */
.download { position: relative; overflow: hidden; text-align: center; padding: 110px 0; background: var(--ink); }
.download::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 380px at 50% 0%, rgba(255,230,86,.16), transparent 70%); }
.download > * { position: relative; }
.download h2 { font-size: clamp(28px, 3.6vw, 46px); color: #fff; }
.download p { color: rgba(255,255,255,.62); margin-top: 18px; font-size: 17px; }
.download__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 42px; }
.download__meta { margin-top: 30px; color: rgba(255,255,255,.45); font-size: 13.5px; letter-spacing: .04em; }

/* ---------- 12. 页脚（黑） ---------- */
.footer { background: var(--ink); padding: 76px 0 44px; border-top: 1px solid var(--gray-4); }
.footer__logo img { height: 42px; width: auto; }
.footer__nav { display: flex; flex-wrap: wrap; align-items: center; margin-top: 44px; }
.footer__nav a { position: relative; padding: 0 22px; font-size: 13.5px; color: var(--gray); transition: color .3s var(--ease); }
.footer__nav a:first-child { padding-left: 0; }
.footer__nav a:hover { color: #fff; }
.footer__nav a:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: var(--gray-3); }
.footer__legal { margin-top: 34px; display: grid; gap: 9px; }
.footer__legal p { font-size: 12px; color: var(--gray); }
.footer__legal a { color: var(--gray); }
.footer__copy { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--gray-4); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 12px; color: var(--gray); }

/* ---------- 13. 文档页 ---------- */
.docs { display: grid; grid-template-columns: 236px minmax(0, 1fr) 200px; gap: 60px; align-items: start; padding: calc(var(--nav-h) + 42px) 0 110px; }
.docs__side, .docs__toc { position: sticky; top: calc(var(--nav-h) + 30px); }
.docs__side h4, .docs__toc h4 { font-size: 12px; letter-spacing: .18em; color: var(--gray); margin: 26px 0 12px; font-weight: 800; }
.docs__side h4:first-child, .docs__toc h4:first-child { margin-top: 0; }
.docs__link { display: block; padding: 9px 14px; font-size: 15px; color: var(--gray); border-left: 2px solid transparent; transition: all .3s var(--ease); }
.docs__link:hover { color: var(--text); background: var(--white); }
.docs__link.is-on { color: var(--text); font-weight: 700; border-left-color: var(--yellow); background: var(--white); }
.toc__link { display: block; padding: 6px 0 6px 14px; font-size: 13.5px; color: var(--gray); border-left: 2px solid var(--line); transition: all .3s var(--ease); }
.toc__link:hover { color: var(--text); }
.toc__link.is-on { color: var(--text); border-left-color: var(--yellow); font-weight: 700; }
.toc__link--3 { padding-left: 28px; font-size: 12px; }
.docs__title { font-size: clamp(26px, 3.2vw, 40px); }
.docs__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; color: var(--gray); font-size: 13.5px; }
.docs__meta svg { width: 15px; height: 15px; }
.prose { margin-top: 40px; color: var(--text-2); font-size: 15px; }
.prose > * + * { margin-top: 18px; }
.prose .lead { font-size: 17px; color: var(--text); padding: 22px 26px; background: var(--white); border-left: 4px solid var(--yellow); }
.prose h2 { font-size: 21px; color: var(--text); margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h3 { font-size: 17px; color: var(--text); margin-top: 34px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose a { color: #1a6fd4; border-bottom: 1px solid rgba(26,111,212,.35); }
.prose a:hover { border-bottom-color: #1a6fd4; }
.prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { padding-left: 24px; list-style: revert; }
.prose li { margin-top: 8px; }
.prose li::marker { color: #c9b500; }
.prose code { font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; padding: 3px 8px; background: #ebebeb; color: #a07600; border-radius: 3px; }
.prose kbd { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 2px 8px; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: var(--text); }
.prose pre.code { padding: 24px 26px; border-radius: 4px; overflow-x: auto; background: #17181c; }
.prose pre.code code { background: none; padding: 0; color: #d8e2f2; font-size: 13.5px; line-height: 1.8; white-space: pre; }
.prose table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 15px; }
.prose th { text-align: left; padding: 14px 18px; background: #ededed; color: var(--text); font-size: 13.5px; }
.prose td { padding: 14px 18px; border-top: 1px solid var(--line); }
.prose tbody tr:hover { background: #fafafa; }
.callout { padding: 20px 24px; background: var(--white); border-left: 4px solid var(--gray); }
.callout > strong { display: block; color: var(--text); margin-bottom: 5px; }
.callout p { margin: 0; font-size: 15px; }
.callout--info { border-left-color: #3d6fe0; }
.callout--warn { border-left-color: var(--yellow); background: #fffdf0; }

/* ---------- 14. 动效与工具 ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.toast { position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 20px); padding: 13px 26px; border-radius: 999px; background: rgba(0,0,0,.9); color: #fff; font-size: 13.5px; z-index: 200; opacity: 0; pointer-events: none; transition: all .32s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gray); }
.crumbs a:hover { color: var(--text); }
.page-head { padding-top: 66px; }
.page-head h1 { font-size: clamp(28px, 3.6vw, 46px); }
.page-head p { color: var(--text-2); margin-top: 16px; max-width: 640px; }

/* ---------- 15. 响应式 ---------- */
@media (max-width: 1100px) {
  .docs { grid-template-columns: 210px minmax(0, 1fr); }
  .docs__toc { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 56px; }
  .feature { grid-template-columns: 1fr; gap: 44px; padding: 44px 0; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature .frame::before { left: -14px; top: -14px; }
  .news-row { grid-template-columns: 108px 1fr auto; gap: 22px; }
  .news-row__thumb { display: none; }
}
@media (max-width: 820px) {
  :root { --gut: 22px; }
  .nav { grid-template-columns: 1fr auto; padding: 0 22px; }
  .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 22px 22px; background: var(--ink); transform: translateY(-130%); transition: transform .35s var(--ease); }
  .nav.is-open .nav__links { transform: none; }
  .nav__link { padding: 16px 0; width: 100%; font-size: 17px; }
  .nav__link::after { display: none; }
  .nav__burger { display: block; }
  .nav__lang { display: none; }
  .nav__cta { min-width: 110px; height: 38px; font-size: 15px; padding: 0 16px; }
  .nav__brand img { height: 28px; }
  .hero { height: clamp(360px, 62vh, 520px); }
  .hero__shade { background: linear-gradient(to right, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 74%, rgba(0,0,0,.45) 100%), linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 52%); }
  .hero__brand { left: 22px; right: 22px; bottom: 108px; }
  .hero__brand img { height: 32px; margin-bottom: 12px; }
  .hero__arrow { width: 38px; height: 38px; }
  .hero__arrow--prev { left: 10px; }
  .hero__arrow--next { right: 10px; }
  .hero__count { display: none; }
  .hero__thumbs { bottom: 14px; gap: 7px; padding: 7px; }
  .hero__thumb { width: 58px; height: 34px; }
  .section { padding: 60px 0; }
  .tabs { gap: 26px; }
  .frame::before { left: -12px; top: -12px; }
  .about-facts { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .about-facts b { font-size: 28px; }
  .news-row { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .news-row:hover { padding-left: 0; padding-right: 0; }
  .news-row__date .d { font-size: 28px; }
  .footer__nav { gap: 6px 0; }
  .footer__nav a { padding: 0 14px; }
  .docs { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .docs__side { position: static; }
  .download { padding: 76px 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================================
 * 2.0 二次元活力层 —— 覆盖上面的基础配色
 * ==========================================================================*/
:root {
  --azure:  #3fa9ff;
  --cyan:   #6ff0ff;
  --pink:   #ff6fc0;
  --violet: #9b6bff;
  --mint:   #3fe0b0;
  --g-brand: linear-gradient(120deg, #3fa9ff, #6ff0ff);
  --g-pop:   linear-gradient(120deg, #ff6fc0, #9b6bff);
  --g-mint:  linear-gradient(120deg, #3fe0b0, #3fa9ff);
  --g-sun:   linear-gradient(120deg, #ffe656, #ffb03d);
  --g-rain:  linear-gradient(90deg, #3fa9ff, #6ff0ff, #ff6fc0, #9b6bff, #ffe656);
}
body {
  background-image:
    radial-gradient(720px 480px at 94% 0%, rgba(111,240,255,.32), transparent 62%),
    radial-gradient(620px 460px at 0% 24%, rgba(255,111,192,.16), transparent 62%),
    radial-gradient(780px 520px at 52% 102%, rgba(155,107,255,.15), transparent 64%);
  background-attachment: fixed;
}
/* 导航底部一条虹彩分割线 */
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--g-rain); opacity: .9; }
/* 每个区块自带的彩色氛围光 */
.section { position: relative; }
.section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(540px 340px at 95% 4%, rgba(111,240,255,.20), transparent 66%),
    radial-gradient(500px 320px at 1% 97%, rgba(255,111,192,.14), transparent 66%);
}
.section > .wrap { position: relative; z-index: 1; }

/* 品牌标记 */
.nav__brand .nav__mark { width: 34px; height: 34px; border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(130,200,255,.4), 0 6px 20px rgba(40,120,255,.45); }
.nav__word { color: #fff; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: .01em; }
/* 副标题现在是中文：字距从 .26em 收到 .12em，否则会散开 */
.nav__word em { display: block; font-style: normal; font-size: 12px; letter-spacing: .12em; color: var(--gray-2); margin-top: 3px; font-weight: 500; }
.hero__brand .hero__mark { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  box-shadow: 0 0 0 1px rgba(130,200,255,.45), 0 10px 32px rgba(30,110,255,.55); }
.footer__logo { display: flex; align-items: center; gap: 14px; }
.footer__logo .footer__mark { width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(130,200,255,.3); }
.footer__word { color: #fff; font-size: 21px; font-weight: 800; line-height: 1; }
.footer__word em { display: block; font-style: normal; font-size: 12px; letter-spacing: .28em; color: var(--gray); margin-top: 5px; font-weight: 600; }

/* 标签与装饰换成渐变 */
.tag { background: var(--g-brand); color: #fff; box-shadow: 0 8px 22px rgba(63,169,255,.34); }
.tag--pop  { background: var(--g-pop);  box-shadow: 0 8px 22px rgba(255,111,192,.34); }
.tag--mint { background: var(--g-mint); box-shadow: 0 8px 22px rgba(63,224,176,.32); }
.frame::before        { background: var(--g-brand); }
.frame--pop::before   { background: var(--g-pop); }
.frame--mint::before  { background: var(--g-mint); }
.frame--sun::before   { background: var(--g-sun); }
.dots { background-image: radial-gradient(var(--azure) 1.8px, transparent 1.8px); opacity: .42; }

/* 按钮上活力 */
.nav__cta  { background: var(--g-sun); box-shadow: 0 8px 22px rgba(255,200,60,.4); }
.nav__cta:hover  { box-shadow: 0 14px 32px rgba(255,170,50,.58); }
.btn-solid { background: var(--g-sun); box-shadow: 0 10px 26px rgba(255,190,60,.36); }
.btn-solid:hover { box-shadow: 0 16px 36px rgba(255,170,50,.55); }
.btn-outline:hover { border-color: transparent; color: #fff; background: var(--g-brand); box-shadow: 0 12px 28px rgba(63,169,255,.34); }
.feature__no { background: var(--g-pop); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 动态行左侧渐变色条 */
.news-row { position: relative; }
.news-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--g-brand); opacity: 0; transition: opacity .3s var(--ease); }
.news-row:hover::before { opacity: 1; }
.download::before { background: radial-gradient(760px 400px at 50% 0%, rgba(111,240,255,.22), transparent 68%), radial-gradient(620px 360px at 12% 110%, rgba(255,111,192,.2), transparent 68%); }

/* ---------- 看板娘 ---------- */
.mascot { position: fixed; right: 20px; bottom: 0; z-index: 90; width: 176px;
  transition: transform .45s var(--ease), opacity .45s var(--ease); }
.mascot::before { content: ""; position: absolute; left: 50%; bottom: -34px; width: 230px; height: 230px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(111,240,255,.5), transparent 68%); pointer-events: none; z-index: -1; }
.mascot__bubble { position: relative; margin-bottom: 10px; padding: 13px 16px; border-radius: 16px 16px 4px 16px;
  background: rgba(255,255,255,.97); border: 2px solid rgba(63,169,255,.38);
  box-shadow: 0 12px 30px rgba(50,90,170,.22); font-size: 13.5px; line-height: 1.65; color: #33405c; }
.mascot__bubble b { display: block; font-size: 12px; letter-spacing: .1em; color: var(--azure); margin-bottom: 5px; }
.mascot__img { width: 100%; cursor: pointer; display: block; transform-origin: 50% 100%;
  animation: mascotFloat 4.4s ease-in-out infinite; filter: drop-shadow(0 14px 26px rgba(40,80,170,.3)); }
.mascot__close { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  border: 2px solid rgba(63,169,255,.32); color: #7b88a1; font-size: 15px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(50,90,170,.22); }
.mascot__close:hover { color: var(--pink); border-color: var(--pink); }
.mascot.is-hidden { transform: translateY(115%); opacity: 0; pointer-events: none; }
@keyframes mascotFloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-12px) rotate(1.2deg); } }
@media (max-width: 640px) { .mascot { width: 116px; right: 10px; } .mascot__bubble { font-size: 12px; padding: 10px 12px; } }

/* ---------- 活力补强 ---------- */
.section--white { background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%); }
.tabs a::after { background: var(--g-rain); height: 4px; }
.sec-title { position: relative; padding-bottom: 16px; }
.sec-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 5px; border-radius: 3px; background: var(--g-brand); }
.about-facts b { -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-facts > div:nth-child(1) b { background-image: var(--g-brand); }
.about-facts > div:nth-child(2) b { background-image: var(--g-pop); }
.about-facts > div:nth-child(3) b { background-image: var(--g-mint); }
.about-facts > div:nth-child(4) b { background-image: var(--g-sun); }
.feature h3 { position: relative; padding-left: 18px; }
.feature h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 60%; border-radius: 3px; background: var(--g-brand); }
.news-row__date .d { background-image: var(--g-pop); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 640px) {
  .mascot { width: 92px; right: 8px; }
  .mascot__bubble { font-size: 12px; line-height: 1.55; padding: 8px 10px; margin-bottom: 6px; border-radius: 12px 12px 3px 12px; }
  .mascot__bubble b { font-size: 12px; margin-bottom: 3px; }
  .mascot__close { width: 22px; height: 22px; font-size: 13.5px; }
}

/* ---------- 中等宽度导航防挤压（1300 以下收窄间距） ---------- */
@media (max-width: 1320px) {
  .nav { padding: 0 26px; }
  .nav__brand { gap: 9px; }
  .nav__brand .nav__mark { width: 30px; height: 30px; }
  .nav__word { font-size: 15px; }
  .nav__links { gap: 30px; }
  .nav__link { font-size: 15px; }
  .nav__lang { min-width: 86px; font-size: 13.5px; padding: 0 10px; gap: 8px; }
  .nav__cta { min-width: 134px; height: 40px; font-size: 15px; padding: 0 18px; }
}
@media (max-width: 1080px) { .nav__lang { display: none; } }
@media (max-width: 900px) { .nav__links { gap: 22px; } .nav__link { font-size: 15px; } }

/* ---------- 看板娘气泡：长单词不再撑破容器 ---------- */
.mascot__bubble { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) {
  .mascot { width: 100px; right: 10px; }
  .mascot__bubble { font-size: 12px; line-height: 1.5; padding: 7px 9px; }
  .mascot__bubble b { font-size: 12px; }
}

/* ---------- 看板娘：显式定宽 + border-box，彻底杜绝溢出 ---------- */
.mascot { box-sizing: border-box; }
.mascot__bubble { box-sizing: border-box; width: 100%; }
@media (max-width: 640px) {
  .mascot { width: 132px; right: 10px; }
  .mascot__bubble { width: 132px; max-width: 132px; font-size: 12px; line-height: 1.5; padding: 7px 9px; }
  .mascot__bubble b { font-size: 12px; }
}

/* ============================================================================
 * 3.0 顶部导航（借鉴 kivo.wiki）与主按钮
 *     kivo 的做法：导航完全透明，浮在全幅主视觉上；左侧 logo + 白色搜索胶囊，
 *     右侧「图标 + 文字」菜单，白字配深色投影保证可读；滚动后才浮出底衬。
 *     ★ 导航 / 页脚 / 下载区 / 主按钮的最终配色都在这一段
 * ==========================================================================*/
:root {
  --nav-h: 68px;
  --g-foot: linear-gradient(160deg, #081f52 0%, #0f2f7e 55%, #261f6e 100%);
  --g-cta: linear-gradient(115deg, #ff6fc0 0%, #9b6bff 100%);
  --nav-accent: #ff8fd0;
  --nav-scrim: rgba(8, 20, 52, 0.86);
  --nav-ts: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* 首屏铺到导航下面，顶部加一层压暗保证白字可读 */
/* 所有幻灯片共用一个高度，切换时首屏不跳动 */
.hero { margin-top: 0; height: clamp(500px, 71vh, 800px); }
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 10, 28, 0.62), rgba(4, 10, 28, 0));
}
.hero__brand { z-index: 3; }

/* --- 导航本体：透明 --- */
.nav {
  display: flex; align-items: center; gap: 24px; padding: 0 34px;
  background: transparent; border-bottom: 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.nav::after { display: none; }
.nav.is-stuck {
  background: var(--nav-scrim);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 30px rgba(6, 18, 50, .3);
}
.nav__brand { flex: none; gap: 10px; }
.nav__brand .nav__mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 6px 18px rgba(4,20,60,.45); }
.nav__word { color: #fff; background: none; -webkit-background-clip: initial; background-clip: initial;
  font-size: 17px; font-weight: 800; line-height: 1; text-shadow: var(--nav-ts); }
.nav__word em { color: rgba(255,255,255,.72); }

/* --- 搜索胶囊 --- */
.nav__search { position: relative; flex: 0 1 320px; display: flex; align-items: center; gap: 9px; height: 38px;
  padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 6px 20px rgba(6,18,50,.25); }
.nav__search > svg { width: 16px; height: 16px; color: #7b8cae; flex: none; }
.nav__search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 13.5px; color: #22304d; font-family: inherit; }
.nav__search input::placeholder { color: #93a0bb; }
/* iOS / WebKit 会给 input[type=search] 自带一个放大镜（-webkit-search-decoration），
   和我们的 svg 图标叠在一起就成了「两个放大镜」。只有手机 Safari 会这样。 */
.nav__search input::-webkit-search-decoration,
.nav__search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.nav__results { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 5; display: none;
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 22px 54px rgba(6,18,50,.3); }
.nav__results.is-on { display: block; }
.nav__results a { display: block; padding: 11px 16px; border-bottom: 1px solid #eef1f8; }
.nav__results a:last-child { border-bottom: 0; }
.nav__results a:hover { background: #f4f8ff; }
.nav__results b { display: block; font-size: 13.5px; color: #1b2b4d; font-weight: 700; }
.nav__results small { display: block; color: #93a0bb; font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__empty { padding: 14px 16px; font-size: 13.5px; color: #93a0bb; }

/* --- 右侧「图标 + 文字」菜单 --- */
.nav__links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav__link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; font-size: 15px;
  color: rgba(255,255,255,.86); text-shadow: var(--nav-ts); background: none; transition: color .28s var(--ease); }
.nav__link::after { display: none; }
.nav__link svg { width: 17px; height: 17px; }
.nav__link:hover, .nav__link.is-on { color: #fff; }
.nav__link.is-on svg { color: var(--nav-accent); }

/* --- 更多下拉 --- */
.nav__more-wrap { position: relative; }
.nav__more-list { position: absolute; top: calc(100% + 12px); right: 0; min-width: 168px; padding: 8px; display: none;
  background: #fff; border-radius: 12px; box-shadow: 0 20px 48px rgba(6,18,50,.3); }
.nav__more-list.is-on { display: block; }
.nav__more-list a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: #22304d; }
.nav__more-list a:hover { background: #f4f8ff; color: #d6338f; }

.nav__burger span { box-shadow: 0 1px 6px rgba(0,0,0,.5); }

/* --- 页脚 / 下载区 --- */
.footer, .download { background: var(--g-foot); }
.footer__word { color: #fff; background: none; -webkit-background-clip: initial; background-clip: initial; }
.footer__word em { color: rgba(255,255,255,.62); }
.footer__nav a:hover { color: var(--nav-accent); }
.download::before {
  background: radial-gradient(760px 400px at 50% 0%, rgba(255,111,192,.24), transparent 68%),
              radial-gradient(620px 360px at 12% 110%, rgba(63,169,255,.24), transparent 68%);
}

/* --- 主按钮 --- */
.btn-solid { background: var(--g-cta); color: #fff; box-shadow: 0 10px 28px rgba(255,111,192,.4); }
.btn-solid:hover { box-shadow: 0 16px 38px rgba(155,107,255,.5); }
.btn-solid--ghost { background: transparent; border: 2px solid rgba(255,255,255,.45); color: #fff; }
.btn-outline:hover { border-color: transparent; color: #fff; background: var(--g-cta); box-shadow: 0 12px 28px rgba(255,111,192,.35); }

/* --- 首屏文案 --- */
.hero__kicker { color: #ff9ad6; }
.hero__title { background: linear-gradient(100deg, #ffffff 22%, #b7dcff 58%, #ffb6de 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: rgba(226,238,255,.82); }
.hero__thumb.is-on { border-color: var(--nav-accent); }
.hero__arrow:hover { background: var(--g-cta); border-color: transparent; color: #fff; }

/* --- 响应式 --- */
@media (max-width: 1240px) {
  .nav { gap: 16px; padding: 0 26px; }
  .nav__search { flex-basis: 210px; }
  .nav__links { gap: 22px; }
  .nav__link { font-size: 13.5px; }
  .nav__link svg { width: 16px; height: 16px; }
}
@media (max-width: 1040px) {
  .nav__link span { display: none; }
  .nav__link { gap: 0; }
  .nav__search { flex-basis: 176px; }
}
@media (max-width: 820px) {
  .nav { padding: 0 20px; gap: 12px; }
  .nav__search { flex: 1 1 auto; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    margin: 0; padding: 10px 20px 22px; background: var(--nav-scrim); backdrop-filter: blur(16px);
    transform: translateY(-130%); transition: transform .35s var(--ease);
  }
  .nav.is-open .nav__links { transform: none; }
  .nav__link { width: 100%; padding: 15px 0; font-size: 17px; gap: 10px; }
  .nav__link span { display: inline; }
  .nav__link svg { width: 19px; height: 19px; }
  .nav__more-wrap { width: 100%; }
  .nav__more-list { position: static; display: block; min-width: 0; padding: 0 0 0 29px; background: none; box-shadow: none; }
  .nav__more-list a { color: rgba(255,255,255,.72); padding: 8px 0; }
  .nav__more-list a:hover { background: none; color: #fff; }
  .nav__burger { display: block; }
}

/* ---------- 导航 flex 收缩修正（移动端搜索胶囊曾把汉堡挤出屏幕） ---------- */
.nav__search { min-width: 0; }
.nav__search > input { flex: 1 1 0; width: 0; min-width: 0; }
.nav__search > svg { flex: none; }
@media (max-width: 820px) {
  .nav__search { flex: 1 1 auto; min-width: 0; max-width: none; }
  .nav__brand { flex: none; min-width: 0; }
  .nav__word { font-size: 15px; }
  .nav__brand .nav__mark { width: 28px; height: 28px; }
  .nav__burger { flex: none; }
}
@media (max-width: 420px) {
  .nav__word em { display: none; }
}

/* ---------- 首屏新增：整图模式（活动海报这类自带文字的图） ---------- */
.hero__slide img.is-contain { object-fit: cover; background: none; }
.hero__slide img { object-position: center 50%; }

/* ---------- 首屏：默认浮层布局 ---------- */
.hero__stage { position: absolute; inset: 0; }

/* ---------- 首屏：整图模式（自带文字的海报，如活动图） ----------
 * 舞台按 16:9 自适应、图片原比例铺满 → 无黑边、不裁切；
 * 缩略图条从图上移到图下方的深色条，避免盖住海报文字。 */
/* has-post 模式已停用 —— 它让海报按 16:9 自适应高度，切换时首屏会跳动。
   现在高度恒定、图片一律 cover；fit 字段不再影响布局。 */
.hero.has-post { height: clamp(500px, 71vh, 800px); }
.hero.has-post .hero__stage { position: absolute; inset: 0; aspect-ratio: auto; }
.hero.has-post .hero__thumbs {
  position: static; left: auto; bottom: auto; transform: none; margin: 0; border-radius: 0;
  justify-content: center; padding: 12px 16px; background: #0a1020;
}

.hero.has-post .hero__slide img.is-contain { object-fit: cover; background: none; }
@media (max-width: 820px) {
  /* 海报是整图而非背景，所以移动端把它压到导航下方，并给导航实底衬 */
  body.has-post .nav {
    background: var(--nav-scrim);
    backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 8px 24px rgba(6, 18, 50, 0.28);
  }
  body.has-post .nav::after { display: none; }
  .hero.has-post .hero__stage { margin-top: var(--nav-h); }
  .hero.has-post .hero__thumbs { padding: 9px 12px; }
}

/* ============================================================================
 * 4.0 文档正文补充样式（Wiki.js 迁移内容需要）
 * ==========================================================================*/
.prose h4 { font-size: 17px; color: var(--text); margin-top: 26px; font-weight: 800; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; border: 1px solid var(--line); }
.prose blockquote { margin: 0; }
.prose .callout { margin: 18px 0; }
.prose .tx-red   { color: #e0455f; font-weight: 700; }
.prose .tx-blue  { color: #1a6fd4; font-weight: 600; }
.prose .tx-green { color: #12a06a; font-weight: 700; }

/* 标签页（Windows / Android / iOS） */
.tabset { margin: 22px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); }
.tabset-tabs { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; background: #eef1f8; border-bottom: 1px solid var(--line); }
.tabset-tabs li { padding: 11px 22px; font-size: 13.5px; font-weight: 600; color: var(--gray); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.tabset-tabs li:hover { color: var(--text); }
.tabset-tabs li.is-active { background: var(--white); color: var(--text); box-shadow: inset 0 -3px 0 #ff6fc0; }
.tabset-panel { padding: 18px 22px; }
.tabset-panel[hidden] { display: none; }
.tabset-panel > * + * { margin-top: 12px; }

/* 标签页标题去掉 .prose ul 带出来的项目符号 */
.prose .tabset-tabs { list-style: none; padding-left: 0; margin: 0; }
.prose .tabset-tabs li { margin-top: 0; }
.prose .tabset-tabs li::marker { content: none; }

/* ============================================================================
 * 4.1 链接卡片列表（Wiki.js 的 links-list，迁移时常用）
 * ==========================================================================*/
.prose .links-list { list-style: none; padding-left: 0; margin: 22px 0; display: grid; gap: 12px; }
.prose .links-list > li { margin: 0; }
.prose .links-list > li > a {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.prose .links-list > li > a:hover {
  border-color: #bfe0ff;
  background: #f7fbff;
  transform: translateX(2px);
}
.prose .links-list > li > a em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.7;
}

/* ============================================================================
 * 5.0 视觉收敛 —— 源头修正
 *
 * 盘点结论（oil-ui 存量优化流程）：
 *   1. 骨架来自 yostar 的黑白黄，后来叠了一层蓝/粉/紫/薄荷的"二次元活力层"，
 *      两套体系同时存在，谁也不让谁。
 *   2. 标签与配图装饰框用了 4 种渐变，但哪块用哪种没有规律 —— 随机即等于没有记忆点。
 *   3. 全页铺了 3 层柔光径向渐变，把本来硬朗的编辑感磨成了营销模板。
 *
 * 决定：骨架用墨色 + 中性灰，**强调色只留品牌黄一种**（它本来就是这套系统的资产）。
 *       装饰性渐变色全部退出，只保留功能性的深色区（下载区 / 页脚）。
 * ==========================================================================*/

/* 1. 去掉全页柔光，回到干净的纸面 */
body { background: var(--paper); background-image: none; }
.section::before { display: none; }

/* 2. 标签：统一品牌黄（原来 4 种渐变随机分配） */
.tag,
.tag--pop,
.tag--mint,
.tag--brand,
.tag--sun {
  background: var(--yellow) !important;
  color: #111 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* 3. 配图装饰框：从"色块"降为"画稿裁切线"
 *    黄色如果铺满每个配图，就不叫强调色了。这里只留偏移的细线，
 *    保留编辑器的几何签名，把黄色让回给标签与主按钮。 */
.frame::before,
.frame--brand::before,
.frame--pop::before,
.frame--mint::before,
.frame--sun::before {
  background: none !important;
  background-image: none !important;
  border: 1px solid rgba(17, 17, 17, .16);
}

/* 4. 主操作：黄底墨字。强调色只由品牌黄承担，去掉粉紫渐变 */
.btn-solid {
  background: var(--yellow) !important;
  background-image: none !important;
  color: #111 !important;
  box-shadow: none !important;
}
.btn-solid:hover { filter: brightness(.95); }
.btn-outline:hover {
  background: var(--yellow) !important;
  background-image: none !important;
  color: #111 !important;
  border-color: var(--yellow) !important;
  box-shadow: none !important;
}

/* 5. 点阵装饰降为极轻，不和配图抢注意力 */
.dots { opacity: .16; }

/* 6. 灰度文字统一提一档，长段落更耐读 */
:root { --text-2: #5a5a5a; }

/* 7. 数字与序号不再按位置换色
 *    原来「关于」的 4 个数字分别是蓝/粉/薄荷/黄四种渐变 —— 颜色按位置分配，
 *    不表达任何含义。这里统一为墨色，让数字本身的量级说话。 */
.about-facts b,
.about-facts > div:nth-child(1) b,
.about-facts > div:nth-child(2) b,
.about-facts > div:nth-child(3) b,
.about-facts > div:nth-child(4) b {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--ink) !important;
}

/* FEATURE 01 这类小标是"刻度"，不是强调，退回中性灰 */
.feature__no {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--gray-3) !important;
}

/* ---------------------------------------------------------------------------
 * 8. 首屏身份条
 *    海报是第一主角，但访客看完海报仍不知道"这是什么软件"。不遮挡海报，
 *    在海报下方补一条极简的身份带：名称 / 定位 / 版本 / 主操作。
 * -------------------------------------------------------------------------*/
.hero-bar { background: var(--ink); color: #fff; }
.hero-bar .wrap { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.hero-bar b { font-size: 17px; letter-spacing: -.01em; }
.hero-bar__cn { font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.hero-bar__meta { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, .45); white-space: nowrap; }
.hero-bar__cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 20px;
  border-radius: 999px; background: var(--yellow); color: #000;
  font-size: 13.5px; font-weight: 800; white-space: nowrap;
  transition: filter .2s var(--ease);
}
.hero-bar__cta:hover { filter: brightness(.94); }
@media (max-width: 820px) {
  .hero-bar .wrap { flex-wrap: wrap; padding: 10px 0; gap: 6px 12px; min-height: 0; }
  .hero-bar__cn { font-size: 12px; }
  .hero-bar__meta { display: none; }
  .hero-bar__cta { margin-left: auto; height: 32px; padding: 0 16px; font-size: 12px; }
}

/* 9. 区块标签页的当前项：原来是五色彩虹渐变（--g-rain），
 *    它标记的是"你在哪"，不该是装饰。退回一根墨色细线。 */
.tabs a::after {
  background: var(--ink) !important;
  background-image: none !important;
  height: 2px;
  border-radius: 1px;
}

/* ============================================================================
 * 10. 文档侧边栏：对比度与图标
 *   问题：链接用的是 --gray(#848383) 放在 --paper(#f5f5f5) 上，对比度约 3.5:1，
 *         中文小字在这个亮度下发灰、发虚。分类标题还套了英文的 letter-spacing。
 * ==========================================================================*/
.docs__link {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-2) !important;          /* #5a5a5a，对比度约 7:1 */
  padding: 9px 12px;
}
.docs__link:hover { color: var(--text) !important; }
.docs__link.is-on { color: var(--text) !important; }

.docs__ico {
  flex: none; width: 17px; height: 17px;
  display: grid; place-items: center;
  color: #96a2b8;
  transition: color .2s var(--ease);
}
.docs__ico svg { width: 16px; height: 16px; stroke-width: 1.7; }
.docs__link:hover .docs__ico { color: #5f6b82; }
.docs__link.is-on .docs__ico { color: #b8a600; }
.docs__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 分类标题：中文不要拉字距，颜色提一档 */
.docs__side h4, .docs__toc h4 {
  letter-spacing: 0 !important;
  font-size: 12px;
  color: #6f7891 !important;
  font-weight: 800;
}

/* ============================================================================
 * 11. 文档页阅读面 —— 解决「整页偏暗」
 *
 * 测量结论：整页只有 body 的一层 #f5f5f5，正文 article 是透明的。
 * 深色文字直接压在中灰底上，读起来发闷；侧边栏和正文也分不出层次。
 * 做法：页面底色提亮到 #fafafa，正文给一张真正的白纸。
 * ==========================================================================*/
body { background: #fafafa; }

.docs article {
  background: var(--white);
  border: 1px solid #ededed;
  border-radius: 14px;
  padding: 42px 48px 46px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .03), 0 8px 28px rgba(20, 30, 60, .04);
}

@media (max-width: 820px) {
  .docs article {
    padding: 24px 18px 30px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* 侧边栏在更亮的底上保持可读，但不要比正文更抢眼 */
.docs__side h4, .docs__toc h4 { color: #6f7891 !important; }

/* ============================================================================
 * 12. 浅色导航（方案 A）
 *
 * 首页顶部仍是透明浮层（压在海报上，白字）；一旦向下滚动、或进入非首页，
 * 导航变成「白底毛玻璃 + 深色文字」，接近 GitHub / Notion 的文档站观感。
 * 搜索胶囊在白底上会消失，所以同步换成浅灰底。
 * ==========================================================================*/
.nav.is-stuck {
  background: rgba(255, 255, 255, .9) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid #ececec;
  box-shadow: 0 1px 0 rgba(17, 17, 17, .04), 0 8px 26px rgba(20, 30, 60, .05) !important;
  --nav-ts: none;
}

.nav.is-stuck .nav__word { color: #14213d !important; text-shadow: none !important; }
.nav.is-stuck .nav__word em { color: #8a93a6 !important; }
.nav.is-stuck .nav__mark { box-shadow: 0 0 0 1px rgba(20, 30, 60, .08) !important; }

.nav.is-stuck .nav__link { color: #4a5877 !important; text-shadow: none !important; }
.nav.is-stuck .nav__link:hover,
.nav.is-stuck .nav__link.is-on { color: #14213d !important; }
.nav.is-stuck .nav__link.is-on svg { color: #c9a400 !important; }
.nav.is-stuck .nav__link svg { color: inherit; }

.nav.is-stuck .nav__more-wrap > button { color: #4a5877 !important; text-shadow: none !important; }
.nav.is-stuck .nav__more-wrap > button:hover { color: #14213d !important; }

/* 白底上白色胶囊会消失，换成浅灰底 */
.nav.is-stuck .nav__search {
  background: #f1f4f9 !important;
  box-shadow: inset 0 0 0 1px #e4e8f0 !important;
}
.nav.is-stuck .nav__search input { color: #22304d !important; }
.nav.is-stuck .nav__search input::placeholder { color: #9aa4b8 !important; }
.nav.is-stuck .nav__search > svg { color: #8a93a6 !important; }

.nav.is-stuck .nav__burger span { background: #22304d !important; box-shadow: none !important; }

/* 移动端下拉面板也跟着变白 —— 必须放在断点内，否则桌面端的菜单容器也会被刷白 */
@media (max-width: 820px) {
  .nav.is-stuck .nav__links {
    background: #fff !important;
    box-shadow: 0 18px 40px rgba(20, 30, 60, .12) !important;
  }
  .nav.is-stuck .nav__links .nav__link { color: #22304d !important; }
}

/* ============================================================================
 * 13. 两层文档树 + 导航亮度回调
 * ==========================================================================*/

/* 子页面：缩进 + 更小的图标，和父页面拉开层次 */
.docs__link--child {
  padding-left: 30px !important;
  font-size: 13.5px !important;
}
.docs__link--child .docs__ico { width: 14px; height: 14px; }
.docs__link--child .docs__ico svg { width: 13px; height: 13px; stroke-width: 1.6; }
.docs__link--child .docs__ico { color: #aab4c6; }
.docs__link--child.is-on .docs__ico { color: #b8a600; }

/* 父页面稍微加重，和子项区分 */
.docs__link:not(.docs__link--child) .docs__txt { font-weight: 600; }
.docs__link:not(.docs__link--child).is-on .docs__txt { font-weight: 800; }

/* 导航亮度回调：纯白在浅色页面上过曝，改成极淡的冷灰白 */
.nav.is-stuck {
  background: rgba(248, 249, 252, .82) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

/* ============================================================================
 * 14. 更新公告的版本节奏
 *   原文是「日期 / 标题 / 列表」全平铺成段落，读起来一片糊。
 *   给每次更新建立三段式：日期像时间轴刻度，标题加粗，列表回到列表。
 * ==========================================================================*/
.prose .rel-date {
  margin: 34px 0 4px; padding-top: 16px;
  border-top: 1px dashed #e8e8e8;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #8a93a6;
}
.prose .rel-date:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.prose .rel-title { margin: 26px 0 4px; font-size: 17px; font-weight: 800; color: var(--text); line-height: 1.5; }
.prose .rel-title + ol, .prose .rel-title + ul { margin-top: 6px; }
.prose .rel-date + .rel-title { margin-top: 6px; }

/* ============================================================================
 * 15. 贡献人员名单：crew 卡片墙
 *   原来是从 Wiki 直接搬的内联样式卡片（写死 background/shadow/width:200px +
 *   一个装饰性的蓝色「在线灯」），和站点完全不是一个体系，窄屏还会挤在一起。
 *   改成站点自己的组件：网格自适应、用设计令牌、状态文案降级为小字。
 * ==========================================================================*/
.prose .crew {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 14px;
  margin: 26px 0 6px;
}
.prose .crew__card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 14px 16px;
  text-align: center;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.prose .crew__card:hover {
  border-color: #dcdcdc;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(17, 17, 17, .07);
}
.prose .crew__avatar {
  width: 84px; height: 84px;
  border-radius: 50% !important;
  object-fit: cover;
  margin: 0 auto 14px !important;
  border: 2px solid #f2f2f2 !important;
  display: block;
  background: #f7f7f7;
}
.prose .crew__name {
  font-size: 15px; font-weight: 800; color: var(--text);
  line-height: 1.45; word-break: break-word;
}
.prose .crew__role {
  margin-top: 7px;
  font-size: 12px; line-height: 1.65;
  color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .prose .crew { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
  .prose .crew__card { padding: 16px 10px 14px; }
  .prose .crew__avatar { width: 64px; height: 64px; margin-bottom: 10px !important; }
  .prose .crew__name { font-size: 13.5px; }
  .prose .crew__role { font-size: 12px; -webkit-line-clamp: 2; }
}

/* ============================================================================
 * 16. 手机端文档目录
 *   问题：≤820px 时 .docs 变成单列，侧栏在 DOM 里排在正文前面 ——
 *   于是整棵 35 项的目录堆在文章上方，要滚很久才看得到正文。
 *   做法：手机上收进一个「文档目录」按钮，默认折叠，点开再展开。
 * ==========================================================================*/
.docs__toggle { display: none; }

@media (max-width: 820px) {
  .docs__toggle {
    display: flex; align-items: center; gap: 10px;
    width: 100%; box-sizing: border-box;
    padding: 14px 16px; margin-bottom: 4px;
    border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--text);
    font-size: 13.5px; font-weight: 700; text-align: left;
    cursor: pointer;
  }
  .docs__toggle svg { width: 18px; height: 18px; color: #8a93a6; flex: none; }
  .docs__toggle-cur {
    margin-left: auto; max-width: 46%;
    font-size: 12px; font-weight: 400; color: var(--text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .docs.is-side-open .docs__toggle { border-color: #cfd4dd; background: #fbfbfc; }

  /* 默认收起整棵目录 */
  .docs__side { display: none; }
  .docs.is-side-open .docs__side {
    display: block;
    padding: 10px 0 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
}

/* ============================================================================
 * 17. 手机端横向溢出的兜底
 *   根因：.docs 的列用了 1fr（最小 auto），内容里的宽表格把整列撑宽。
 *   这里补两层兜底：文章块允许收缩、超宽表格在自己的框里横向滚动。
 * ==========================================================================*/
.docs article { min-width: 0; }

.prose { overflow-wrap: break-word; }

.prose > table,
.prose .table-container {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose pre { max-width: 100%; overflow-x: auto; }

/* 手机端：装饰点阵会伸出容器 26px，把页面撑宽 4px */
@media (max-width: 820px) {
  .dots { display: none !important; }
}

/* ============================================================================
 * 18. 文档底部「上一篇 / 下一篇」
 *   原来是内联的 1fr 1fr 网格 + .btn-outline 的 40px 左右内边距，
 *   390px 窄屏下两个按钮挤不下，把页面撑宽 10px。
 * ==========================================================================*/
.docs__pager-wrap { margin-top: 56px; }
.docs__pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.docs__pager .btn-outline { min-width: 0; padding: 13px 22px; }
.docs__pager .btn-outline > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.docs__pager .btn-outline span span { display: block; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 820px) {
  .docs__pager-wrap { margin-top: 36px; }
  .docs__pager { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .docs__pager .btn-outline { padding: 12px 18px; width: 100%; box-sizing: border-box; }
}

/* ============================================================================
 * 19. 手机端目录分组折叠
 *   35 项全展开太长。手机上默认只展开当前文章所在的分类，其余点标题才展开；
 *   展开后整个面板限高并在内部滚动，不把正文往下挤。
 * ==========================================================================*/
.docs__gnum,
.docs__chev { display: none; }

@media (max-width: 820px) {
  .docs__side { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .docs__ghead {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0 4px !important;
    padding: 11px 12px;
    border-radius: 9px;
    background: #f6f7fa;
    color: #5f6b82 !important;
    font-size: 12px !important;
    cursor: pointer;
    user-select: none;
    transition: background .15s;
  }
  .docs__ghead:active { background: #eef0f5; }
  .docs__group.is-open > .docs__ghead { background: #f0f2f7; }
  .docs__gnum {
    margin-left: auto;
    font-style: normal; font-size: 12px; font-weight: 700;
    color: #aeb7c8;
  }
  .docs__chev {
    display: inline-block; margin-left: 6px;
    font-style: normal; font-size: 12px; color: #8a93a6;
    transition: transform .18s var(--ease);
  }
  .docs__group:not(.is-open) .docs__chev { transform: rotate(-90deg); }
  .docs__group:not(.is-open) > .docs__link { display: none; }

  /* 收起状态下，分类之间留一点呼吸 */
  .docs__group + .docs__group { margin-top: 2px; }
}

/* ============================================================================
 * 21. 图片灯箱
 *   文档正文里的图片点击后全屏预览，Esc / 点空白 / 点图片都能关。
 * ==========================================================================*/
.prose img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(6, 10, 20, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.lightbox.is-on { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  cursor: zoom-out;
  transform: scale(.97);
  transition: transform .22s var(--ease);
}
.lightbox.is-on img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .24); }

.lightbox__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  color: rgba(255, 255, 255, .58);
  font-size: 13px;
  padding: 0 6vw;
  pointer-events: none;
}

body.is-lightbox { overflow: hidden; }

/* ============================================================================
 * 22. 手机端首屏裁切
 *   品牌海报是 16:9、标题在左侧；竖屏下 cover 只取中间一块，
 *   会把「AzureArchive」裁成「rchive」。这里把取景框移到左侧。
 * ==========================================================================*/
@media (max-width: 820px) {
  /* 六张轮播图都是 16:9：手机上按比例完整显示。
     之前用 62vh 高度 + cover，等于只截中间一小块，字被放大到失真。 */
  .hero { height: auto; aspect-ratio: 16 / 9; }
  .hero .hero__slide img { object-position: center; }

  /* 文字层贴底收紧，避免在小高度里被截 */
  .hero__brand { bottom: 76px; left: 18px; right: 18px; }
  .hero__kicker { margin-bottom: 6px; }
  .hero__sub { margin-top: 8px; font-size: 13px; }

  /* 箭头会盖住画面，藏掉；切换靠缩略图 */
  .hero .hero__arrow { display: none; }
  .hero .hero__count { display: none; }
  .hero .hero__thumbs { bottom: 6px; padding: 5px 6px; gap: 5px; }
  .hero .hero__thumb { width: 40px; height: 24px; }
}

/* ============================================================================
 * 23. 手机端表格
 *   三列表格在 390px 宽里会被挤成「背景抖 / 动」，改成保持最小宽度 + 横向滚动。
 * ==========================================================================*/
@media (max-width: 820px) {
  .prose > table {
    min-width: 620px;
    font-size: 13.5px;
  }
  .prose > table th,
  .prose > table td { padding: 10px 12px; vertical-align: top; }
  .prose > table th { white-space: nowrap; }
}

/* ============================================================================
 * 24. 宽表格横向滚动
 *   三列以上的表格在手机上必然超宽，套一层可滚动容器，别让右侧被裁掉。
 * ==========================================================================*/
.prose .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 22px 0;
  padding-bottom: 2px;
}
.prose .table-scroll > table { margin: 0; }
@media (max-width: 820px) {
  .prose .table-scroll > table { min-width: 620px; }
}

/* ============================================================================
 * 25. 代码块（仿 GitHub）
 *   头部一条浅灰栏：左边语言标签，右边复制按钮。
 * ==========================================================================*/
.prose .code-block {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  margin: 22px 0;
  background: #fcfcfd;
}
.prose .code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  background: #f4f5f7;
  border-bottom: 1px solid #e5e7eb;
}
.prose .code-block__lang {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8b93a3;
}
.prose .code-block__copy {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: #6b7280;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.prose .code-block__copy:hover { background: #e6e8ec; color: #111; }
.prose .code-block__copy:active { background: #dcdfe5; }

.prose .code-block pre {
  margin: 0;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13.5px;
  line-height: 1.7;
}
.prose .code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  color: #24292f;
  background: none;
  padding: 0;
}

/* 正文里的视频外链：比普通链接更醒目一点，带 ▶ 前沿 */
.prose .video-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff3c4;
  color: #7a5c00;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.prose .video-link:hover { background: var(--yellow); color: #3d3000; }

/* ============================================================================
 * 26. 手机端标签页（tabset）
 *   7 个标签在 390px 里会各挤成一列竖排字。改成横排不换行 + 横向滑动。
 * ==========================================================================*/
@media (max-width: 820px) {
  .prose .tabset-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prose .tabset-tabs::-webkit-scrollbar { display: none; }
  .prose .tabset-tabs > li {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 13px;
  }
  .prose .tabset-panel { padding: 14px; }
}

/* 标签页面板顶部的小说明（从标签名里挪出来的补充信息） */
.prose .tab-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ============================================================================
 * 27. 视觉收敛（第二版）
 *   去掉早期"蓝粉渐变"的遗留：粉色统一为黄；首屏不再被黑罩压暗；
 *   身份条从纯黑改成深蓝，和海报衔接；正文目录提高对比度。
 * ==========================================================================*/

:root {
  --nav-accent: #ffe656;
}

/* 首屏：海报本身够暗，不需要 82% 的黑色渐变，只留底部暗角垫住缩略图 */
.hero__shade {
  background:
    linear-gradient(to top, rgba(3, 8, 20, .62) 0%, rgba(3, 8, 20, 0) 30%),
    linear-gradient(to right, rgba(3, 8, 20, .28) 0%, rgba(3, 8, 20, 0) 38%);
}

.hero__kicker { color: var(--yellow); }

/* 身份条：纯黑 → 深蓝，与海报同色系 */
.hero-bar {
  background: linear-gradient(180deg, #060d1e 0%, #0b1730 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.hero-bar__cn { color: rgba(255, 255, 255, .62); }
.hero-bar__meta { color: rgba(255, 255, 255, .58); }

/* 右侧目录：对比度 2.8:1 → 4.9:1 */
.toc__link { color: #5f6b82; }
.toc__link--3 { color: #71809a; }

/* 区块节奏略收紧 */
.section { padding: 78px 0; }

.hero__thumb.is-on { border-color: var(--yellow); }