/* Code homepage/topic/list adapter for shared v3. Loaded only on browse pages. */
.code-browse-content { min-width: 0; }
.code-browse-content .tags { margin: 12px 0 0; gap: 6px; }
.code-browse-content .dpu-tag { display: inline-block; overflow-wrap: anywhere; }
.code-browse-content img { max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
/* Both source types coexist. Frame only explicitly marked modern captures. */
.code-browse-content [data-screenshot-presentation="css-framed-v1"] > .image img,
.code-browse-content [data-screenshot-presentation="css-framed-v1"] > .home-first-screen img { border-radius: 6px; box-shadow: 0 0 0 1px var(--dpu-line), 0 4px 18px #20313f14; }
.home-first { margin: 0 0 36px; padding-bottom: 28px; border-bottom: 1px solid var(--dpu-line); }
.home-first-screen > a { display: block; }
.home-first-screen img { display: block; }
.home-first h2 { margin: 20px 0 10px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.home-first h2 a, .article-title a { color: var(--dpu-ink); text-decoration: none; }
.home-first h2 a:hover, .article-title a:hover { color: var(--dpu-blue); text-decoration: underline; }
.home-first-desc { font-size: 15px; line-height: 1.65; color: var(--dpu-text); }
.article-list > .article { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--dpu-line); }
/* Retain the live list's 5:3 filled crop, anchored at the top-left. */
.article-list > .article > .image { aspect-ratio: 5 / 3; align-self: start; min-width: 0; box-sizing: border-box; }
.article-list > .article > .image > a { display: block; width: 100%; height: 100%; }
.article-list > .article > .image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.article-list .text { min-width: 0; }
.article-title { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.article-desc { font-size: 14px; line-height: 1.6; color: var(--dpu-text); }
.code-date { margin-top: 10px; font-size: 13px; color: var(--dpu-muted); }
.code-topic-intro { margin-bottom: 28px; }
.code-topic-intro > :last-child { margin-bottom: 0; }
.code-topics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px 20px; }
.code-topics .tags-item { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.code-topics .dpu-tag { min-width: 0; }
.code-topic-count { flex: none; color: var(--dpu-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.code-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.code-page-count { font-size: 14px; color: var(--dpu-muted); margin-right: auto; }
.code-page-count b { color: var(--dpu-text); font-weight: 500; }
@media (max-width: 720px) {
  .article-list > .article { grid-template-columns: 170px minmax(0,1fr); gap: 20px; }
  .code-topics { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .article-list > .article { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .article-list > .article > .image { width: 220px; max-width: 100%; }
  .home-first h2 { font-size: 20px; }
  .code-topics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; }
}