/* Screenshot-style homepage. All rules are scoped to the public homepage. */
.reference-home{background:#f6f6f8;color:#333;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-size:14px}
.reference-home .reference-header{height:64px;background:#fff;border-bottom:1px solid #eee}
.reference-home .reference-header-inner{position:relative;display:flex;align-items:center;gap:42px;width:min(1200px,calc(100% - 48px));height:100%;margin:auto}
.reference-home .reference-brand{font-size:23px;font-weight:800;letter-spacing:-.5px;color:#1687ff;white-space:nowrap}
.reference-home .reference-brand em{font-style:italic;color:#ff4667;margin-right:2px}
.reference-home .reference-brand small{font-size:14px;margin-left:3px}
.reference-home .reference-nav{display:flex;align-items:center;gap:30px;font-size:14px;height:100%;min-width:0}
.reference-home .reference-nav a:hover,.reference-home .reference-nav a[aria-current]{color:#1687ff}
.reference-home .reference-search-toggle,.reference-home .reference-menu-toggle{display:grid;place-items:center;width:36px;height:36px;padding:7px;background:transparent;color:#666;border-radius:4px}
.reference-home .reference-search-toggle{margin-left:auto;order:3}
.reference-home .reference-menu-toggle{display:none}
.reference-home .reference-header svg{width:20px;height:20px}
.reference-home .reference-search-form{position:absolute;z-index:5;right:0;top:calc(100% + 8px);width:min(360px,100%);display:flex;padding:12px;background:white;box-shadow:0 4px 24px #0001;border:1px solid #e9e9ee;border-radius:5px;gap:8px}
.reference-home .reference-search-form input{width:100%;min-width:0;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:16px}
.reference-home .reference-search-form button{background:#1687ff;color:white;border-radius:4px;padding:0 15px;white-space:nowrap}
.reference-home .reference-layout{width:min(1200px,calc(100% - 48px));margin:20px auto 40px;display:grid;grid-template-columns:minmax(0,880fr) minmax(0,300fr);gap:18px;align-items:start}
.reference-home .reference-main,.reference-home .reference-sidebar{min-width:0;display:flex;flex-direction:column;gap:18px}
.reference-home .reference-banner{position:relative;isolation:isolate;aspect-ratio:1000/404;border-radius:6px;overflow:hidden;background:#990bdb}
.reference-home .reference-banner>img{width:100%;height:100%;object-fit:cover}
.reference-home .banner-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;padding:25px}
.reference-home .banner-slide h1,.reference-home .banner-slide h2{font-size:32px;line-height:1.4;margin:0 0 10px;font-weight:600;letter-spacing:1px}
.reference-home .banner-slide p{font-size:21px;line-height:1.6;margin:0;font-weight:600;letter-spacing:1px}
.reference-home .banner-dots{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:0}
.reference-home .banner-dots button{position:relative;width:20px;height:22px;padding:0;background:transparent}
.reference-home .banner-dots button:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#ffffff65;left:7px;top:7px}
.reference-home .banner-dots button[aria-pressed=true]:after{background:#087db3}
.reference-home .reference-panel{background:#fff;border:1px solid #e9e9ee;border-radius:6px;padding:15px;overflow:hidden}
.reference-home .reference-panel>h2{font-size:16px;font-weight:700;line-height:1.5;margin:0 0 12px}
.reference-home .recommend-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;overflow-x:auto;scrollbar-width:none}
.reference-home .recommend-track::-webkit-scrollbar{display:none}
.reference-home .recommend-item{min-width:0;display:block}
.reference-home .recommend-item img{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:5px}
.reference-home .recommend-item span,.reference-home .reference-gallery span{display:block;font-size:13px;line-height:1.7;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reference-home .reference-post{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid #eee;min-width:0}
.reference-home .reference-post:first-child{padding-top:10px}
.reference-home .reference-post:last-child{border-bottom:0;padding-bottom:5px}
.reference-home .reference-cover{width:184px;flex-shrink:0;aspect-ratio:1.6;align-self:flex-start;overflow:hidden;border-radius:5px}
.reference-home .reference-cover img{width:100%;height:100%;object-fit:cover}
.reference-home .reference-post-copy{min-width:0;flex:1;display:flex;flex-direction:column}
.reference-home .reference-post h3{font-size:17px;line-height:1.6;margin:0 0 9px;font-weight:600;overflow-wrap:anywhere}
.reference-home .reference-post h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reference-home .post-badge{display:inline-block;vertical-align:2px;font-size:11px;font-weight:400;background:#1687ff;color:#fff;border-radius:3px;padding:1px 5px;margin-right:8px;line-height:1.6}
.reference-home .reference-post-copy>p{color:#999;font-size:13px;line-height:1.9;margin:0 0 12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.reference-home .reference-meta{display:flex;gap:10px;align-items:center;color:#aaa;font-size:11px;line-height:1.6;margin-top:auto;flex-wrap:wrap}
.reference-home .author-mark{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;color:#129bb7;background:#e6f6fc;font-size:10px;margin-right:-5px;flex-shrink:0}
.reference-home .post-author{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reference-home .reading-time{margin-left:auto}
.reference-home .wechat-banner{display:flex;align-items:center;justify-content:center;gap:22px;background:#2bc260;color:#fff;width:100%;height:98px;border:1px solid #23b95a;border-radius:6px;padding:10px}
.reference-home .wechat-symbol{width:70px;height:70px;background:white;color:#2bc260;padding:8px;border-radius:3px;flex-shrink:0}
.reference-home .wechat-symbol svg{width:100%;height:100%}
.reference-home .wechat-banner strong{display:block;font-size:19px;letter-spacing:2px;line-height:1.6}
.reference-home .wechat-banner small{display:block;font-size:15px;line-height:1.8;margin-top:2px}
.reference-home .reference-sidebar .reference-panel>h2{display:flex;align-items:center;gap:8px}
.reference-home .reference-sidebar .reference-panel>h2:before{content:"";width:4px;height:14px;background:#1687ff;border-radius:2px}
.reference-home .reference-ranking{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.reference-home .reference-ranking li{display:flex;gap:10px;align-items:flex-start}
.reference-home .rank{margin-top:4px;border-radius:3px;background:#f2f2f2;width:22px;line-height:16px;flex-shrink:0;text-align:center;font-size:12px;font-weight:700}
.reference-home .rank-1{background:#ff3761;color:white}.reference-home .rank-2{background:#ffa800;color:white}.reference-home .rank-3{background:#1687ff;color:white}.reference-home .rank-4{background:#36d354;color:white}
.reference-home .reference-ranking a{font-size:14px;min-width:0;line-height:1.6}
.reference-home .reference-ranking a>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.reference-home .reference-ranking time{display:block;font-size:11px;color:#999;margin-top:8px}
.reference-home .reference-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.reference-home .reference-gallery a{min-width:0}
.reference-home .reference-gallery img{width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:5px}
.reference-home .tag-cloud{gap:8px}.reference-home .tag-cloud a{color:#888;border-color:#eee;background:#f9f9fb}
.reference-home .reference-result{font-size:13px;color:#999}.reference-home .reference-result a{color:#1687ff;margin-left:8px}
.reference-home .pagination{margin:22px 0 8px}.reference-home .pagination .current{background:#1687ff}
.reference-home .article-pagination{align-items:center;gap:12px;font-size:13px;flex-wrap:wrap}
.reference-home .article-pagination a,.reference-home .article-pagination .pagination-disabled{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border:1px solid #dce3ef;border-radius:6px;line-height:1.5}
.reference-home .article-pagination a{color:#176bff;background:#f8faff}
.reference-home .article-pagination a:hover{background:#edf4ff;border-color:#176bff}
.reference-home .article-pagination a:focus-visible{outline:2px solid #176bff;outline-offset:3px}
.reference-home .article-pagination .pagination-disabled{color:#a8adb7;background:#f7f8fa;border-color:#eceef2}
.reference-home .article-pagination .pagination-position{color:#7e8795;white-space:nowrap}
.reference-home .reference-layout a:hover{color:#1687ff}
.reference-home :is(a,button,input):focus-visible{outline:2px solid #1687ff;outline-offset:3px}
.reference-home .editorial-directory{display:flex;flex-direction:column}
.reference-home .editorial-directory>a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:34px;border-bottom:1px solid #f0f1f4;font-size:13px;color:#526073}
.reference-home .editorial-directory>a:last-child{border-bottom:0}
.reference-home .directory-count{font-size:11px;color:#9aa2ad;white-space:nowrap}
.reference-home .directory-count i{font-style:normal;margin-left:12px;font-size:17px}
.reference-home .reading-intro{font-size:12px;color:#9099a6;margin:0 0 12px;line-height:1.7}
.reference-home .reading-route{list-style:none;margin:0;padding:0}
.reference-home .reading-route a{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f0f1f4}
.reference-home .route-number{display:grid;place-items:center;flex-shrink:0;width:30px;height:34px;background:#f0f5fb;border:1px solid #e7edf6;border-radius:4px;font-size:11px;color:#6281a7;font-weight:600}
.reference-home .reading-route strong{display:block;font-size:13px;color:#455269;font-weight:500}
.reference-home .reading-route small{display:block;font-size:11px;color:#99a2af;margin-top:5px}
.reference-home .reading-route i{font-style:normal;color:#a0a9b6;margin-left:auto}
.reference-home .route-contact{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px;margin-top:15px;background:#f5f8fd;border:1px solid #e6edf7;border-radius:4px;color:#6281a7;font-size:12px}
.reference-home .route-contact:hover{background:#edf4ff;color:#1687ff}
.reference-home .directory-topics{padding-top:12px;margin-top:8px;border-top:1px solid #f0f1f4}
.reference-home .directory-topics .tag-cloud{gap:6px}
.reference-home .directory-topics .tag-cloud a{padding:5px 8px;font-size:10px}
@media(min-width:761px) and (max-width:1000px){.reference-home .reference-header-inner{gap:25px}.reference-home .reference-nav{gap:18px;font-size:12px}.reference-home .reference-layout{grid-template-columns:minmax(0,1fr) 240px;gap:16px}.reference-home .banner-slide h1,.reference-home .banner-slide h2{font-size:26px}.reference-home .banner-slide p{font-size:16px}.reference-home .reference-cover{width:145px}.reference-home .wechat-banner{gap:12px}.reference-home .wechat-banner strong{font-size:16px}.reference-home .wechat-banner small{font-size:12px}.reference-home .wechat-symbol{width:62px;height:62px}.reference-home .reference-meta{gap:6px}.reference-home .meta-category{display:none}}
@media(max-width:760px){
  .reference-home .reference-header{height:52px}
  .reference-home .reference-header-inner{width:calc(100% - 20px);justify-content:center;gap:0}
  .reference-home .reference-brand{font-size:20px}.reference-home .reference-brand small{font-size:12px}
  .reference-home .reference-search-toggle{position:absolute;left:0;margin:0}.reference-home .reference-menu-toggle{position:absolute;right:0;display:grid}
  .reference-home .reference-nav{display:none;position:absolute;z-index:6;left:0;right:0;top:calc(100% + 6px);height:auto;background:white;border:1px solid #eee;border-radius:5px;box-shadow:0 5px 20px #0001;padding:8px 15px;gap:0}
  .reference-home .reference-nav.is-open{display:flex;flex-direction:column;align-items:stretch}.reference-home .reference-nav a{padding:12px 4px;border-bottom:1px solid #f4f4f4}.reference-home .reference-nav a:last-child{border:0}
  .reference-home .reference-layout{width:calc(100% - 16px);margin:8px auto 24px;display:block}
  .reference-home .reference-main{gap:10px}.reference-home .reference-sidebar{display:none}
  .reference-home .reference-banner{border-radius:4px}.reference-home .banner-slide{padding:12px}
  .reference-home .banner-slide h1,.reference-home .banner-slide h2{font-size:clamp(16px,4.6vw,28px);margin:0 0 6px;letter-spacing:.5px}
  .reference-home .banner-slide p{font-size:clamp(10px,2.7vw,16px);letter-spacing:.4px}
  .reference-home .banner-dots{bottom:0}.reference-home .banner-dots button:after{width:5px;height:5px}
  .reference-home .reference-panel{padding:10px;border-radius:4px}.reference-home .reference-panel>h2{font-size:15px;margin-bottom:10px}
  .reference-home .recommend-track{display:flex;gap:10px;scroll-snap-type:x mandatory;padding-bottom:2px}
  .reference-home .recommend-item{flex:0 0 35%;scroll-snap-align:start}.reference-home .recommend-item img{border-radius:4px}
  .reference-home .recommend-item span{font-size:11px;margin-top:3px}
  .reference-home .reference-post{gap:10px;padding:13px 0}.reference-home .reference-post:first-child{padding-top:8px}
  .reference-home .reference-cover{width:25%;aspect-ratio:1.43;border-radius:4px}
  .reference-home .reference-post h3{font-size:13px;line-height:1.65;margin:0 0 6px}
  .reference-home .reference-post h3 a{-webkit-line-clamp:1}.reference-home .post-badge{font-size:9px;padding:1px 4px;margin-right:5px;vertical-align:1px}
  .reference-home .reference-post-copy>p{display:none}.reference-home .reference-meta{font-size:10px;gap:6px;flex-wrap:nowrap;white-space:nowrap}
  .reference-home .author-mark{width:13px;height:13px;font-size:8px;margin-right:-3px}.reference-home .post-author{max-width:66px}
  .reference-home .meta-category,.reference-home .reading-time{display:none}
  .reference-home .latest-panel{padding-bottom:12px}.reference-home .reference-search-form{top:calc(100% + 6px)}
}
@media(prefers-reduced-motion:reduce){.reference-home *{scroll-behavior:auto;transition:none}}