.page-home {
  background-color: var(--color-page-bg);
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}
.page-home .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}
.page-home img {
  max-width: 100%;
  height: auto;
}

/* 面包屑 */
.page-home .breadcrumb {
  padding: 14px 0 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.page-home .breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.page-home .breadcrumb a:hover {
  color: var(--color-accent-red);
}
.page-home .breadcrumb__sep {
  margin: 0 6px;
  color: var(--color-border);
}

/* 首屏磁贴 */
.page-home .hero-tiles {
  padding: 22px 0 48px;
}
.page-home .hero-tiles__head {
  margin-bottom: 26px;
}
.page-home .hero-tiles__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  color: var(--color-card-orange);
  margin-bottom: 12px;
}
.page-home .hero-tiles h1 {
  font-family: var(--font-headings);
  font-size: clamp(26px, 6vw, 54px);
  line-height: 1.08;
  margin: 0 0 8px;
  color: var(--color-text-primary);
}
.page-home .hero-tiles__sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}
.page-home .hero-tiles__matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}

.page-home .hero-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.page-home .hero-tile:hover {
  transform: rotate(-1deg);
  box-shadow: 8px 8px 0 rgba(0,0,0,.55);
}
.page-home .hero-tile__code {
  font-size: 12px;
  letter-spacing: .12em;
  opacity: .72;
}
.page-home .hero-tile__icon {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid currentColor;
  align-self: flex-end;
  margin-top: auto;
}
.page-home .hero-tile__name {
  font-family: var(--font-headings);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
}
.page-home .hero-tile__count {
  font-size: 14px;
  font-weight: 700;
}
.page-home .hero-tile__keyword {
  font-size: 10px;
  letter-spacing: .06em;
  border: 1px solid currentColor;
  padding: 3px 6px;
  align-self: flex-start;
  opacity: .8;
}
.page-home .hero-tile__arrow {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 24px;
}

.page-home .hero-tile--download {
  background-color: var(--color-section-bg-a);
  color: var(--color-text-primary);
}
.page-home .hero-tile--browse {
  background-color: var(--color-card-orange);
  color: #121212;
}
.page-home .hero-tile--aux {
  background-color: var(--color-card-cyan);
  color: #121212;
}
.page-home .hero-tile--integrated {
  background-color: var(--color-card-yellow);
  color: #121212;
}

@media (min-width: 720px) {
  .page-home .hero-tiles__matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .page-home .hero-tile--download {
    margin-top: 24px;
  }
  .page-home .hero-tile--aux {
    margin-top: 48px;
  }
}

/* 区块通用头部 */
.page-home .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
}
.page-home .section-head h2 {
  font-family: var(--font-headings);
  font-size: 26px;
  margin: 0;
}
.page-home .section-index {
  font-family: var(--font-headings);
  font-size: 34px;
  line-height: 1;
  color: var(--color-accent-red);
  opacity: .75;
}

/* 最新收录条目墙 */
.page-home .recent-wall {
  background-color: var(--color-section-bg-a);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: 40px 0;
}
.page-home .recent-wall__batch {
  font-size: 12px;
  color: var(--color-card-yellow);
  border: 1px solid var(--color-card-yellow);
  padding: 4px 8px;
}
.page-home .recent-wall__texturewrap {
  margin-bottom: 18px;
}
.page-home .recent-wall__texture {
  width: 400px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  opacity: .8;
}
.page-home .recent-wall__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.page-home .recent-wall__more {
  display: inline-block;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .page-home .recent-wall__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .page-home .wall-card--lg {
    grid-column: span 2;
  }
}

/* 卡片 */
.page-home .wall-card {
  padding: 0;
  border: 3px solid var(--color-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.page-home .wall-card:hover {
  transform: rotate(-1deg);
  box-shadow: 9px 9px 0 rgba(0,0,0,.55);
}
.page-home .wall-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 2px solid var(--color-border);
}
.page-home .wall-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-home .wall-card__mediafall {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headings);
  font-size: 30px;
  letter-spacing: .1em;
  background-color: var(--color-section-bg-b);
  color: rgba(255,255,255,.6);
  border-bottom: 2px solid var(--color-border);
}
.page-home .wall-card__body {
  padding: 14px;
}
.page-home .wall-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.page-home .card__title {
  font-family: var(--font-headings);
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}
.page-home .card__meta {
  font-size: 12px;
  margin: 0 0 10px;
  color: var(--color-text-secondary);
}
.page-home .card--orange .card__meta,
.page-home .card--yellow .card__meta,
.page-home .card--cyan .card__meta {
  color: rgba(18,18,18,.72);
}
.page-home .wall-card__tag {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border: 1px solid currentColor;
  opacity: .85;
}

/* CTA 卡片 */
.page-home .wall-card--cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 260px;
  background: var(--color-section-bg-b);
  border: 3px dashed var(--color-card-cyan);
  text-decoration: none;
}
.page-home .wall-card--cta:hover {
  transform: rotate(1deg);
}
.page-home .wall-card__cta-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.page-home .wall-card__cta-code {
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--color-card-orange);
}
.page-home .wall-card__cta-title {
  font-family: var(--font-headings);
  font-size: 24px;
  color: var(--color-text-primary);
}
.page-home .wall-card__cta-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* 热门入口榜单 */
.page-home .hot-rank {
  padding: 40px 0;
}
.page-home .hot-rank__head {
  margin-bottom: 16px;
}
.page-home .hot-rank__note {
  font-size: 12px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 4px 8px;
}
.page-home .hot-rank__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.page-home .hot-rank__graphic img {
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow);
  display: block;
}
.page-home .hot-rank__graphic-caption {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 8px 0 0;
}
.page-home .hot-rank__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-home .hot-rank__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 36px 52px;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.page-home .hot-rank__row .metric-bar {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 8px;
  background: var(--color-section-bg-a);
  border-radius: 3px;
}
.page-home .hot-rank__row .metric-bar__fill {
  display: block;
  height: 8px;
  border-radius: 3px;
  background: var(--color-status-green);
}
.page-home .hot-rank__row:nth-child(-n+3) .metric-bar__fill {
  background: var(--color-card-orange);
}
.page-home .hot-rank__row:nth-child(n+4):nth-child(-n+6) .metric-bar__fill {
  background: var(--color-card-cyan);
}
.page-home .metric-rank {
  font-family: var(--font-headings);
  font-size: 20px;
  color: var(--color-card-orange);
}
.page-home .hot-rank__row:nth-child(-n+3) .metric-rank {
  color: var(--color-card-yellow);
}
.page-home .metric-name {
  font-size: 14px;
  color: var(--color-text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-home .metric-name:hover {
  color: var(--color-accent-red);
}
.page-home .metric-value {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: right;
}
.page-home .hot-rank__go {
  font-size: 12px;
  text-align: center;
  padding: 5px 6px;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  text-decoration: none;
}
.page-home .hot-rank__go:hover {
  background: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: #fff;
}

@media (min-width: 900px) {
  .page-home .hot-rank__grid {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
  }
  .page-home .hot-rank__row {
    grid-template-columns: 40px 170px minmax(0, 1fr) 40px 56px;
    gap: 12px;
  }
  .page-home .hot-rank__row .metric-bar {
    grid-column: 3;
    grid-row: 1;
  }
}

/* 标签云 */
.page-home .tag-index {
  background-color: var(--color-section-bg-b);
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: 40px 0;
}
.page-home .tag-index__note {
  font-size: 12px;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  padding: 4px 8px;
}
.page-home .tag-index__cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.page-home .tag {
  text-decoration: none;
  transition: transform .15s;
}
.page-home .tag:hover {
  transform: scale(1.08);
}
.page-home .tag--hot {
  font-size: 30px;
  font-family: var(--font-headings);
}
.page-home .tag--warm {
  font-size: 19px;
}
.page-home .tag--cool {
  font-size: 14px;
}
.page-home .tag--plain {
  font-size: 13px;
  opacity: .85;
}

/* 索引条 */
.page-home .index-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 28px;
}
.page-home .index-bar span,
.page-home .index-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  background: rgba(18,18,18,.55);
  color: var(--color-text-primary);
  font-size: 13px;
  text-decoration: none;
}
.page-home .index-bar a:hover {
  border-color: var(--color-card-cyan);
  color: var(--color-card-cyan);
}
.page-home .index-bar span[aria-current="true"] {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}
.page-home .index-bar--versions {
  margin-top: 10px;
}
.page-home .index-bar--versions a {
  border-color: var(--color-card-orange);
}

/* 快速入口 */
.page-home .quick-links {
  background: var(--gradient-purple);
  padding: 40px 0;
  color: #fff;
}
.page-home .quick-links__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.page-home .quick-links .section-index {
  color: rgba(255,255,255,.65);
}
.page-home .quick-links h2 {
  font-family: var(--font-headings);
  font-size: 26px;
  margin: 0;
}
.page-home .quick-links__desc {
  font-size: 13px;
  opacity: .85;
  margin: 6px 0 0;
}
.page-home .quick-links__img {
  border: 2px solid rgba(255,255,255,.6);
  box-shadow: 6px 6px 0 rgba(0,0,0,.3);
}
.page-home .quick-links__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-home .quick-links .btn--secondary {
  border-color: rgba(255,255,255,.75);
  color: #fff;
}

@media (min-width: 900px) {
  .page-home .quick-links__inner {
    display: grid;
    grid-template-columns: 1fr 300px 1fr;
    align-items: center;
  }
  .page-home .quick-links__btns {
    justify-content: flex-end;
    flex-direction: column;
  }
}