@charset "UTF-8";
/*
 * variables
 */
/* === CSS Custom Properties === */
:root {
  --bg-primary: #f5f6fa;
  --bg-content: #f8f8fd;
  --bg-card: #fff;
  --bg-hover: #f4efeb;
  --bg-code: #fafafa;
  --text-primary: #333;
  --text-secondary: #666;
  --text-muted: #999;
  --text-link: #4d6dad;
  --text-link-hover: #223253;
  --border-color: #eee;
  --border-strong: #ddd;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 0 30px rgba(10,10,0,0.1) inset;
  --shadow-hover: 0 3px 12px rgba(77,109,173,0.15);
  --header-bg: #222;
  --header-text: #9d9d9d;
  --footer-bg: #2b2b3c;
  --footer-text: #bbb;
  --code-bg: #272822;
  --code-text: #d1d1c9;
  --badge-bg: #eef1f8;
  --badge-text: #4d6dad;
  --tag-bg: #eef1f8;
  --tag-hover: #4d6dad;
  --excerpt-border: #d8dee9;
  --excerpt-bg: #fafafa;
  --scrollbar-thumb: #D3D3D3;
  --scrollbar-track: #F1F1F1;
}

[data-theme=dark] {
  --bg-primary: #111827;
  --bg-content: #1a1f36;
  --bg-card: #1e2433;
  --bg-hover: #252d3d;
  --bg-code: #0d1117;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #777;
  --text-link: #7ba4d4;
  --text-link-hover: #a3c4f0;
  --border-color: #2d3748;
  --border-strong: #3d4a5c;
  --shadow: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-hover: 0 3px 12px rgba(0,0,0,0.4);
  --header-bg: #0f1420;
  --header-text: #9d9d9d;
  --footer-bg: #0f1420;
  --footer-text: #777;
  --code-bg: #0d1117;
  --code-text: #c9d1d9;
  --badge-bg: #1e2d4a;
  --badge-text: #7ba4d4;
  --tag-bg: #1e2d4a;
  --tag-hover: #7ba4d4;
  --excerpt-border: #3d4a5c;
  --excerpt-bg: #1a1f36;
  --scrollbar-thumb: #3d4a5c;
  --scrollbar-track: #1a1f36;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg-primary: #111827;
    --bg-content: #1a1f36;
    --bg-card: #1e2433;
    --bg-hover: #252d3d;
    --bg-code: #0d1117;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #777;
    --text-link: #7ba4d4;
    --text-link-hover: #a3c4f0;
    --border-color: #2d3748;
    --border-strong: #3d4a5c;
    --shadow: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-hover: 0 3px 12px rgba(0,0,0,0.4);
    --header-bg: #0f1420;
    --header-text: #9d9d9d;
    --footer-bg: #0f1420;
    --footer-text: #777;
    --code-bg: #0d1117;
    --code-text: #c9d1d9;
    --badge-bg: #1e2d4a;
    --badge-text: #7ba4d4;
    --tag-bg: #1e2d4a;
    --tag-hover: #7ba4d4;
    --excerpt-border: #3d4a5c;
    --excerpt-bg: #1a1f36;
    --scrollbar-thumb: #3d4a5c;
    --scrollbar-track: #1a1f36;
  }
}
/* The UA stylesheet's `[hidden] { display: none }` is weaker than any author
   `display` declaration, so scripts that hide an element by setting `.hidden`
   silently fail wherever CSS also sets `display` — `.tag-btn` is
   `display: inline-flex`, which made the tag-page filter box a no-op: tags.js
   set `link.hidden = true` and all 241 chips stayed on screen. This is the
   standard normalize.css remedy; `!important` is required because author
   declarations beat the UA sheet regardless of specificity. */
[hidden] {
  display: none !important;
}

body,
html,
div,
header,
footer,
nav,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* SVG icons */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
  line-height: 1;
}

/* Theme toggle icon visibility */
.theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

[data-theme=light] .theme-icon--sun {
  display: none;
}

[data-theme=dark] .theme-icon--moon {
  display: none;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  position: relative;
  min-height: 100%;
  padding-bottom: 190px;
  transition: background-color 0.3s, color 0.3s;
}

a {
  text-decoration: none;
  color: var(--text-link);
  transition: color 0.2s;
}
a:hover {
  color: var(--text-link-hover);
}

button {
  border: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--text-link);
  outline-offset: 3px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 20px 0;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 26px;
  border-bottom: 1px solid var(--border-color);
  margin: 50px 0 25px;
}

h3 {
  font-size: 23px;
  margin: 50px 0 20px;
}

h4 {
  font-size: 19px;
  margin: 30px 0 10px;
}

h5 {
  font-size: 17px;
  margin: 20px 0 10px;
}

h6 {
  font-size: 16px;
  margin: 10px 0 5px;
}

blockquote {
  color: var(--text-secondary);
  border-left: 5px solid var(--border-strong);
  padding-left: 15px;
  background: rgba(112, 138, 153, 0.1);
  padding: 10px 20px;
  margin: 0 0 20px;
}
blockquote p:last-of-type {
  margin: 0;
}

table {
  border-top: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  margin: 8px 0;
  border-collapse: collapse;
}
table thead {
  border-bottom: 1px solid var(--text-muted);
  background-color: var(--text-muted);
  color: #fff;
}
table th {
  padding: 2px 10px;
  text-align: left;
}
table tbody tr:nth-of-type(2n+1) {
  background-color: var(--bg-content);
}
table tbody tr:nth-of-type(2n) {
  background-color: var(--bg-hover);
}
table td {
  padding: 2px 10px;
}

p {
  margin: 0 0 14px;
}

img {
  max-width: 100%;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 8px 16px;
  background: var(--header-bg);
  color: #fff;
  z-index: 1000;
  font-size: 14px;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  top: 0;
}

#top {
  background: var(--header-bg);
  height: 52px;
  color: var(--header-text);
  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}
#top a {
  color: var(--header-text);
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
#top a:hover {
  color: #fff;
}
#top .wrapper {
  width: 1140px;
  margin: 0 auto;
  line-height: 52px;
}
#top .wrapper .brand {
  font-size: 18px;
}
#top .wrapper small {
  margin-left: 26px;
  font-size: 14px;
}
#top .wrapper .menu {
  display: none;
}
#top .wrapper nav {
  float: right;
}
#top .wrapper nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
#top .wrapper nav ul li {
  list-style: none;
  font-size: 14px;
  display: inline-block;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
#top .wrapper nav ul li a {
  display: inline-block;
  padding: 0 10px;
  height: 52px;
}
#top .wrapper nav ul li a:hover {
  background-color: #000;
}
#top .wrapper nav ul li a i {
  margin-right: 5px;
}
#top .wrapper nav ul li > .active {
  color: #fff;
  background-color: #000;
  box-shadow: 0 25px 25px -15px rgba(255, 255, 255, 0.93);
}
#top .wrapper nav ul .theme-toggle {
  background: none;
  border: none;
  color: var(--header-text);
  font-size: 15px;
  cursor: pointer;
  padding: 0 10px;
  height: 52px;
  line-height: 52px;
  transition: 0.2s ease;
}
#top .wrapper nav ul .theme-toggle:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
#top .wrapper nav ul .theme-toggle i {
  margin-right: 0;
}

@media screen and (max-width: 1200px) and (min-width: 771px) {
  #top {
    height: 50px;
  }
  #top .wrapper {
    width: 90%;
    line-height: 50px;
  }
  #top .wrapper .brand {
    font-size: 16px;
  }
  #top .wrapper small {
    margin-left: 15px;
    font-size: 12px;
  }
  #top .wrapper .menu {
    display: none;
  }
  #top .wrapper nav ul li a {
    padding: 0 8px;
    height: 50px;
  }
  #top .wrapper nav ul li a i {
    margin-right: 4px;
  }
}
@media screen and (max-width: 770px) {
  #top {
    height: 48px;
    margin-bottom: 15px;
  }
  #top .wrapper {
    width: 95%;
    margin: 0 auto;
    line-height: 48px;
    position: relative;
    z-index: 101;
  }
  #top .wrapper .brand {
    font-size: 16px;
  }
  #top .wrapper small {
    margin-left: 10px;
    font-size: 12px;
  }
  #top .wrapper .menu {
    display: inline-block;
    position: absolute;
    z-index: -102;
    right: 0;
    top: 10px;
    padding: 5px 10px;
    background: #333;
    border: 1px solid #333;
    border-radius: 4px;
    color: #c9c9c9;
    font-size: 17px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
  }
  #top .wrapper > .active {
    background: #000;
    color: #fff;
  }
  #top .wrapper .nav-show {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
  }
  #top .wrapper nav {
    position: absolute;
    z-index: 100;
    right: 0;
    top: 47px;
    text-align: center;
    visibility: hidden;
    transform-origin: 100% 0%;
    transform: scale(0.1);
    opacity: 0;
    transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38);
  }
  #top .wrapper nav ul {
    background: #222;
    border-radius: 0 0 4px 4px;
    box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.5);
  }
  #top .wrapper nav ul li {
    font-size: 14px;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  #top .wrapper nav ul li a {
    display: block;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
  }
  #top .wrapper nav ul li:last-of-type {
    border: none;
  }
  #top .wrapper nav ul li > .active {
    color: #fff;
    background-color: #000;
    box-shadow: none;
  }
}
#markdown-toc {
  display: none;
}

.page[post] .content-badge {
  display: inline-block;
  margin: 8px 0 4px;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 4px;
}
.page[post] .content-badge--ai-assisted {
  background: var(--badge-bg);
  color: var(--badge-text);
}
.page[post] .content-badge--imported {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.page[post] .content-badge--curated {
  background: var(--badge-bg);
  color: var(--badge-text);
}
.page[post] .tested-env {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.page[post] .tested-env .tested-env-header {
  font-weight: bold;
  margin-bottom: 8px;
}
.page[post] .tested-env .tested-env-header i {
  margin-right: 5px;
  color: var(--badge-text);
}
.page[post] .tested-env table {
  width: 100%;
  border-collapse: collapse;
}
.page[post] .tested-env table td {
  padding: 3px 8px;
  border-bottom: 1px solid #eee;
}
.page[post] .tested-env table .te-key {
  font-weight: bold;
  width: 120px;
  color: #555;
}
.page[post] .post-tested {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
}
.page[post] .post-tested .post-tested-title {
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.page[post] .post-tested .post-tested-title i {
  margin-right: 5px;
  color: var(--badge-text);
}
.page[post] .post-tested dl {
  margin: 0;
}
.page[post] .post-tested .post-tested-row {
  display: flex;
  gap: 1rem;
  line-height: 1.6;
}
.page[post] .post-tested dt {
  min-width: 7rem;
  font-weight: 500;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.page[post] .post-tested dd {
  margin: 0;
}
.page[post] .post-tested .post-tested-note {
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.page[post] .post-meta {
  margin-top: 12px;
  overflow: hidden;
}
.page[post] .post-meta .label-card {
  float: left;
  margin-right: 15px;
  font-size: 13px;
  /* Was #888: 3.30:1 on the post-meta background, the least readable
     text on every article page. Now var(--text-muted), which is
     theme-aware: 5.07:1 in light, and #9aaac0 in dark. A literal grey
     here passes light mode and fails dark mode. */
  color: var(--text-muted);
}
.page[post] .post-meta .label-card .point {
  padding: 0 10px;
  color: var(--text-muted);
}
.page[post] .post-meta .label-card i {
  padding-right: 5px;
  color: #6b6a6a;
}
.page[post] .post-meta .label-card a {
  color: var(--text-link);
}
.page[post] .post-meta .type-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  background: var(--badge-bg);
  color: var(--badge-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.page[post] .series-nav {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.page[post] .series-nav .series-nav-header {
  font-weight: bold;
  margin-bottom: 8px;
}
.page[post] .series-nav .series-nav-header i {
  margin-right: 5px;
  color: var(--badge-text);
}
.page[post] .series-nav .series-nav-list {
  margin: 0;
  padding-left: 20px;
}
.page[post] .series-nav .series-nav-list li {
  margin: 4px 0;
  line-height: 1.5;
}
.page[post] .series-nav .series-nav-list li a {
  color: var(--text-link);
}
.page[post] .series-nav .series-nav-list li a:hover {
  color: var(--text-link-hover);
}
.page[post] .series-nav .series-nav-list li.series-nav-current {
  color: var(--text-primary);
  font-weight: 500;
}
.page[post] .related-posts {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 24px 0;
}
.page[post] .related-posts h2 {
  font-size: 18px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.page[post] .related-posts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page[post] .related-posts li {
  padding: 6px 0;
  line-height: 1.5;
  border-bottom: 1px dashed var(--border-color);
}
.page[post] .related-posts li:last-child {
  border-bottom: none;
}
.page[post] .related-posts li a {
  color: var(--text-link);
}
.page[post] .related-posts li a:hover {
  color: var(--text-link-hover);
}
.page[post] .related-posts .related-version {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
}
.page[post] .source-posts {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--text-link);
  border-radius: 6px;
}
.page[post] .source-posts h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--text-primary);
}
.page[post] .source-posts h2 i {
  color: var(--text-link);
}
.page[post] .source-posts .source-posts-intro {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.page[post] .source-posts ul {
  margin: 0;
  padding-left: 22px;
}
.page[post] .source-posts li {
  margin: 5px 0;
  line-height: 1.5;
  color: var(--text-secondary);
}
.page[post] .source-posts li a {
  color: var(--text-link);
}
.page[post] .source-posts li time {
  display: inline-block;
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 12px;
}
.page[post] .source-posts .source-posts-missing {
  color: var(--text-muted);
}
.page[post] .source-posts .source-posts-missing code {
  word-break: break-all;
}
.page[post] a {
  color: var(--text-link);
  transition: 0.5s ease;
}
.page[post] a:hover {
  color: #223253;
  background-color: #f4efeb;
}
.page[post] .left ul > h2 {
  color: var(--text-primary);
}
.page[post] .left ul li {
  color: var(--text-primary);
  margin: 0;
}

/* Content origin badges also appear in list pages. */
.page .content-badge {
  display: inline-block;
  margin: 4px 0;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 12px;
}
.page .content-badge--ai-assisted, .page .content-badge--curated {
  background: var(--badge-bg);
  color: var(--badge-text);
}

@media screen and (max-width: 770px) {
  .page[post] .left {
    font-size: 15px;
  }
  .page[post] .left h2 {
    font-size: 24px;
  }
  .page[post] .left h3 {
    font-size: 20px;
  }
  .page[post] .left h4 {
    font-size: 18px;
  }
  .page[post] .left h5 {
    font-size: 16px;
  }
  .page[post] .left h6 {
    font-size: 15px;
  }
  .page[post] .post-tested .post-tested-row {
    display: block;
  }
  .page[post] .post-tested .post-tested-row dd {
    margin-bottom: 0.5rem;
  }
}
/* TOC sidebar */
#content-side .toc-h2, #content-side .toc-h3, #content-side .toc-related {
  list-style: none;
  margin: 4px 0;
}
#content-side .toc-h2 a, #content-side .toc-h3 a, #content-side .toc-related a {
  font-size: 13px;
  color: var(--text-secondary);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#content-side .toc-h2 a:hover, #content-side .toc-h2 a.active, #content-side .toc-h3 a:hover, #content-side .toc-h3 a.active, #content-side .toc-related a:hover, #content-side .toc-related a.active {
  color: var(--text-link);
}
#content-side .toc-h3 {
  padding-left: 14px;
}
#content-side .toc-h3 a {
  font-size: 12px;
  color: var(--text-muted);
}
#content-side .toc-related {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color, #eee);
}
#content-side .toc-related a {
  font-weight: 600;
  color: var(--text-primary);
}
#content-side .toc-toggle {
  margin-top: 8px;
  list-style: none;
}

/* search page */
.search-wrap input#search-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  outline: none;
  background: var(--bg-card);
  color: var(--text-primary);
}
.search-wrap input#search-input:focus {
  border-color: var(--text-link);
}
.search-wrap #search-stats {
  color: var(--text-muted);
  font-size: 13px;
  margin: 10px 0;
}
.search-wrap #search-results {
  padding: 0;
}
.search-wrap #search-results .search-hit {
  list-style: none;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color);
}
.search-wrap #search-results .search-hit time {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 10px;
}
.search-wrap #search-results .search-hit a {
  font-weight: bold;
}
.search-wrap #search-results .search-hit p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-wrap #search-results .search-hit mark {
  background: #fff3bf;
  color: inherit;
}
.search-wrap .search-show-more {
  display: block;
  width: 100%;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-link);
  cursor: pointer;
  font-size: 14px;
  text-align: center;
}
.search-wrap .search-show-more:hover {
  background: var(--bg-hover);
}
.search-wrap .search-discovery {
  padding: 20px 0;
}
.search-wrap .search-discovery h3 {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.search-wrap .search-discovery-tags,
.search-wrap .search-suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-wrap .search-discovery-tags a,
.search-wrap .search-suggestion-tags a {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
}
.search-wrap .search-discovery-tags a:hover,
.search-wrap .search-suggestion-tags a:hover {
  border-color: var(--text-link);
  color: var(--text-link);
}
.search-wrap .search-empty {
  padding: 20px 0;
  color: var(--text-secondary);
}
.search-wrap .search-empty p {
  margin: 0 0 8px;
}
.search-wrap .search-empty .search-suggestion-tags {
  margin-top: 12px;
}

/* Technical article callouts */
.page[post] article blockquote,
.page[post] article .highlight {
  /* base styling handled by existing theme */
}

.page[post] article blockquote > p:first-child strong {
  font-weight: 700;
}

.page[post] article blockquote:has(strong:first-child) {
  border-left-width: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 4px;
  background: var(--bg-hover, #f8f9fa);
}

.page[post] article blockquote > p:first-child:has(strong:only-child) {
  margin-bottom: 4px;
}

.page[post] article blockquote > p:first-child:has(strong:only-child) + p {
  margin-top: 0;
}

/* Reading time display */
.reading-time {
  font-size: 13px;
  color: var(--text-muted);
}

/* Tag pages */
.tag-count {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: -8px;
}

.post-card {
  padding: 16px 0;
  border-bottom: 1px dashed var(--border-color);
}
.post-card:last-child {
  border-bottom: none;
}

.post-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.post-card-meta time {
  margin-left: 8px;
}
.post-card-meta .post-card-version {
  color: var(--text-secondary);
}

.post-card-title {
  font-size: 18px;
  margin: 0 0 6px;
}
.post-card-title a {
  color: var(--text-link);
}
.post-card-title a:hover {
  color: var(--text-link-hover);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s;
}
.tag-item:hover {
  border-color: var(--text-link);
  color: var(--text-link);
  background: var(--bg-hover);
}
.tag-item .tag-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 10px;
}

/* 404 page */
.error-404 {
  text-align: center;
  padding: 40px 0 30px;
}
.error-404 .error-code {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.error-404 h1 {
  font-size: 24px;
  margin: 0 0 12px;
}
.error-404 p {
  color: var(--text-secondary);
  margin: 0 0 24px;
}

.error-search {
  max-width: 400px;
  margin: 0 auto;
}
.error-search input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
}
.error-search input:focus {
  border-color: var(--text-link);
}

.error-section {
  margin: 32px 0;
}
.error-section h2 {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--text-secondary);
}

.error-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.error-topics a {
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
}
.error-topics a:hover {
  border-color: var(--text-link);
  color: var(--text-link);
}

.error-recent {
  list-style: none;
  margin: 0;
  padding: 0;
}
.error-recent li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.error-recent li:last-child {
  border-bottom: none;
}
.error-recent li a {
  color: var(--text-link);
}
.error-recent li a:hover {
  color: var(--text-link-hover);
}
.error-recent li time {
  font-size: 12px;
  color: var(--text-muted);
}

.error-actions {
  margin: 32px 0;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.error-actions .btn {
  padding: 10px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
}
.error-actions .btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-link);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Archive page */
.archive-meta,
.topics-meta {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: -8px;
}

.archive-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.archive-year-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.archive-year-nav a:hover {
  color: var(--text-link);
}

.archive-year {
  margin-bottom: 8px;
}

.archive-year-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.archive-year-header .archive-year-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.archive-year-header .archive-year-toggle {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.archive-year-header[aria-expanded=false] .archive-year-toggle {
  transform: rotate(-90deg);
}
.archive-year-header:hover .archive-year-title {
  color: var(--text-link);
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px dashed var(--border-color);
  transition: max-height 0.3s ease;
}
.archive-list.collapsed {
  max-height: 0;
  overflow: hidden;
  border-bottom: none;
}
.archive-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  line-height: 1.5;
}
.archive-list li time {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 70px;
  flex-shrink: 0;
}
.archive-list li a {
  color: var(--text-primary);
}
.archive-list li a:hover {
  color: var(--text-link);
}

.archive-version {
  font-size: 12px;
  color: var(--text-muted);
}

/* Topics page */
.topic-hub {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.topic-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.topic-hub-header h2 {
  margin: 0;
  font-size: 20px;
}

.topic-hub-count {
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.topic-hub-desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 12px;
}

.topic-hub-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topic-hub-posts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-color);
}
.topic-hub-posts li:last-child {
  border-bottom: none;
}
.topic-hub-posts li time {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 90px;
  flex-shrink: 0;
}
.topic-hub-posts li a {
  color: var(--text-primary);
}
.topic-hub-posts li a:hover {
  color: var(--text-link);
}

.topic-hub-footer {
  margin-top: 12px;
}

.topic-hub-viewall {
  font-size: 13px;
  color: var(--text-link);
  text-decoration: none;
}
.topic-hub-viewall:hover {
  color: var(--text-link-hover);
}

.clearfix:after {
  content: "​";
  display: block;
  height: 0;
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.page {
  width: 1140px;
  box-sizing: border-box;
  margin: 0 auto;
}
.page .left {
  width: 75%;
  float: left;
  padding: 20px 30px;
  line-height: 1.6;
  font-size: 16px;
  background-color: var(--bg-content);
  box-shadow: var(--shadow);
}
.page .left > h1 {
  margin-bottom: -10px;
}
.page .left a:not([title]) {
  word-break: break-all;
}
.page .left ul > h2 {
  margin-left: -40px;
  color: #6a6b6b;
}
.page .left ul li {
  line-height: 1.8;
  color: #888888;
}
.page .left ul li time {
  display: inline-block;
  width: 135px;
}
.page .left ul li .title {
  font-weight: bold;
  color: #223253;
  transition: 0.3s ease;
}
.page .left ul li .title:hover {
  color: var(--text-link);
}
.page .left ul li i {
  margin-right: 5px;
}
.page .left ul li .categories {
  padding: 0 15px;
}
.page .left ul li .categories i {
  color: var(--text-muted);
}
.page .left ul li .categories a {
  padding: 0 5px;
  background-color: var(--badge-bg);
  color: var(--badge-text);
  font-size: 90%;
  transition: 0.3s ease;
}
.page .left ul li .categories a:hover {
  background-color: var(--badge-text);
  color: var(--bg-content);
}
.page .left ul li .pageTag i {
  color: var(--badge-text);
}
.page .left ul li .pageTag a {
  padding: 0 5px;
  background-color: var(--tag-bg);
  border-radius: 4px;
  color: var(--badge-text);
  font-size: 90%;
  transition: 0.3s ease;
}
.page .left ul li .pageTag a:hover {
  background-color: var(--tag-hover);
  color: var(--bg-content);
}
.page .anchor {
  display: none;
}
.page .right {
  float: left;
  width: 25%;
  padding-left: 20px;
  top: 0;
}
.page .right .fixed {
  position: fixed;
  top: 20px;
}
.page .right .scroll-bottom {
  position: absolute;
  bottom: 190px;
}
.page .right .side {
  box-sizing: border-box;
  background-color: var(--bg-content);
  box-shadow: var(--shadow);
  padding-bottom: 1px;
  -ms-word-break: break-all;
  word-break: break-all;
  /* Non standard for webkit */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.page .right .side > div {
  padding: 12px 15px;
  border-bottom: 1px solid #c0c0c0;
  font-size: 16px;
  font-weight: bold;
}
.page .right .side a {
  color: var(--text-link);
  transition: 0.5s ease;
}
.page .right .side a:hover {
  color: #223253;
}
.page .right .content-ul {
  overflow-y: auto;
  padding-right: 10px;
  line-height: 1.8;
  padding-left: 35px;
}
.page .right .content-ul ul {
  padding-left: 20px;
}

.page.curated-page .curated-meta {
  margin-top: -4px;
  color: var(--text-muted);
  font-size: 14px;
}
.page.curated-page .curated-notice {
  margin: 18px 0;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--text-link);
  border-radius: 6px;
  background: var(--bg-card);
  line-height: 1.6;
}
.page.curated-page .curated-notice strong {
  color: var(--text-primary);
}
.page.curated-page .curated-notice p {
  margin: 4px 0 0;
  color: var(--text-secondary);
}
.page.curated-page .curated-steps {
  padding-left: 24px;
}
.page.curated-page .curated-steps li {
  margin: 5px 0;
}
.page.curated-page .curated-coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 12px 0 24px;
}
.page.curated-page .curated-coverage-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text-secondary);
}
.page.curated-page .curated-coverage-row .badge {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--badge-bg);
  color: var(--badge-text);
  text-align: center;
  font-size: 12px;
}
.page.curated-page .curated-list {
  list-style: none;
  padding: 0;
}
.page.curated-page .curated-card {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
}
.page.curated-page .curated-card h3 {
  margin: 4px 0 6px;
  font-size: 18px;
}
.page.curated-page .curated-card h3 a {
  color: var(--text-primary);
}
.page.curated-page .curated-card h3 a:hover {
  color: var(--text-link);
}
.page.curated-page .curated-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.page.curated-page .curated-card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 12px;
}
.page.curated-page .curated-source-count {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

@media screen and (max-width: 1200px) and (min-width: 771px) {
  .page {
    width: 90%;
  }
}
@media screen and (max-width: 770px) {
  .page {
    width: 95%;
  }
  .page .left {
    width: 100%;
    float: left;
    padding: 10px 14px;
    font-size: 14px;
  }
  .page .left > h1 {
    font-size: 25px;
    margin-bottom: -10px;
  }
  .page .left ul {
    padding-left: 20px;
  }
  .page .left ul > h2 {
    font-size: 20px;
    margin-left: -20px;
  }
  .page .left ul li {
    margin: 20px 0;
  }
  .page .left ul li time {
    display: block;
    width: auto;
  }
  .page .left ul li .title {
    display: block;
    font-size: 16px;
  }
  .page .left ul li .categories {
    font-size: 12px;
    padding-left: 0;
    padding-right: 10px;
  }
  .page .anchor {
    display: block;
    visibility: visible;
    position: fixed;
    top: 76px;
    right: 2.5%;
    padding: 5px 10px;
    color: var(--text-primary);
    font-size: 15px;
    background-color: var(--bg-content);
    box-shadow: var(--shadow);
    opacity: 0.7;
    transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38);
  }
  .page .anchor-hide {
    opacity: 0;
    visibility: hidden;
  }
  .page .right {
    visibility: hidden;
    position: fixed;
    float: none;
    width: auto;
    max-width: 95%;
    padding: 0;
    top: 76px;
    right: 2.5%;
    opacity: 0;
    transform-origin: 100% 0;
    transform: scale(0.1);
    transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38);
  }
  .page .right-show {
    z-index: 999;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    background: var(--bg-content);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  .page .right-show .content-ul {
    margin-bottom: 0;
  }
  .page .right-show .content-ul > li:last-of-type {
    margin-bottom: 16px;
  }
}
/**
 * Syntax highlighting styles
 */
code {
  padding: 1px 4px;
  margin: 0 2px;
  font-size: 90%;
  border-radius: 3px;
  color: var(--text-primary);
  background-color: var(--bg-hover);
  border: 1px solid var(--border-color);
  font-family: Monaco, Menlo, "Microsoft YaHei Mono", Consolas, "Courier New", monospace, sans-serif;
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre > code {
  overflow-wrap: normal;
  word-break: normal;
  white-space: pre;
}

pre {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin: 12px 0;
  padding: 8px 12px;
  word-wrap: normal;
  white-space: pre;
}
pre > code {
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #d1d1c9;
  border: none;
  background-color: #272822;
}

pre {
  position: relative;
}
pre .copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  min-height: 28px;
  padding: 3px 8px;
  font-size: 11px;
  background: #52627a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.2s, background 0.2s;
}
pre .copy-btn:hover {
  background: #33445d;
}
pre .copy-btn:focus-visible {
  opacity: 1;
  outline: 2px solid #9cc8f5;
  outline-offset: 2px;
}

.highlight {
  border-radius: 3px;
  background: #272822;
  /* Comment */
  /* Error */
  /* Keyword */
  /* Literal */
  /* Name */
  /* Operator */
  /* Punctuation */
  /* Comment.Multiline */
  /* Comment.Preproc */
  /* Comment.Single */
  /* Comment.Special */
  /* Generic.Emph */
  /* Generic.Strong */
  /* Keyword.Constant */
  /* Keyword.Declaration */
  /* Keyword.Namespace */
  /* Keyword.Pseudo */
  /* Keyword.Reserved */
  /* Keyword.Type */
  /* Literal.Date */
  /* Literal.Number */
  /* Literal.String */
  /* Name.Attribute */
  /* Name.Builtin */
  /* Name.Class */
  /* Name.Constant */
  /* Name.Decorator */
  /* Name.Entity */
  /* Name.Exception */
  /* Name.Function */
  /* Name.Label */
  /* Name.Namespace */
  /* Name.Other */
  /* Name.Property */
  /* Name.Tag */
  /* Name.Variable */
  /* Operator.Word */
  /* Text.Whitespace */
  /* Literal.Number.Float */
  /* Literal.Number.Hex */
  /* Literal.Number.Integer */
  /* Literal.Number.Oct */
  /* Literal.String.Backtick */
  /* Literal.String.Char */
  /* Literal.String.Doc */
  /* Literal.String.Double */
  /* Literal.String.Escape */
  /* Literal.String.Heredoc */
  /* Literal.String.Interpol */
  /* Literal.String.Other */
  /* Literal.String.Regex */
  /* Literal.String.Single */
  /* Literal.String.Symbol */
  /* Name.Builtin.Pseudo */
  /* Name.Variable.Class */
  /* Name.Variable.Global */
  /* Name.Variable.Instance */
  /* Literal.Number.Integer.Long */
  /* Generic Heading & Diff Header */
  /* Generic.Subheading & Diff Unified/Comment? */
  /* Generic.Deleted & Diff Deleted */
  /* Generic.Inserted & Diff Inserted */
}
.highlight .hll {
  background-color: #272822;
}
.highlight .c {
  color: #75715e;
}
.highlight .err {
  color: #960050;
  background-color: #1e0010;
}
.highlight .k {
  color: #66d9ef;
}
.highlight .l {
  color: #ae81ff;
}
.highlight .n {
  color: #f8f8f2;
}
.highlight .o {
  color: #f92672;
}
.highlight .p {
  color: #f8f8f2;
}
.highlight .cm {
  color: #75715e;
}
.highlight .cp {
  color: #75715e;
}
.highlight .c1 {
  color: #75715e;
}
.highlight .cs {
  color: #75715e;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .kc {
  color: #66d9ef;
}
.highlight .kd {
  color: #66d9ef;
}
.highlight .kn {
  color: #f92672;
}
.highlight .kp {
  color: #66d9ef;
}
.highlight .kr {
  color: #66d9ef;
}
.highlight .kt {
  color: #66d9ef;
}
.highlight .ld {
  color: #e6db74;
}
.highlight .m {
  color: #ae81ff;
}
.highlight .s {
  color: #e6db74;
}
.highlight .na {
  color: #a6e22e;
}
.highlight .nb {
  color: #f8f8f2;
}
.highlight .nc {
  color: #a6e22e;
}
.highlight .no {
  color: #66d9ef;
}
.highlight .nd {
  color: #a6e22e;
}
.highlight .ni {
  color: #f8f8f2;
}
.highlight .ne {
  color: #a6e22e;
}
.highlight .nf {
  color: #a6e22e;
}
.highlight .nl {
  color: #f8f8f2;
}
.highlight .nn {
  color: #f8f8f2;
}
.highlight .nx {
  color: #a6e22e;
}
.highlight .py {
  color: #f8f8f2;
}
.highlight .nt {
  color: #f92672;
}
.highlight .nv {
  color: #f8f8f2;
}
.highlight .ow {
  color: #f92672;
}
.highlight .w {
  color: #f8f8f2;
}
.highlight .mf {
  color: #ae81ff;
}
.highlight .mh {
  color: #ae81ff;
}
.highlight .mi {
  color: #ae81ff;
}
.highlight .mo {
  color: #ae81ff;
}
.highlight .sb {
  color: #e6db74;
}
.highlight .sc {
  color: #e6db74;
}
.highlight .sd {
  color: #e6db74;
}
.highlight .s2 {
  color: #e6db74;
}
.highlight .se {
  color: #ae81ff;
}
.highlight .sh {
  color: #e6db74;
}
.highlight .si {
  color: #e6db74;
}
.highlight .sx {
  color: #e6db74;
}
.highlight .sr {
  color: #e6db74;
}
.highlight .s1 {
  color: #e6db74;
}
.highlight .ss {
  color: #e6db74;
}
.highlight .bp {
  color: #f8f8f2;
}
.highlight .vc {
  color: #f8f8f2;
}
.highlight .vg {
  color: #f8f8f2;
}
.highlight .vi {
  color: #f8f8f2;
}
.highlight .il {
  color: #ae81ff;
}
.highlight .gu {
  color: #75715e;
}
.highlight .gd {
  color: #f92672;
}
.highlight .gi {
  color: #a6e22e;
}

.page[index] a {
  color: var(--text-link);
  transition: 0.5s ease;
}
.page[index] a:hover {
  color: var(--text-link-hover);
}
.page[index] .left .hero {
  text-align: center;
  padding: 30px 0 10px;
}
.page[index] .left .hero h1 {
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 1px;
}
.page[index] .left .hero .hero-subtitle {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
}
.page[index] .left .hero .hero-tags {
  font-size: 15px;
  color: var(--text-link);
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}
.page[index] .left .hero .hero-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 auto 16px;
  max-width: 520px;
  line-height: 1.6;
}
.page[index] .left .hero .hero-links a {
  display: inline-block;
  margin: 0 6px;
  padding: 5px 14px;
  font-size: 14px;
  border: 1px solid var(--text-link);
  border-radius: 20px;
  color: var(--text-link);
  transition: 0.2s ease;
}
.page[index] .left .hero .hero-links a:hover {
  background: var(--text-link);
  color: var(--bg-content);
}
.page[index] .left .hero .hero-links a i {
  margin-right: 4px;
}
.page[index] .left .section-title {
  font-size: 20px;
  border-bottom: 2px solid var(--text-link);
  padding-bottom: 6px;
  margin: 30px 0 18px;
}
.page[index] .left .post-list {
  padding: 0;
}
.page[index] .left .post-list .post-card {
  list-style: none;
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: 0.2s ease;
}
.page[index] .left .post-list .post-card:hover {
  border-color: var(--text-link);
  box-shadow: var(--shadow-hover);
}
.page[index] .left .post-list .post-card .post-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.page[index] .left .post-list .post-card .post-card-meta time {
  color: var(--text-muted);
}
.page[index] .left .post-list .post-card .post-card-meta .post-card-cat .categories a {
  background: var(--badge-bg);
  color: var(--badge-text);
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.page[index] .left .post-list .post-card .post-card-meta .post-card-cat .categories a:hover {
  background: var(--badge-text);
  color: var(--bg-content);
}
.page[index] .left .post-list .post-card .post-card-title {
  font-size: 19px;
  margin: 0 0 6px;
  border: none;
}
.page[index] .left .post-list .post-card .post-card-title a {
  color: var(--text-primary);
}
.page[index] .left .post-list .post-card .post-card-title a:hover {
  color: var(--text-link);
}
.page[index] .left .post-list .post-card .excerpt {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}
.page[index] .left .post-list .post-card .read-all {
  text-align: right;
  font-size: 13px;
}
.page[index] .left .post-list .post-card .read-all a {
  color: var(--text-muted);
  transition: 0.2s ease;
}
.page[index] .left .post-list .post-card .read-all a:hover {
  color: var(--text-link);
}
.page[index] .left .post-list .post-card .read-all a i {
  padding-right: 3px;
}
.page[index] .left .pagination {
  text-align: center;
  margin-top: 20px;
}
.page[index] .left .pagination .previous, .page[index] .left .pagination .next {
  font-size: 20px;
  padding: 0 5px;
}
.page[index] .left .pagination .page_number {
  padding: 0 5px;
}
.page[index] .left .pagination .disable {
  color: var(--border-color);
}
.page[index] .right .wrap .side {
  margin-bottom: 20px;
  padding-bottom: 0;
}
.page[index] .right .wrap .side i {
  margin-right: 3px;
}
.page[index] .right .wrap .side .content-ul[cate] {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page[index] .right .wrap .side .content-ul[cate] li {
  font-size: 14px;
}
.page[index] .right .wrap .side .content-ul[cate] li a {
  display: block;
  width: 100%;
  padding: 2px 0;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-link);
}
.page[index] .right .wrap .side .content-ul[cate] li a:hover {
  background-color: var(--bg-hover);
}
.page[index] .right .wrap .side .content-ul[cate] li a:hover .badge {
  background-color: var(--badge-text);
  color: var(--bg-content);
  transform: scale(1.2) rotate(360deg);
}
.page[index] .right .wrap .side .content-ul[cate] li a .name {
  padding-left: 15px;
}
.page[index] .right .wrap .side .content-ul[cate] li a .badge {
  display: block;
  float: right;
  text-align: center;
  margin-right: 15px;
  margin-top: 3px;
  padding: 0 10px;
  font-size: 12px;
  color: #fff;
  background-color: var(--text-muted);
  border-radius: 50%;
  transition: 0.5s ease-in-out;
}
.page[index] .right .wrap .side .content-ul[cate] li:last-of-type a {
  border: none;
}
.page[index] .right .wrap .side .tags-cloud {
  font-weight: normal;
  line-height: 2.2;
}
.page[index] .right .wrap .side .tags-cloud a {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px 3px;
  background: var(--tag-bg);
  color: var(--badge-text);
  border-radius: 12px;
  font-size: 13px;
}
.page[index] .right .wrap .side .tags-cloud a:hover {
  background-color: var(--tag-hover);
  color: var(--bg-content);
}
.page[index] .right .wrap .side .view-all {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-link);
}
.page[index] .right .wrap .side .view-all:hover {
  color: var(--text-link-hover);
}

@media screen and (max-width: 770px) {
  .page[index] .left .hero h1 {
    font-size: 32px;
  }
  .page[index] .left .hero .hero-subtitle {
    font-size: 18px;
  }
  .page[index] .left .post-list .post-card .post-card-title {
    font-size: 17px;
  }
}
.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: var(--footer-bg);
  box-shadow: 0 -2px 4px 1px rgba(0, 0, 0, 0.5);
  color: var(--footer-text);
}
.site-footer .wrapper {
  width: 1140px;
  margin: 0 auto;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
}
.site-footer .wrapper p {
  margin: 0;
  line-height: 1.6;
}
.site-footer .wrapper .contact {
  display: inline-block;
}
.site-footer .wrapper .contact a {
  color: #ccc;
  transition: 0.3s ease;
}
.site-footer .wrapper .contact a:hover {
  color: #fff;
}
.site-footer .wrapper .contact a i {
  margin: 0 5px;
  font-size: 20px;
}
.site-footer .wrapper .description {
  display: inline-block;
}
.site-footer .wrapper .power a {
  color: #8F90C5;
  transition: 0.3s ease;
}
.site-footer .wrapper .power a:hover {
  color: #fff;
}

@media screen and (max-width: 1200px) and (min-width: 771px) {
  .site-footer .wrapper {
    width: 90%;
  }
}
@media screen and (max-width: 770px) {
  .site-footer .wrapper {
    width: 90%;
  }
}
.content-ul::-webkit-scrollbar {
  width: 7px;
  height: 6px;
}
.content-ul::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.content-ul::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 0 none;
  border-radius: 50px;
}
.content-ul::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.content-ul::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 50px;
}
.content-ul::-webkit-scrollbar-corner {
  background: transparent;
}

.back-to-top {
  position: fixed;
  left: 50%;
  margin-left: 580px;
  bottom: 37px;
  background-color: var(--bg-content);
  visibility: hidden;
  opacity: 0;
  transition: 0.4s ease;
  box-shadow: var(--shadow);
}
.back-to-top a {
  display: block;
  background-color: var(--bg-hover);
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 20px;
  color: var(--text-muted);
}

.back-to-top-show {
  visibility: visible;
  opacity: 0.7;
}
.back-to-top-show:hover {
  opacity: 1;
}

@media screen and (max-width: 1200px) and (min-width: 771px) {
  .back-to-top {
    left: 50%;
    margin-left: 45.5%;
  }
}
@media screen and (max-width: 770px) {
  .back-to-top {
    right: 2.5%;
    left: auto;
    margin-left: 0px;
  }
  .back-to-top a {
    width: 33px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 18px;
  }
}
/* v3 editorial system: a quieter, more navigable engineering notebook */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --bg-primary: #f4f7fb;
  --bg-content: #fbfcfe;
  --bg-card: #ffffff;
  --bg-hover: #edf4fb;
  --bg-code: #f5f7fa;
  --text-primary: #172338;
  --text-secondary: #52627a;
  /* Was #64748b: 4.43:1 on the #f4f7fb meta background, just under the 4.5:1
     small-text threshold. Darkened to 5.07:1. Dark theme keeps its own
     lighter value below. */
  --text-muted: #5b6b7f;
  --text-link: #2563a6;
  --text-link-hover: #174a80;
  --border-color: #e2e8f0;
  --border-strong: #cbd5e1;
  --shadow: 0 14px 38px rgba(27, 55, 91, 0.09);
  --shadow-hover: 0 18px 42px rgba(37, 99, 166, 0.16);
  --header-bg: #101d31;
  --header-text: #c2cee0;
  --footer-bg: #101d31;
  --footer-text: #aebbd0;
  --code-bg: #172238;
  --code-text: #d7e2f0;
  --badge-bg: #e8f1fb;
  --badge-text: #245b9b;
  --tag-bg: #e7f5f1;
  /* 4.44:1 on --tag-bg, just under the 4.5:1 small-text threshold. Both text
     uses (.search-topic--curated, .editorial-badge--featured) sit on --tag-bg;
     the other two uses are hover backgrounds, where a 1-step darkening is
     invisible. Dark theme keeps its own lighter value. */
  --tag-hover: #177b72;
  --excerpt-border: #cfe0f2;
  --excerpt-bg: #f7faff;
  --scrollbar-thumb: #c6d2e2;
  --scrollbar-track: #edf2f7;
  --accent-indigo: #536dfe;
  --accent-teal: #0f9f91;
  --accent-amber: #d28a27;
  --accent-coral: #df6b57;
  --accent-slate: #64748b;
  --accent-violet: #8b5cf6;
  --accent-red: #d45454;
  --accent-blue: #3182ce;
  --accent-rose: #c65b83;
  --accent-green: #3d9b70;
  /* Text-safe variants of the four track accents. The vivid values work as
     3px card borders but measure 2.84-4.21:1 as text on a white card, and
     2.54-3.62:1 on the 12% accent tint behind .path-icon. These clear 4.5:1
     against both the card background and that tint. Dark theme overrides
     them with lighter steps below. */
  --accent-indigo-ink: #495fdf;
  --accent-teal-ink: #0c7a70;
  --accent-amber-ink: #97631c;
  --accent-coral-ink: #ac5343;
  /* Ten topic accents share this mechanism, so instead of ten more ink
     variants, text uses mix the accent toward the body text colour: toward
     near-black in light theme, toward near-white in dark theme (the dark
     blocks override it). The accents stay untouched where they are used as
     borders and fills. */
  --accent-ink-mix: #0b1220;
}

[data-theme=dark] {
  --bg-primary: #0c1422;
  --bg-content: #111c2c;
  --bg-card: #162437;
  --bg-hover: #1c2d44;
  --bg-code: #0a111c;
  --text-primary: #e8eef7;
  --text-secondary: #afbdd0;
  --text-muted: #9aaac0;
  --text-link: #7db5ef;
  --text-link-hover: #a9d0fb;
  --border-color: #263a53;
  --border-strong: #38516e;
  --shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.36);
  --header-bg: #09111d;
  --header-text: #b4c2d5;
  --footer-bg: #09111d;
  --footer-text: #9baac0;
  --code-bg: #0a111c;
  --code-text: #d7e2f0;
  --badge-bg: #1c3552;
  --badge-text: #9cc8f5;
  --tag-bg: #173b3b;
  --tag-hover: #55c7b6;
  --excerpt-border: #2b4968;
  --excerpt-bg: #13253a;
  --scrollbar-thumb: #38516e;
  --scrollbar-track: #111c2c;
  --accent-indigo-ink: #778cfe;
  --accent-teal-ink: #24a89b;
  --accent-amber-ink: #d28a27;
  --accent-coral-ink: #e17764;
  --accent-ink-mix: #e8eef7;
}

/* Dark theme --text-link is a light blue (#7db5ef); white label text on it
   measured 2.16:1. The button keeps its light-blue fill and takes dark text. */
[data-theme=dark] .button--primary,
[data-theme=dark] .button--primary:hover {
  color: #0c1422;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg-primary: #0c1422;
    --bg-content: #111c2c;
    --bg-card: #162437;
    --bg-hover: #1c2d44;
    --bg-code: #0a111c;
    --text-primary: #e8eef7;
    --text-secondary: #afbdd0;
    --text-muted: #9aaac0;
    --text-link: #7db5ef;
    --text-link-hover: #a9d0fb;
    --border-color: #263a53;
    --border-strong: #38516e;
    --shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
    --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.36);
    --header-bg: #09111d;
    --header-text: #b4c2d5;
    --footer-bg: #09111d;
    --footer-text: #9baac0;
    --code-bg: #0a111c;
    --code-text: #d7e2f0;
    --badge-bg: #1c3552;
    --badge-text: #9cc8f5;
    --tag-bg: #173b3b;
    --tag-hover: #55c7b6;
    --excerpt-border: #2b4968;
    --excerpt-bg: #13253a;
    --scrollbar-thumb: #38516e;
    --scrollbar-track: #111c2c;
    --accent-indigo-ink: #778cfe;
    --accent-teal-ink: #24a89b;
    --accent-amber-ink: #d28a27;
    --accent-coral-ink: #e17764;
    --accent-ink-mix: #e8eef7;
  }
  :root:not([data-theme=light]) .button--primary,
  :root:not([data-theme=light]) .button--primary:hover {
    color: #0c1422;
  }
}
html {
  font-size: 16px;
}

body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: var(--text-primary);
  background: var(--bg-primary);
  padding-bottom: 110px;
  letter-spacing: 0.005em;
}

a {
  color: var(--text-link);
}

a:hover {
  color: var(--text-link-hover);
}

.page {
  width: 1180px;
  box-shadow: none;
  background: transparent;
}

.page .left,
.page .right {
  background: transparent;
  box-shadow: none;
}

.page .left {
  width: calc(100% - 286px);
  padding: 0;
}

.page .right {
  width: 246px;
  padding-left: 34px;
}

.page .right .wrap {
  width: 100%;
}

.page .right .side {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.page .right .side > div {
  color: var(--text-primary);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page .right .content-ul {
  padding: 8px 18px 14px 30px;
}

.page .right .content-ul li {
  line-height: 1.55;
}

.page .right .content-ul a {
  font-size: 13px;
}

main:focus {
  outline: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button--primary {
  color: #fff;
  background: var(--text-link);
  box-shadow: 0 6px 16px rgba(37, 99, 166, 0.2);
}

.button--primary:hover {
  color: #fff;
  background: var(--text-link-hover);
}

.button--quiet {
  color: var(--text-primary);
  background: var(--bg-card);
  border-color: var(--border-strong);
}

.button--quiet:hover {
  color: var(--text-link);
  border-color: var(--text-link);
  background: var(--bg-hover);
}

.section-kicker {
  display: block;
  color: var(--text-link);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 52px 0 18px;
}

.section-heading h2 {
  margin: 5px 0 0;
  border: 0;
  font-size: 25px;
  font-weight: 720;
  line-height: 1.2;
}

.section-count, .section-link {
  color: var(--text-muted);
  font-size: 12px;
}

.section-link {
  white-space: nowrap;
}

.text-link {
  color: var(--text-link);
  font-size: 13px;
  font-weight: 650;
}

/* These shell links measured 12-15px tall at every width, under the 24px
   minimum target size (WCAG 2.5.8). min-height is ignored on inline boxes, so
   the hit area is made real here; type size and colour are unchanged. */
.section-link,
.text-link,
.next,
.footer-brand-name {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The same 24px floor for the remaining inline text links, measured at 12-22px
   on a 375px viewport: footer columns (9 on every page, 14-17px), category and
   tag chips (12px on the home cards, 22px in topic rows), topic note rows
   (40 per topic page, 20px), breadcrumbs, related-post lists, the post topic
   link and the mobile relation chips. Width is untouched, so no line breaks
   move; only the hit area grows. */
.footer-column a,
.breadcrumb a,
.topic-note-row a,
.topic-related a,
.related-posts a,
.post-recent a,
.home-post-meta .categories a,
.post-meta .pageTag a,
.post-meta .categories a,
.post-topic-link,
.topic-mobile-relations a,
#content-side a,
.side .content-ul a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Header */
#top {
  height: 64px;
  margin-bottom: 0;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 5px 20px rgba(8, 20, 38, 0.12);
}

#top .wrapper {
  width: 1180px;
  height: 64px;
  display: flex;
  align-items: center;
  line-height: 1;
}

#top .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f5f8fc;
}

#top .brand:hover {
  color: #fff;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: #d9e8fb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.brand-name {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: 0.01em;
}

.brand-tagline {
  margin-left: 15px;
  color: #8fa2bb;
  font-size: 12px;
}

#top nav {
  float: none;
  margin-left: auto;
}

#top nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

#top nav li {
  display: block;
}

#top nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 64px;
  padding: 0 10px;
  color: var(--header-text);
  font-size: 12px;
  font-weight: 600;
}

#top nav a:hover, #top nav a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* The legacy `#top .wrapper nav ul li a` rule has higher specificity (1,2,4) than
   `#top nav a` (1,0,2), so it wins on `display` and `height`: the label ends up in
   an inline-block box with a fixed height, which parks the SVG + text on the
   baseline at the TOP of the box — measured 18px above the header's centre while
   the brand, tagline and theme icon were all dead centre. Match its specificity
   so the label centres. Height is deliberately left to the legacy rules
   (52px >1200px, 50px for 1025-1200px). The drawer is unaffected: its
   `.js.shell-ready #top nav a` rule is (2,1,2) and still wins there. */
#top .wrapper nav ul li a {
  display: inline-flex;
  align-items: center;
}

#top nav .icon {
  font-size: 13px;
}

#top .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 64px;
  padding: 0;
  line-height: 1;
}

/* The inline nav is icon-only, so the drawer's text label stays hidden here and is
   revealed in the max-width:1024px block, where the button becomes a full row. */
#top .theme-toggle-label {
  display: none;
}

#top .menu {
  display: none;
}

/* Home */
.home-page {
  width: 1180px;
  margin: 0 auto;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  margin: 30px 0 0;
  padding: 54px 58px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: radial-gradient(circle at 88% 15%, rgba(83, 109, 254, 0.16), transparent 32%), linear-gradient(135deg, var(--bg-card), var(--bg-hover));
  box-shadow: var(--shadow);
}

.home-hero h1 {
  margin: 12px 0 16px;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.home-hero h1 em {
  color: var(--text-link);
  font-style: normal;
}

.home-hero-copy > p {
  max-width: 590px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.75;
}

.home-hero-actions, .start-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.home-hero-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
}

.hero-orbit {
  position: relative;
  width: 170px;
  height: 170px;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.hero-orbit::before, .hero-orbit::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
}

.hero-orbit::after {
  inset: 48px;
  border-style: solid;
}

.hero-orbit span {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-indigo);
  font-size: 10px;
  font-weight: 750;
}

.hero-orbit span:nth-child(1) {
  top: -14px;
  left: 71px;
}

.hero-orbit span:nth-child(2) {
  top: 71px;
  right: -14px;
  background: var(--accent-teal);
}

.hero-orbit span:nth-child(3) {
  bottom: -14px;
  left: 71px;
  background: var(--accent-amber);
}

.hero-orbit span:nth-child(4) {
  top: 71px;
  left: -14px;
  background: var(--accent-coral);
}

/* White 10px labels on the shared accent colours measured 2.84-4.21:1, below
   the 4.5:1 needed for small text. These darker steps are scoped to the orbit
   markers so --accent-* keep their value where they act as borders or accents
   on light cards. Verified: 4.55 / 4.51 / 4.51 / 4.53 against #fff. */
.hero-orbit span {
  background: #4f68f4;
}

.hero-orbit span:nth-child(2) {
  background: #0c857a;
}

.hero-orbit span:nth-child(3) {
  background: #a26b1e;
}

.hero-orbit span:nth-child(4) {
  background: #bb5949;
}

.home-hero-note {
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 80%, transparent);
}

.home-hero-note strong {
  display: block;
  margin: 8px 0;
  font-size: 18px;
  line-height: 1.35;
}

.home-hero-note > span:last-child {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--border-color);
}

.home-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  background: var(--bg-card);
}

.home-stats strong {
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.home-stats span {
  color: var(--text-muted);
  font-size: 11px;
}

.home-paths, .home-latest, .home-topics {
  margin: 0 0 10px;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--path-accent, var(--accent-indigo));
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 3px 12px rgba(25, 50, 80, 0.04);
}

.path-card--indigo {
  --path-accent: var(--accent-indigo);
  --path-accent-ink: var(--accent-indigo-ink);
}

.path-card--teal {
  --path-accent: var(--accent-teal);
  --path-accent-ink: var(--accent-teal-ink);
}

.path-card--amber {
  --path-accent: var(--accent-amber);
  --path-accent-ink: var(--accent-amber-ink);
}

.path-card--coral {
  --path-accent: var(--accent-coral);
  --path-accent-ink: var(--accent-coral-ink);
}

.path-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.path-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--path-accent-ink, var(--path-accent));
  background: color-mix(in srgb, var(--path-accent) 12%, transparent);
}

.path-eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.path-card h3 {
  margin: 22px 0 0;
  border: 0;
  font-size: 20px;
  font-weight: 720;
  line-height: 1.2;
}

.path-title-zh {
  margin: 4px 0 12px !important;
  color: var(--path-accent-ink, var(--path-accent)) !important;
  font-size: 13px !important;
  font-weight: 650;
}

.path-card > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.path-outcome {
  margin-top: 10px !important;
  color: var(--text-primary) !important;
  font-size: 12px !important;
}

.path-outcome strong {
  color: var(--path-accent-ink, var(--path-accent));
}

.path-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.path-safety {
  color: var(--accent-coral-ink, var(--accent-coral));
}

.path-post-list {
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.path-post-list li {
  margin: 3px 0;
}

.path-card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  color: var(--path-accent-ink, var(--path-accent));
  font-size: 12px;
  font-weight: 700;
}

.path-card-link span {
  margin-left: 4px;
}

.home-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.home-post-card {
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-card);
  box-shadow: 0 3px 12px rgba(25, 50, 80, 0.04);
}

.home-post-card:hover {
  border-color: var(--text-link);
  box-shadow: var(--shadow-hover);
}

.home-post-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11px;
}

.home-post-card h3 {
  margin: 13px 0 8px;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.home-post-card h3 a {
  color: var(--text-primary);
}

.home-post-card h3 a:hover {
  color: var(--text-link);
}

.home-post-card p {
  margin: 8px 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.home-post-card .text-link {
  margin-top: auto;
}

.home-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 26px 0 0;
}

.home-pagination a, .home-pagination span {
  color: var(--text-secondary);
  font-size: 12px;
}

.home-pagination .disable {
  color: var(--text-muted);
}

.topic-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.topic-mini-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-card);
  text-decoration: none;
}

.topic-mini-card:hover {
  border-color: var(--text-link);
  background: var(--bg-hover);
}

.topic-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: color-mix(in srgb, var(--topic-accent, var(--text-link)) 72%, var(--accent-ink-mix));
  background: color-mix(in srgb, var(--topic-accent, var(--text-link)) 12%, transparent);
}

.topic-mini-card--indigo {
  --topic-accent: var(--accent-indigo);
}

.topic-mini-card--teal {
  --topic-accent: var(--accent-teal);
}

.topic-mini-card--amber {
  --topic-accent: var(--accent-amber);
}

.topic-mini-card--coral {
  --topic-accent: var(--accent-coral);
}

.topic-mini-card--slate {
  --topic-accent: var(--accent-slate);
}

.topic-mini-card--violet {
  --topic-accent: var(--accent-violet);
}

.topic-mini-card--red {
  --topic-accent: var(--accent-red);
}

.topic-mini-card--blue {
  --topic-accent: var(--accent-blue);
}

.topic-mini-card--rose {
  --topic-accent: var(--accent-rose);
}

.topic-mini-card--green {
  --topic-accent: var(--accent-green);
}

.topic-mini-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.topic-mini-copy strong {
  color: var(--text-primary);
  font-size: 13px;
}

.topic-mini-copy small {
  color: var(--text-muted);
  font-size: 11px;
}

.topic-mini-arrow {
  color: var(--topic-accent, var(--text-link));
  font-size: 18px;
}

.home-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 48px 0 20px;
  padding: 32px 36px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.home-bottom-cta h2 {
  margin: 7px 0 6px;
  border: 0;
  font-size: 25px;
}

.home-bottom-cta p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.home-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* Start here */
.start-page {
  width: 1180px;
  margin: 0 auto;
}

.start-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 50px;
  margin-top: 30px;
  padding: 50px 56px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
  box-shadow: var(--shadow);
}

.start-hero h1 {
  margin: 12px 0 16px;
  font-size: 48px;
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.start-hero h1 em {
  color: var(--text-link);
  font-style: normal;
}

.start-hero-copy > p {
  max-width: 630px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.75;
}

/* `1fr 1fr` split the fixed 300px hero column into 113px cells, and after 18px of
   padding only 77px was left for the value — not enough for "2020—2026" at 22px
   (~135px), so the year range wrapped after the em-dash at every width from 320px
   to 1440px while the three counts stayed on one line. auto-fit with a 190px floor
   keeps two columns wherever they actually fit (154px of content beats the 135px
   the range needs) and drops to a single column in the narrow hero sidebar. */
.start-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-content: center;
  gap: 1px;
  border: 1px solid var(--border-color);
  background: var(--border-color);
}

.start-hero-stats div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  background: var(--bg-card);
}

.start-hero-stats strong {
  font-size: 22px;
}

.start-hero-stats span {
  color: var(--text-muted);
  font-size: 11px;
}

.start-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 0;
}

.start-intro-grid article {
  padding: 22px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-card);
}

.intro-number {
  color: var(--text-link);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.start-intro-grid h2 {
  margin: 14px 0 7px;
  border: 0;
  font-size: 18px;
  font-weight: 700;
}

.start-intro-grid p {
  min-height: 60px;
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.start-intro-grid a {
  font-size: 12px;
  font-weight: 650;
}

.start-paths, .start-topics {
  margin-top: 8px;
}

.start-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 48px 0 20px;
  padding: 28px 34px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--bg-card);
}

.start-footer-cta h2 {
  margin: 6px 0 0;
  border: 0;
  font-size: 23px;
}

/* Topic directory */
.topics-page {
  width: 1180px;
  margin: 0 auto;
}

.directory-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin: 30px 0 24px;
  padding: 36px 42px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.directory-header h1 {
  margin: 8px 0 8px;
  font-size: 42px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.directory-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.directory-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.topic-directory-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 22px;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--topic-accent, var(--text-link));
  border-radius: 11px;
  background: var(--bg-card);
}

.topic-anchor-target {
  position: absolute;
  top: -80px;
}

.topic-directory-card--indigo {
  --topic-accent: var(--accent-indigo);
}

.topic-directory-card--teal {
  --topic-accent: var(--accent-teal);
}

.topic-directory-card--amber {
  --topic-accent: var(--accent-amber);
}

.topic-directory-card--coral {
  --topic-accent: var(--accent-coral);
}

.topic-directory-card--slate {
  --topic-accent: var(--accent-slate);
}

.topic-directory-card--violet {
  --topic-accent: var(--accent-violet);
}

.topic-directory-card--red {
  --topic-accent: var(--accent-red);
}

.topic-directory-card--blue {
  --topic-accent: var(--accent-blue);
}

.topic-directory-card--rose {
  --topic-accent: var(--accent-rose);
}

.topic-directory-card--green {
  --topic-accent: var(--accent-green);
}

.topic-directory-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topic-directory-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--topic-accent);
  background: color-mix(in srgb, var(--topic-accent) 12%, transparent);
}

.topic-directory-count {
  color: var(--text-muted);
  font-size: 11px;
}

.topic-directory-card h2 {
  margin: 18px 0 6px;
  border: 0;
  font-size: 20px;
  font-weight: 720;
}

.topic-directory-card h2 a {
  color: var(--text-primary);
}

.topic-directory-card > p {
  min-height: 62px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.topic-featured-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  margin-top: 15px;
  padding: 10px 12px;
  border-left: 2px solid var(--topic-accent);
  background: var(--bg-hover);
  text-decoration: none;
}

.topic-featured-link span:first-child {
  grid-column: 1/-1;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.topic-featured-link strong {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}

.topic-featured-link span:last-child {
  color: var(--topic-accent);
}

.topic-directory-link {
  margin-top: auto;
  padding-top: 15px;
  color: var(--topic-accent);
  font-size: 12px;
  font-weight: 700;
}

.topic-directory-link span {
  margin-left: 4px;
}

.directory-note {
  display: flex;
  gap: 10px;
  margin: 22px 0;
  padding: 15px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 9px;
  color: var(--text-secondary);
  font-size: 12px;
}

.directory-note strong {
  color: var(--text-primary);
  white-space: nowrap;
}

/* Topic detail */
.topic-page {
  width: 1180px;
  margin: 0 auto;
}

.topic-page.accent-indigo {
  --topic-accent: var(--accent-indigo);
}

.topic-page.accent-teal {
  --topic-accent: var(--accent-teal);
}

.topic-page.accent-amber {
  --topic-accent: var(--accent-amber);
}

.topic-page.accent-coral {
  --topic-accent: var(--accent-coral);
}

.topic-page.accent-slate {
  --topic-accent: var(--accent-slate);
}

.topic-page.accent-violet {
  --topic-accent: var(--accent-violet);
}

.topic-page.accent-red {
  --topic-accent: var(--accent-red);
}

.topic-page.accent-blue {
  --topic-accent: var(--accent-blue);
}

.topic-page.accent-rose {
  --topic-accent: var(--accent-rose);
}

.topic-page.accent-green {
  --topic-accent: var(--accent-green);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 22px;
  color: var(--text-muted);
  font-size: 11px;
}

.breadcrumb a {
  color: var(--text-muted);
}

.breadcrumb a:hover {
  color: var(--text-link);
}

.topic-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 8px;
  padding: 38px 42px;
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--topic-accent, var(--text-link));
  border-radius: 15px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
  box-shadow: var(--shadow);
}

.topic-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  opacity: 0.7;
}

.topic-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--topic-accent, var(--text-link)) 72%, var(--accent-ink-mix));
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topic-hero h1 {
  margin: 15px 0 10px;
  font-size: 42px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.topic-hero-intro {
  max-width: 690px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.topic-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.topic-featured {
  margin-top: 36px;
}

.topic-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.topic-feature-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
  text-decoration: none;
}

.topic-feature-card:hover {
  border-color: var(--topic-accent, var(--text-link));
  box-shadow: var(--shadow-hover);
}

.topic-feature-card--related {
  border-style: dashed;
}

.topic-feature-card--related .topic-feature-meta {
  color: var(--text-muted);
}

.topic-feature-meta {
  color: color-mix(in srgb, var(--topic-accent, var(--text-link)) 72%, var(--accent-ink-mix));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topic-feature-card h3 {
  margin: 12px 0 7px;
  border: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.topic-feature-card h3 {
  color: var(--text-primary);
}

.topic-feature-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.topic-feature-card .text-link {
  margin-top: auto;
  padding-top: 12px;
  color: color-mix(in srgb, var(--topic-accent, var(--text-link)) 72%, var(--accent-ink-mix));
}

.topic-notes {
  margin-top: 36px;
}

.topic-note-list {
  border-top: 1px solid var(--border-color);
}

.topic-note-row {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-color);
}

.topic-note-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 11px;
}

.topic-note-row h3 {
  margin: 7px 0 4px;
  border: 0;
  font-size: 18px;
  font-weight: 680;
  line-height: 1.35;
}

.topic-note-row h3 a {
  color: var(--text-primary);
}

.topic-note-row h3 a:hover {
  color: var(--text-link);
}

.topic-note-row p {
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.topic-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.topic-note-tags a {
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--text-link);
  background: var(--tag-bg);
  font-size: 10px;
}

.topic-related {
  margin-top: 36px;
}

.topic-side-nav .content-ul a.active {
  color: var(--text-link);
  font-weight: 700;
}

.topic-relations .content-ul li small {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}

/* Curated page */
.curated-page {
  width: 1180px;
  margin: 0 auto;
}

.curated-page .left {
  width: calc(100% - 286px);
}

.curated-page h1 {
  margin-top: 14px;
}

.curated-page .curated-meta {
  color: var(--text-muted);
}

.curated-notice {
  margin: 18px 0 30px;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--text-link);
  border-radius: 8px;
  background: var(--bg-card);
}

.curated-notice strong {
  font-size: 13px;
}

.curated-notice p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.editorial-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  margin: -18px 0 24px;
  color: var(--text-muted);
  font-size: 10px;
}

.editorial-legend strong {
  color: var(--text-secondary);
  font-size: 11px;
}

.editorial-legend span {
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--bg-hover);
}

.curated-page h2 {
  margin-top: 38px;
  font-size: 23px;
}

.curated-coverage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.curated-coverage-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
}

.curated-coverage-row .badge {
  color: var(--text-link);
  font-weight: 750;
}

.curated-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0;
}

.curated-card {
  padding: 17px 18px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-card);
}

.curated-card:hover {
  border-color: var(--text-link);
}

.curated-card-meta {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 10px;
}

.curated-card h3 {
  margin: 10px 0 6px;
  border: 0;
  font-size: 16px;
  font-weight: 680;
  line-height: 1.35;
}

.curated-card h3 a {
  color: var(--text-primary);
}

.curated-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.curated-source-count {
  display: block;
  margin-top: 11px;
  color: var(--text-muted);
  font-size: 10px;
}

/* Article */
.post-page {
  width: 1180px;
  margin: 0 auto;
}

.post-page .left {
  width: calc(100% - 286px);
}

.post-header {
  margin-bottom: 18px;
}

.post-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-link);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-eyebrow-dot {
  color: var(--text-muted);
}

.post-header h1 {
  max-width: 850px;
  margin: 12px 0 10px;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.post-lead {
  max-width: 780px;
  margin: 0 0 13px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
}

.post-page .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 14px;
  color: var(--text-muted);
}

.post-page .label-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  float: none;
  margin: 0;
  font-size: 11px;
}

.post-page .type-badge {
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text-link);
  background: var(--badge-bg);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-topic-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--text-link);
  font-size: 12px;
  font-weight: 650;
}

.post-topic-link span {
  margin-left: 3px;
}

.post-related-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 25px;
  color: var(--text-muted);
  font-size: 11px;
}

.post-related-topics strong {
  margin-right: 3px;
  color: var(--text-secondary);
}

.post-related-topics a {
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--text-link);
  background: var(--badge-bg);
}

.post-risk-note {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid #e6b86a;
  border-left: 4px solid #c47b16;
  border-radius: 8px;
  color: #6b470f;
  background: #fff8e8;
  font-size: 13px;
  line-height: 1.6;
}

.post-risk-note strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #80530d;
  font-size: 13px;
}

.post-risk-note p {
  margin: 4px 0 0;
}

[data-theme=dark] .post-risk-note {
  border-color: #7c5a27;
  border-left-color: #e0a640;
  color: #f1d39b;
  background: #2b2317;
}

[data-theme=dark] .post-risk-note strong {
  color: #ffd98a;
}

.post-article {
  min-width: 0;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.8;
}

.post-page .left, .post-page .right {
  min-width: 0;
}

.post-article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  table-layout: fixed;
}

.post-article th, .post-article td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-article a {
  color: var(--text-link);
}

.post-article a:hover {
  color: var(--text-link-hover);
  background: var(--bg-hover);
}

.post-article h2 {
  margin-top: 42px;
  font-size: 25px;
}

.post-article h3 {
  margin-top: 32px;
  font-size: 20px;
}

.post-article blockquote {
  border-left-color: var(--text-link);
  background: var(--bg-hover);
}

.post-article table {
  display: block;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 7px;
}

.post-article table thead {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.post-article pre {
  border-radius: 8px;
}

.source-posts li .editorial-badges {
  margin-left: 8px;
  vertical-align: middle;
}

.source-note-provenance {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}

.editorial-attribution {
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--text-link);
  border-radius: 7px;
  background: var(--bg-card);
}

.editorial-attribution h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.editorial-attribution dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  font-size: 12px;
}

.editorial-attribution dt {
  color: var(--text-muted);
}

.editorial-attribution dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.editorial-attribution a {
  color: var(--text-link);
}

.editorial-attribution-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.tag-alias-note {
  margin: 8px 0 14px;
  padding: 9px 12px;
  border-left: 3px solid var(--text-link);
  color: var(--text-secondary);
  background: var(--bg-hover);
  font-size: 12px;
}

.tag-alias-note strong {
  color: var(--text-primary);
}

.tag-alias-note a {
  color: var(--text-link);
  font-weight: 650;
}

.post-side-links {
  margin-top: 16px;
}

/* Footer */
.site-footer {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 42px 0 22px;
  background: var(--footer-bg);
  color: var(--footer-text);
  text-align: left;
  box-shadow: none;
}

.site-footer .wrapper {
  width: 1180px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 34px;
}

.footer-brand-name {
  color: #f2f6fb;
  font-size: 18px;
  font-weight: 720;
}

.footer-brand p {
  max-width: 290px;
  margin: 8px 0;
  color: var(--footer-text);
  font-size: 12px;
}

.footer-focus {
  color: #7f95b2;
  font-size: 11px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-column strong {
  margin-bottom: 4px;
  color: #e5edf7;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-column a {
  color: var(--footer-text);
  font-size: 12px;
}

.footer-column a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #9aaac0;
  font-size: 11px;
}

@media screen and (max-width: 1200px) and (min-width: 771px) {
  .page, .home-page, .start-page, .topics-page, .topic-page, .curated-page, .post-page, .archive-page, .tag-index-page, .about-page {
    width: 92%;
  }
  #top .wrapper, .site-footer .wrapper {
    width: 92%;
  }
  /* Padding only. The former `font-size: 11px` here made nav text smaller on
     wider screens (11px at 771-1200px vs 12px at <=770px and >1200px), and it
     also leaked into the 771-1024px drawer where an inline-nav rule has no
     business applying. Nav labels are 12px at every width now. */
  #top nav a {
    padding: 0 7px;
  }
  .path-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 770px) {
  body {
    padding-bottom: 70px;
  }
  .page, .home-page, .start-page, .topics-page, .topic-page, .curated-page, .post-page {
    width: 94%;
  }
  .site-footer .wrapper {
    width: 94%;
  }
  .page .left, .page .right, .curated-page .left, .post-page .left {
    width: 100%;
    padding: 0;
    float: none;
  }
  .page .right {
    display: none;
  }
  .page[post] .right, .post-page .right {
    display: block;
  }
  #top {
    height: 56px;
  }
  pre > code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #top .wrapper {
    width: 94%;
    height: 56px;
  }
  .brand-mark {
    width: 27px;
    height: 27px;
  }
  .brand-name {
    font-size: 16px;
  }
  .brand-tagline {
    display: none;
  }
  /* Drawer navigation rules moved to the max-width:1024px block below: the
     drawer itself activates at 1024px, so stacking and row metrics must not
     stop at 770px. See "Responsive navigation" further down. */
  .home-hero, .start-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 18px;
    padding: 30px 22px;
  }
  .home-hero h1, .start-hero h1 {
    font-size: 38px;
  }
  .home-hero-aside {
    min-height: auto;
  }
  /* .hero-orbit is hidden in the max-width:1024px block below, matching the
     width at which the drawer takes over. */
  .home-hero-note {
    max-width: 320px;
  }
  .home-stats {
    grid-template-columns: 1fr 1fr;
  }
  .path-grid, .home-post-grid, .topic-directory-grid, .topic-featured-grid, .start-intro-grid {
    grid-template-columns: 1fr;
  }
  .topic-mini-grid {
    grid-template-columns: 1fr 1fr;
  }
  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 8px;
    margin-top: 38px;
  }
  .directory-header, .topic-hero, .home-bottom-cta, .start-footer-cta {
    align-items: start;
    flex-direction: column;
    padding: 26px 22px;
  }
  .directory-header h1, .topic-hero h1 {
    font-size: 34px;
  }
  .home-bottom-actions {
    width: 100%;
  }
  .home-bottom-actions .button {
    flex: 1;
  }
  .curated-list {
    grid-template-columns: 1fr;
  }
  .curated-coverage {
    grid-template-columns: 1fr 1fr;
  }
  .post-header h1 {
    font-size: 34px;
  }
  .post-article {
    font-size: 15px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1/-1;
  }
  .footer-bottom {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }
}
/* Domain map */
.domain-map {
  margin-top: 8px;
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.domain-card {
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--domain-accent, var(--text-link));
  border-radius: 10px;
  background: var(--bg-card);
  text-decoration: none;
}

.domain-card:hover {
  border-color: var(--domain-accent, var(--text-link));
  box-shadow: var(--shadow-hover);
}

.domain-card--indigo {
  --domain-accent: var(--accent-indigo);
}

.domain-card--teal {
  --domain-accent: var(--accent-teal);
}

.domain-card--violet {
  --domain-accent: var(--accent-violet);
}

.domain-card--amber {
  --domain-accent: var(--accent-amber);
}

.domain-card--coral {
  --domain-accent: var(--accent-coral);
}

.domain-card--slate {
  --domain-accent: var(--accent-slate);
}

.domain-index {
  color: var(--domain-accent, var(--text-link));
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.domain-card h3 {
  margin: 16px 0 6px;
  border: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.domain-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.domain-card > span:last-child {
  margin-top: auto;
  padding-top: 15px;
  color: var(--domain-accent, var(--text-link));
  font-size: 12px;
  font-weight: 700;
}

@media screen and (max-width: 770px) {
  .domain-grid {
    grid-template-columns: 1fr;
  }
  .domain-card {
    min-height: 150px;
  }
}
/* Tag index */
.tag-index-page {
  width: 1180px;
  margin: 0 auto;
}

.tag-index-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 30px 0 8px;
  padding: 36px 42px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.tag-index-header h1 {
  margin: 8px 0;
  font-size: 42px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.tag-index-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.tag-index-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.tag-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
}

.tag-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

.tag-controls input, .tag-controls select {
  min-width: 190px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  background: var(--bg-content);
  font: inherit;
  font-size: 13px;
}

.tag-filter-empty {
  width: 100%;
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.tag-result-empty {
  padding: 12px 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.tag-btn:hover, .tag-btn.active {
  border-color: var(--text-link);
  color: var(--text-link);
  background: var(--bg-hover);
}

.tag-btn--featured {
  padding: 10px 13px;
  border-color: var(--excerpt-border);
  color: var(--text-primary);
  background: var(--excerpt-bg);
  font-weight: 650;
}

.tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  color: var(--text-link);
  background: var(--badge-bg);
  font-size: 10px;
}

.tag-results {
  margin-top: 38px;
}

.tag-result-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-color);
  list-style: none;
}

.tag-result-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-color);
}

.tag-result-list time {
  min-width: 100px;
  color: var(--text-muted);
  font-size: 11px;
}

.tag-result-list a {
  color: var(--text-primary);
  font-size: 14px;
}

.tag-result-list a:hover {
  color: var(--text-link);
}

@media screen and (max-width: 770px) {
  .tag-index-page {
    width: 94%;
  }
  .tag-index-header {
    align-items: start;
    flex-direction: column;
    margin-top: 18px;
    padding: 26px 22px;
  }
  .tag-index-header h1 {
    font-size: 34px;
  }
  .tag-result-list li {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }
  .tag-result-list time {
    min-width: 0;
  }
}
/* Search */
.noscript-note {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 13px;
}

.noscript-note strong {
  color: var(--text-primary);
}

.search-page {
  width: 900px;
  margin: 0 auto;
}

.search-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0 18px;
  padding: 36px 42px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.search-header h1 {
  margin: 8px 0;
  font-size: 42px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.search-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.search-wrap {
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-content);
}

.search-input-wrap > .icon {
  color: var(--text-muted);
}

.search-input-wrap input {
  width: 100%;
  height: 48px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 8px;
}

.topic-filter-btn {
  padding: 6px 11px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font-size: 11px;
  cursor: pointer;
}

.topic-filter-btn:hover, .topic-filter-btn.active {
  border-color: var(--text-link);
  color: var(--text-link);
  background: var(--bg-hover);
}

.search-select-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 12px 0 4px;
}

.search-select-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
}

.search-select-filters select {
  min-width: 130px;
  height: 32px;
  padding: 0 26px 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  background: var(--bg-card);
  font: inherit;
  font-size: 11px;
}

#search-stats {
  min-height: 18px;
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 12px;
}

/* Phase-2 notice: the body corpus is still arriving, so the hit count can grow. */
.search-text-pending {
  margin-left: 2px;
  opacity: 0.85;
}

#search-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-hit {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 3px 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-color);
}

.search-hit time {
  grid-column: 1;
  grid-row: 1;
  color: var(--text-muted);
  font-size: 11px;
}

.search-hit-content {
  grid-column: 2;
  min-width: 0;
}

.search-hit a {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.search-hit a:hover {
  color: var(--text-link);
}

.search-hit p {
  grid-column: 2;
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.search-topic {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-link);
  background: var(--badge-bg);
  font-size: 10px;
}

.search-topic--curated {
  color: var(--tag-hover);
  background: var(--tag-bg);
  font-weight: 700;
}

.search-topic--status {
  color: var(--text-muted);
  background: var(--bg-hover);
}

.search-topic--origin {
  color: var(--accent-violet);
  background: #eee8ff;
}

[data-theme=dark] .search-topic--origin {
  color: #c6b2ff;
  background: #342653;
}

.search-show-more {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  color: var(--text-link);
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
}

.search-show-more:hover {
  background: var(--bg-hover);
}

.search-discovery, .search-empty {
  padding: 24px 0;
  color: var(--text-secondary);
}

.search-discovery h3 {
  margin: 0 0 10px;
  border: 0;
  font-size: 14px;
}

.search-discovery-tags, .search-suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.search-discovery-tags a, .search-suggestion-tags a {
  padding: 5px 9px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  font-size: 11px;
  text-decoration: none;
}

.search-tips {
  display: flex;
  gap: 9px;
  margin: 14px 2px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.search-tips strong {
  color: var(--text-secondary);
  white-space: nowrap;
}

@media screen and (max-width: 770px) {
  .search-page {
    width: 94%;
  }
  .search-header {
    align-items: start;
    flex-direction: column;
    margin-top: 18px;
    padding: 26px 22px;
  }
  .search-header h1 {
    font-size: 34px;
  }
  .search-wrap {
    padding: 15px;
  }
  .search-hit {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .search-hit time, .search-hit-content, .search-hit p {
    grid-column: 1;
    grid-row: auto;
  }
  .search-tips {
    align-items: start;
    flex-direction: column;
    gap: 2px;
  }
}
/* Archive */
.archive-page {
  width: 1080px;
  margin: 0 auto;
}

.archive-page .left {
  width: calc(100% - 260px);
}

.archive-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin: 30px 0 14px;
  padding: 34px 40px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.archive-header h1 {
  margin: 8px 0;
  font-size: 40px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.archive-header p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.archive-header-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  min-width: 180px;
  border: 1px solid var(--border-color);
  background: var(--border-color);
}

/* Each stat is its own grid cell and stacks number over label, matching
   .home-stats. The four children used to be unwrapped, so 1fr 1fr auto-placed
   them as [number|label] / [number|label] and the padding below (top on the
   number, bottom on the label) never applied to a stacked pair. */
.archive-header-stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--bg-card);
}

.archive-header-stats strong {
  font-size: 20px;
}

.archive-header-stats span {
  color: var(--text-muted);
  font-size: 10px;
}

.archive-meta-line {
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 12px;
}

.archive-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 25px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-card);
}

.archive-year-nav a {
  padding: 4px 9px;
  border-radius: 5px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  font-size: 11px;
}

.archive-year-nav a:hover {
  color: var(--text-link);
  background: var(--badge-bg);
}

.archive-year {
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-card);
  overflow: hidden;
}

.archive-year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  color: var(--text-primary);
  background: var(--bg-card);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.archive-year-toggle {
  color: var(--text-muted);
  font-size: 13px;
  transition: transform 0.2s;
}

.archive-year-header[aria-expanded=false] .archive-year-toggle {
  transform: rotate(-90deg);
}

.archive-list {
  margin: 0;
  padding: 0 16px 8px;
  list-style: none;
}

.archive-list.collapsed {
  display: none;
}

.archive-list li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--border-color);
}

.archive-list time {
  flex: 0 0 70px;
  color: var(--text-muted);
  font-size: 11px;
}

.archive-list-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.archive-list-copy > a {
  display: flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.4;
}

.archive-list-copy > a:hover {
  color: var(--text-link);
}

.archive-list-meta {
  color: var(--text-muted);
  font-size: 10px;
}

@media screen and (max-width: 770px) {
  .archive-page {
    width: 94%;
  }
  .archive-page .left {
    width: 100%;
  }
  .archive-header {
    align-items: start;
    flex-direction: column;
    margin-top: 18px;
    padding: 26px 22px;
  }
  .archive-header h1 {
    font-size: 34px;
  }
  .archive-list li {
    align-items: start;
    flex-direction: column;
    gap: 3px;
  }
  .archive-list time {
    flex-basis: auto;
  }
}
/* Editorial metadata */
.editorial-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 2px;
}

.editorial-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  font-size: 10px;
  line-height: 1.2;
}

.editorial-badge--type {
  color: var(--text-link);
  background: var(--badge-bg);
  text-transform: capitalize;
}

.editorial-badge--featured {
  color: var(--tag-hover);
  background: var(--tag-bg);
}

.editorial-badge--tested {
  color: #287a57;
  background: #e6f5ec;
}

.editorial-badge--review {
  color: #9f6119;
  background: #fff2d8;
}

.editorial-badge--unverified {
  color: #676d7b;
  background: #edf0f4;
}

.editorial-badge--version {
  color: #8a5a16;
  background: #fff0d2;
}

.editorial-badge--historical {
  color: #5b6b7f;
  background: #e9eef5;
}

.editorial-badge--ai {
  color: #7654c7;
  background: #eee8ff;
}

.editorial-badge--imported {
  color: #526477;
  background: #e8eef4;
}

.editorial-badge--caution {
  color: #a34e4e;
  background: #fdeaea;
}

[data-theme=dark] .editorial-badge--tested {
  color: #8bd6a9;
  background: #173b2a;
}

[data-theme=dark] .editorial-badge--review {
  color: #f0c27a;
  background: #40321a;
}

[data-theme=dark] .editorial-badge--unverified {
  color: #c1cad6;
  background: #293240;
}

[data-theme=dark] .editorial-badge--version {
  color: #f2c777;
  background: #43331b;
}

[data-theme=dark] .editorial-badge--historical {
  color: #bdc9d8;
  background: #293240;
}

[data-theme=dark] .editorial-badge--ai {
  color: #c6b2ff;
  background: #342653;
}

[data-theme=dark] .editorial-badge--imported {
  color: #c2d0df;
  background: #293a4a;
}

[data-theme=dark] .editorial-badge--caution {
  color: #f0a3a3;
  background: #43252b;
}

.search-topic--type {
  color: var(--text-muted);
  background: var(--bg-hover);
}

/* Curated library */
.curated-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 30px 0 14px;
  padding: 34px 40px;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--bg-card);
  box-shadow: var(--shadow);
}

.curated-header h1 {
  margin: 8px 0;
  font-size: 40px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.curated-header p {
  max-width: 680px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}

.curated-header-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  min-width: 150px;
  border: 1px solid var(--border-color);
  background: var(--border-color);
}

/* Same fix as .archive-header-stats: wrap each stat and stack it. */
.curated-header-stats div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  background: var(--bg-card);
}

.curated-header-stats strong {
  font-size: 19px;
}

.curated-header-stats span {
  color: var(--text-muted);
  font-size: 10px;
}

.curated-path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.curated-path-grid .path-card {
  min-height: 270px;
}

.curated-all {
  margin-top: 8px;
}

.curated-policy {
  margin-top: 40px;
  padding: 26px 28px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
}

.curated-policy h2 {
  margin: 7px 0;
  border: 0;
  font-size: 22px;
}

.curated-policy p {
  margin: 0 0 15px;
  color: var(--text-secondary);
  font-size: 13px;
}

@media screen and (max-width: 770px) {
  .curated-header {
    align-items: start;
    flex-direction: column;
    margin-top: 18px;
    padding: 26px 22px;
  }
  .curated-header h1 {
    font-size: 32px;
  }
  .curated-path-grid {
    grid-template-columns: 1fr;
  }
}
/* About */
.about-page {
  width: 1080px;
  margin: 0 auto;
}

/* The 771-1200px percentage rule further up lists .tag-index-page,
   .search-page, .archive-page and .about-page, but it is declared BEFORE
   their base widths above. Same specificity, so the later fixed pixel width
   wins on source order: the page box overflows the viewport from 771px up to
   1100px, and `body { overflow-x: hidden }` then clips it with no scrollbar
   and no indication. Re-assert the percentage after the last base width so the
   band actually applies. Verified: 771-1200px only, >=1201px keeps 1080/1180. */
@media screen and (max-width: 1200px) and (min-width: 771px) {
  .tag-index-page, .search-page, .archive-page, .about-page {
    width: 92%;
  }
}
.about-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 30px 0 18px;
  padding: 40px 46px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
  box-shadow: var(--shadow);
}

.about-header h1 {
  margin: 8px 0;
  font-size: 42px;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.about-header p {
  max-width: 620px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.about-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  color: var(--text-link);
  background: var(--badge-bg);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 245px;
  gap: 30px;
}

.about-main {
  padding: 12px 0;
}

.about-main h2 {
  margin-top: 35px;
  font-size: 24px;
}

.about-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.about-focus-grid article {
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-card);
}

.about-focus-grid span {
  color: var(--text-link);
  font-size: 10px;
  font-weight: 750;
}

.about-focus-grid h3 {
  margin: 10px 0 5px;
  border: 0;
  font-size: 15px;
  font-weight: 700;
}

.about-focus-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.about-timeline {
  border-left: 2px solid var(--border-color);
}

.about-timeline article {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 0 0 22px 20px;
}

.about-timeline time {
  color: var(--text-link);
  font-size: 11px;
  font-weight: 700;
}

.about-timeline h3 {
  margin: 0 0 5px;
  border: 0;
  font-size: 15px;
  font-weight: 700;
}

.about-timeline p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.about-side .side {
  margin-bottom: 14px;
}

.about-side .content-ul {
  padding: 10px 18px 14px 28px;
}

.about-side .content-ul li {
  color: var(--text-secondary);
  font-size: 12px;
}

@media screen and (max-width: 770px) {
  .about-page {
    width: 94%;
  }
  .about-header {
    align-items: start;
    flex-direction: column;
    margin-top: 18px;
    padding: 28px 22px;
  }
  .about-header h1 {
    font-size: 34px;
  }
  .about-mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    font-size: 17px;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-focus-grid {
    grid-template-columns: 1fr;
  }
  .about-timeline article {
    grid-template-columns: 1fr;
    gap: 5px;
    padding-left: 14px;
  }
}
/* Responsive navigation and readable small labels */
@media screen and (max-width: 1024px) {
  #top .wrapper {
    position: relative;
    width: 94%;
  }
  .js.shell-ready #top .menu {
    position: relative;
    z-index: 102;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 7px;
    color: #d5e0ef;
    background: transparent;
  }
  .js.shell-ready #top nav {
    position: absolute;
    top: 56px;
    right: 0;
    left: 0;
    margin: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .js.shell-ready #top nav.nav-show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: none;
  }
  .js.shell-ready #top nav ul {
    display: block;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--header-bg);
    box-shadow: var(--shadow);
  }
  .js.shell-ready #top nav li {
    display: block;
  }
  .js.shell-ready #top nav a {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 5px;
  }
  /* The theme toggle has to join the drawer's row grid, but two legacy rules fight
     over it: `#top .wrapper nav ul .theme-toggle` is (1,3,1) and forces
     height:52px / line-height:52px, which beats `#top .theme-toggle` (1,1,0)
     height:40px. The button therefore stood 12px taller than every 40px row and,
     because justify-content:center, held one centred moon icon off the grid with no
     label and no separator. Match the (1,3,1) specificity and make it a real row. */
  #top .wrapper nav ul .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    margin-left: 0;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.5;
    gap: 5px;
  }
  #top .theme-toggle-label {
    display: inline;
  }
  /* The drawer's row separators came from a legacy `max-width:770px` rule, but the
     drawer itself activates at 1024px — so rows carried a separator at <=768px and
     none at 769-1024px, i.e. the same component changed appearance at the 771px
     boundary. Re-assert them across the whole drawer range (1px
     rgba(255,255,255,0.10), last row still borderless). Scoped to .js.shell-ready so
     the no-JS inline nav keeps its borderless rows. The drawer always sits on the
     dark header (#101d31 / #09111d), so a white alpha is the theme-correct value. */
  .js.shell-ready #top .wrapper nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .js.shell-ready #top .wrapper nav ul li:last-of-type {
    border-bottom: none;
  }
  .no-js #top nav,
  .js:not(.shell-ready) #top nav {
    position: static;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    width: 100%;
  }
  .no-js #top nav ul,
  .js:not(.shell-ready) #top nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-top: 8px;
  }
  .no-js #top .menu,
  .js:not(.shell-ready) #top .menu {
    display: none;
  }
  #top .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 4px;
  }
}
/* Drawer metrics for the whole drawer range.
   The drawer is activated at 1024px (see the block above), but its row metrics
   used to live in a max-width:770px block, so 771-1024px rendered a drawer
   with tablet typography: 11px labels on a 40px row with line-height 1, i.e.
   visibly smaller text on a wider screen. These rows also carry the explicit
   line-height the old block never set, and the theme toggle is part of the row
   list again (it used to be display:none below 770px, leaving phones with no
   dark-mode control at all). */
@media screen and (max-width: 1024px) {
  #top nav a,
  #top nav .theme-toggle {
    line-height: 1.5;
  }
  #top nav li:last-child .theme-toggle {
    margin-left: 0;
  }
  /* The decorative orbit graphic used to be hidden only below 770px, so it
     painted on top of the open drawer between 771 and 1024px. */
  .hero-orbit {
    display: none;
  }
}
.topic-mobile-relations {
  display: none;
}

@media screen and (max-width: 770px) {
  .topic-mobile-relations {
    display: block;
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
  }
  .topic-mobile-relations h2 {
    margin: 5px 0 10px;
    border: 0;
    font-size: 20px;
  }
  .topic-mobile-relations ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .topic-mobile-relations li {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card);
  }
  .topic-mobile-relations a {
    font-size: 13px;
    font-weight: 650;
  }
  .topic-mobile-relations small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
  }
}
.pagination-page-heading {
  margin: 30px 0 0;
  padding: 0 2px;
}

.pagination-page-heading h1 {
  margin: 7px 0 0;
  font-size: 28px;
  font-weight: 720;
  line-height: 1.2;
}

.pagination-page-heading h1 span {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 500;
}

@media screen and (max-width: 770px) {
  .pagination-page-heading {
    margin-top: 22px;
  }
  .pagination-page-heading h1 {
    font-size: 25px;
  }
}
/* Keep metadata readable without making cards feel noisy. */
.section-kicker,
.path-eyebrow,
.topic-feature-meta,
.topic-featured-link span:first-child,
.tag-count,
.editorial-badge,
.post-page .type-badge,
.post-related-topics a,
.topic-note-tags a {
  font-size: 11px;
}

.topic-filter-btn,
.tag-btn,
.search-show-more {
  min-height: 36px;
}

.topic-filter-btn {
  padding: 8px 12px;
}

.search-select-filters select {
  min-height: 36px;
}

/* Override the legacy high-specificity black navigation state. */
#top .wrapper nav ul li > a:hover,
#top .wrapper nav ul li > a.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}