:root {
  color-scheme: light;
  --background: #ffffff;
  --surface: #f7f8fa;
  --text: #202124;
  --muted: #6f737a;
  --line: #e6e8eb;
  --link: #245eff;
  --content-width: 760px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

button,
summary {
  font: inherit;
}

.home-page {
  width: min(100% - 40px, 720px);
  margin: 0 auto;
  padding: 18vh 0 80px;
}

.home-page h1 {
  margin: 0 0 26px;
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.home-entry {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 600;
}

.home-nav {
  display: flex;
  gap: 26px;
  align-items: center;
}

.home-recent {
  margin-top: 96px;
}

.home-recent h2 {
  margin: 0 0 18px;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 600;
}

.home-recent ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-recent li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.home-recent time,
.timeline-item > time,
.tree-article time,
.relation-list time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hub-page,
.article-page,
.sentence-page {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: 30px 0 96px;
}

.breadcrumb {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}

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

.breadcrumb-separator {
  color: #b5b8bd;
}

.hub-page {
  max-width: 960px;
}

.hub-header {
  margin: 56px 0 36px;
}

.hub-header h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.sentence-hub-header p {
  margin: 12px 0 0;
  color: var(--muted);
}

.sentence-collection-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.sentence-collection-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--line);
}

.sentence-collection-item h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.4;
}

.sentence-collection-item > div > p {
  margin: 10px 0 0;
  color: #4f5359;
}

.sentence-collection-summary {
  display: flex;
  gap: 16px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.sentence-page {
  max-width: 820px;
}

.sentence-header {
  margin: 56px 0 48px;
}

.sentence-header h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.sentence-header .article-meta {
  margin: 14px 0 0;
}

.sentence-content {
  font-size: 1.04rem;
  line-height: 1.9;
}

.sentence-content > :first-child {
  margin-top: 0;
}

.sentence-content h2 {
  margin: 3.2em 0 1.3em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 1.25rem;
  line-height: 1.4;
}

.sentence-content blockquote {
  margin: 30px 0 12px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.8;
}

.sentence-content blockquote p {
  margin: 0;
}

.sentence-empty-state {
  margin-top: 52px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.view-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.view-tabs button {
  position: relative;
  flex: none;
  padding: 10px 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.view-tabs button[aria-selected="true"] {
  color: var(--text);
  font-weight: 600;
}

.view-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--link);
}

.view-panel {
  padding-top: 36px;
}

.timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 28px;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--line);
}

.timeline-item > time {
  padding-top: 4px;
  font-size: 0.9rem;
}

.timeline-item h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.4;
}

.article-path {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.article-excerpt {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  color: #4f5359;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.empty-state {
  margin: 36px 0;
  color: var(--muted);
}

.category-tree {
  margin: 0;
  padding-left: 24px;
  list-style: none;
}

.view-panel > .category-tree {
  padding-left: 0;
}

.category-tree details {
  padding: 5px 0;
}

.category-tree summary {
  cursor: pointer;
  font-weight: 600;
}

.tree-article {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0 7px 22px;
}

.tree-article time {
  flex: none;
  font-size: 0.85rem;
}

.article-header {
  grid-column: 2;
  width: 100%;
  margin: 52px 0 34px;
}

.article-header h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.article-header p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.article-platform-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 0.9rem;
}

.article-platform-links a {
  font-weight: 600;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, var(--content-width));
  gap: 64px;
  justify-content: center;
  align-items: start;
}

.desktop-toc {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 28px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding-right: 8px;
}

.desktop-toc > p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.article-toc {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  line-height: 1.5;
}

.article-toc li {
  margin: 2px 0;
}

.article-toc a {
  display: block;
  padding: 5px 8px;
  border-left: 2px solid transparent;
  color: var(--muted);
}

.article-toc a:hover,
.article-toc a.is-active {
  border-left-color: var(--link);
  color: var(--link);
  text-decoration: none;
}

.article-toc .toc-level-3 a {
  padding-left: 22px;
}

.toc-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.mobile-toc {
  grid-column: 2;
  display: none;
}

.article-column {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.article-version-title {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.article-visual-version {
  margin-bottom: 44px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.article-visual-version[open] {
  margin-bottom: 64px;
}

.visual-version-summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 14px 2px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.visual-version-summary::-webkit-details-marker {
  display: none;
}

.visual-version-summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--link) 55%, transparent);
  outline-offset: 4px;
}

.visual-version-label {
  font-size: 0.98rem;
  font-weight: 680;
  letter-spacing: 0.02em;
}

.visual-version-action {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.86rem;
}

.visual-version-action-close {
  display: none;
}

.article-visual-version[open] .visual-version-action-open {
  display: none;
}

.article-visual-version[open] .visual-version-action-close {
  display: inline;
}

.visual-version-chevron {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.article-visual-version[open] .visual-version-chevron {
  transform: rotate(180deg);
}

.visual-version-content {
  padding: 18px 0 28px;
}

.visual-carousel {
  outline: none;
}

.visual-carousel:focus-visible .visual-stage {
  outline: 2px solid color-mix(in srgb, var(--link) 55%, transparent);
  outline-offset: 4px;
}

.visual-stage {
  position: relative;
  width: min(100%, 560px);
  margin: 0 auto;
}

.visual-slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.visual-slide {
  margin: 0;
}

.visual-slide[hidden] {
  display: none;
}

.visual-zoom {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: zoom-in;
}

.visual-zoom img {
  display: block;
  width: 100%;
  height: auto;
}

.visual-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0 0 3px;
  place-items: center;
  border: 1px solid rgba(32, 33, 36, 0.13);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 16px rgba(32, 33, 36, 0.12);
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.visual-arrow-prev {
  left: 14px;
}

.visual-arrow-next {
  right: 14px;
}

.visual-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.visual-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.visual-dots {
  display: flex;
  gap: 7px;
}

.visual-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c7cad0;
  cursor: pointer;
}

.visual-dot.is-active {
  background: var(--link);
}

.article-text-version-title {
  margin-top: 0;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.visual-lightbox {
  max-width: min(92vw, 900px);
  max-height: 94vh;
  padding: 48px 12px 12px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
}

.visual-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.visual-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 60px);
}

.visual-lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.article-content {
  font-size: 1.04rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.article-content > :first-child {
  margin-top: 0;
}

.article-content h2,
.article-content h3,
.article-content h4 {
  scroll-margin-top: 24px;
  line-height: 1.4;
}

.article-content h2 {
  margin: 2.6em 0 0.8em;
  font-size: 1.7rem;
}

.article-content h3 {
  margin: 2.2em 0 0.7em;
  font-size: 1.3rem;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content blockquote,
.article-content pre {
  margin: 1em 0;
}

.article-content:has(> p:first-child img[alt*="Codex 智能核心连接多种机器人"]) > ol:first-of-type > li:nth-child(7)::marker {
  color: #6750e8;
  font-weight: 700;
}

.article-content:has(> p:first-child img[alt*="Codex 智能核心连接多种机器人"]) > ol:first-of-type > li:nth-child(7) > strong {
  padding: 0.12em 0.42em;
  border-radius: 0.35em;
  background: #f1efff;
  color: #6750e8;
  font-weight: 750;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) {
  display: grid;
  gap: 18px;
  margin: 1.35em 0 2.2em;
  padding: 0;
  list-style: none;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li {
  padding: 22px 24px 20px;
  border: 1px solid #dfe3e8;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
  box-shadow: 0 8px 24px rgba(32, 33, 36, 0.045);
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-1 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/01-海底捞机器人端毛肚.png");
  --job-card-position: center 58%;
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-2 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/02-义美食品零食机器人.png");
  --job-card-position: center 62%;
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-3 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/03-掌门教育机器人教学.png");
  --job-card-position: center 56%;
  --job-card-overlay: linear-gradient(110deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.68) 58%, rgba(255, 255, 255, 0.38) 100%);
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-4 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/04-碧桂园服务物业机器人.png");
  --job-card-position: center 56%;
  --job-card-overlay: linear-gradient(110deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.7) 58%, rgba(255, 255, 255, 0.4) 100%);
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-5 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/05-九牧厨卫机器人厨卫.png");
  --job-card-position: center 60%;
  --job-card-overlay: linear-gradient(110deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.66) 58%, rgba(255, 255, 255, 0.36) 100%);
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-6 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/06-海尔家电机器人.png");
  --job-card-position: center 58%;
  --job-card-overlay: linear-gradient(110deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.7) 58%, rgba(255, 255, 255, 0.4) 100%);
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) #section-7 + ul > li {
  --job-card-scene: url("/articles/2026-09-01-奇怪的岗位01-这些公司居然在招具身智能/assets/scenes/07-海信电视机器人.png");
  --job-card-position: center 60%;
  --job-card-overlay: linear-gradient(110deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.76) 58%, rgba(255, 255, 255, 0.5) 100%);
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) :is(#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7) {
  display: flex;
  align-items: center;
  gap: 18px;
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) :is(#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7) > img {
  flex: 0 0 112px;
  box-sizing: border-box;
  width: 112px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) :is(#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7) + ul:has(> li > p:first-child > strong:only-child) > li {
  background:
    var(--job-card-overlay, linear-gradient(110deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 58%, rgba(255, 255, 255, 0.64) 100%)),
    var(--job-card-scene) var(--job-card-position) / cover;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p {
  margin: 0.72em 0;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:first-child {
  margin: 0 0 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-size: 1.12em;
  line-height: 1.45;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:first-child::before {
  display: inline-block;
  width: 4px;
  height: 1em;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--link);
  content: "";
  vertical-align: -0.08em;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:not(:first-child) > strong:first-child {
  color: #3f526e;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:nth-child(2) {
  margin-bottom: 0.35em;
  font-size: 1.12em;
  font-weight: 650;
  line-height: 1.5;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:nth-child(3) {
  margin-top: 0.25em;
  color: #e1594a;
  font-size: 1.08em;
  font-weight: 700;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:has(code) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.9em 0;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:has(code) code {
  padding: 0.22em 0.68em;
  border-radius: 999px;
  background: #f0f3f7;
  color: #5e6672;
  font-family: inherit;
  font-size: 0.82em;
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:last-child {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li > p:last-child a {
  font-size: 0.92em;
  font-weight: 650;
}

.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto 10px;
}

.article-content img[alt="学校结构的四个特点"] {
  width: min(100%, 560px);
}

.article-content img[alt="学校结构如何影响学生心理"] {
  width: min(100%, 420px);
}

.article-content .figure-caption {
  margin: 0.45em 0 1.8em;
  color: #555a61;
  text-align: center;
  font-size: 0.92em;
}

.article-content blockquote {
  margin-left: 0;
  padding-left: 18px;
  border-left: 3px solid var(--line);
  color: #555a61;
}

.article-content code {
  padding: 0.12em 0.34em;
  border-radius: 4px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

.article-content pre {
  padding: 18px;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--surface);
  line-height: 1.6;
}

.article-content pre code {
  padding: 0;
  background: transparent;
}

.article-content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.article-content th,
.article-content td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
}

.article-relations {
  margin-top: 80px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.article-relations > h2 {
  margin: 0 0 28px;
  font-size: 1.4rem;
}

.relation-list {
  margin: 28px 0;
}

.relation-list h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.relation-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.relation-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
}

.relation-list time {
  flex: none;
  font-size: 0.85rem;
}

.empty-relation {
  margin: 0;
  color: var(--muted);
}

.relation-graph {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.relation-graph summary {
  color: var(--link);
  cursor: pointer;
  font-weight: 600;
}

.full-graph-link {
  display: inline-block;
  margin-top: 12px;
}

.graph-canvas {
  width: 100%;
  min-height: 420px;
  margin-top: 24px;
  overflow: hidden;
  background: var(--surface);
}

.graph-canvas svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}

.graph-edge {
  stroke: #b8bec8;
  stroke-width: 1.5;
}

.graph-node circle {
  fill: #ffffff;
  stroke: #9aa7bd;
  stroke-width: 2;
}

.graph-node.is-focus circle {
  fill: var(--link);
  stroke: var(--link);
}

.graph-node text {
  fill: var(--text);
  font-size: 13px;
  text-anchor: middle;
}

.graph-node.is-focus text {
  font-weight: 700;
}

.graph-empty {
  margin: 0;
  padding: 36px;
  color: var(--muted);
}

/* Local draft preview */
.preview-banner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 26px;
  padding: 11px 14px;
  border: 1px solid #d8b467;
  border-radius: 8px;
  background: #fff9e8;
  color: #644b16;
  font-size: 14px;
}

.preview-banner span {
  color: #7a642f;
}

.draft-badge {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff1c7;
  color: #72530b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.15em;
}

@media (max-width: 820px) {
  .hub-page,
  .article-page,
  .sentence-page {
    width: min(100% - 32px, 760px);
    padding-top: 20px;
  }

  .article-header {
    margin-top: 38px;
  }

  .article-layout {
    display: block;
  }

  .desktop-toc {
    display: none;
  }

  .mobile-toc {
    display: block;
    width: min(100%, var(--content-width));
    margin: 0 auto 32px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .mobile-toc summary {
    cursor: pointer;
    font-weight: 600;
  }

  .article-toc.mobile {
    padding-top: 10px;
  }

  .graph-canvas {
    overflow-x: auto;
  }

  .preview-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 560px) {
  .home-page {
    width: min(100% - 32px, 720px);
    padding-top: 15vh;
  }

  .home-recent li,
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .timeline-item {
    padding: 22px 0 26px;
  }

  .sentence-collection-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sentence-collection-summary {
    justify-content: space-between;
  }

  .sentence-header {
    margin: 42px 0 36px;
  }

  .sentence-content blockquote {
    padding: 20px;
  }

  .timeline-item > time {
    padding: 0;
  }

  .view-tabs {
    gap: 24px;
  }

  .article-visual-version {
    margin-bottom: 52px;
  }

  .article-content h2 + ul:has(> li > p:first-child > strong:only-child) > li {
    padding: 18px 17px 16px;
    border-radius: 12px;
  }

  .article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) :is(#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7) {
    gap: 12px;
  }

  .article-content:has(> p:first-child img[alt*="这些公司居然也招具身智能"]) :is(#section-1, #section-2, #section-3, #section-4, #section-5, #section-6, #section-7) > img {
    flex: 0 0 82px;
    width: 82px;
    height: 50px;
    padding: 0;
    border-radius: 0;
  }

  .visual-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.7rem;
  }

  .visual-arrow-prev {
    left: 9px;
  }

  .visual-arrow-next {
    right: 9px;
  }

  .tree-article,
  .relation-list li {
    display: block;
  }

  .tree-article time,
  .relation-list time {
    display: block;
    margin-top: 2px;
  }
}

/* Blog reading space */
body:has(.blog-hub),body:has(.article-page){--background:#f8f5ee;--surface:#f0eee5;--text:#344037;--muted:#8a8e7f;--line:#dedfd2;--link:#4f684d;background:var(--background)}
.blog-hub{width:min(1120px,calc(100% - 64px));padding:0 0 60px;margin:auto}.blog-masthead{display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid var(--line)}.blog-masthead>a:last-child{font-size:13px;color:#808774}.blog-brand{font-size:35px;font-weight:800;letter-spacing:-2px;color:#344037}.blog-brand span{color:#748868}.blog-brand small{font-size:14px;font-weight:400;letter-spacing:1px;margin-left:12px}.blog-heading{display:flex;justify-content:space-between;align-items:end;padding:55px 0 37px}.blog-eyebrow{font-size:10px;letter-spacing:4px;color:#8e947f;margin:0 0 17px}.blog-heading h1{font-size:44px;font-weight:500;letter-spacing:2px;margin:0;line-height:1.3}.blog-heading h1 span{color:#9aab82}.blog-heading>p{text-align:right;font-size:12px;color:#969b8a;line-height:2;margin:0}.blog-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.blog-toolbar .view-tabs{border:0;margin:0;gap:28px}.blog-toolbar .view-tabs button{padding:15px 0;font-size:14px;border:0;border-bottom:2px solid transparent;color:#939886}.blog-toolbar .view-tabs button[aria-selected=true]{color:#425a40;border-bottom-color:#667e55}.blog-search{display:flex;align-items:center;gap:10px;color:#959b88;font-size:12px}.blog-search input{width:190px;border:0;border-bottom:1px solid #d8dccd;background:transparent;padding:8px 0;color:#3c503b;font:inherit;outline-offset:3px}.topic-chips{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0 4px}.topic-chips button{padding:5px 13px;border:1px solid #dedfd2;border-radius:20px;background:transparent;color:#888e7b;font-size:12px;cursor:pointer}.topic-chips button[aria-pressed=true]{background:#657955;color:#fffcef;border-color:#657955}.editorial-list{list-style:none;padding:0;margin:0}.editorial-card{border-bottom:1px solid var(--line);padding:30px 0}.editorial-card[hidden]{display:none}.editorial-card article{display:flex;gap:45px;align-items:center;justify-content:space-between}.editorial-copy{flex:1;min-width:0}.editorial-copy time{color:#999d8b;font-size:11px;letter-spacing:1px}.editorial-copy h2{font-size:23px;font-weight:550;line-height:1.6;margin:9px 0 10px;letter-spacing:.2px}.editorial-copy h2 a{color:#344537}.editorial-excerpt{font-size:14px;line-height:1.9;color:#898e7e;margin:0 0 15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.article-tags{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.article-tags span{padding:2px 8px;background:#eeeee2;border-radius:4px;color:#758269;font-size:10px}.editorial-cover{width:300px;height:185px;flex-shrink:0;background:#eae8de;border:1px solid #e3e2d7;border-radius:9px;overflow:hidden;display:grid;place-items:center}.editorial-cover img{width:100%;height:100%;object-fit:contain;transition:transform .3s}.editorial-cover:hover img{transform:scale(1.025)}.blog-metrics{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:#959b88;font-size:11px;font-variant-numeric:tabular-nums}.like-article{border:1px solid #cfd8c3;border-radius:20px;padding:5px 13px;background:#f0f2e8;color:#60784f;cursor:pointer;font-size:13px}.like-article[aria-pressed=true]{background:#dfe8d4}.metric-status{font-size:11px}.blog-footnote{display:flex;justify-content:space-between;font-size:11px;color:#999e8c;padding:30px 0}.blog-index{padding:25px 0}.blog-hub .view-panel[hidden]{display:none}.article-page{padding-top:28px}.article-page .breadcrumb{font-size:12px;color:#999c8d}.article-header h1{color:#344037;font-weight:550;line-height:1.5;letter-spacing:.3px}.article-content{font-size:17px;line-height:2;color:#3e463d}.article-content h2{font-weight:550;color:#3d523b;margin-top:2.5em}.article-content img{border-radius:9px}.article-toc a{color:#818b76}.article-toc a.is-active{color:#405b3e}.article-meta{color:#959b8b;font-size:12px}.article-header .blog-metrics{margin:18px 0}.article-content blockquote{border-color:#9bab85;background:#f0f1e5;color:#68755a;padding:14px 20px}.article-relations{border-color:var(--line)}
@media(max-width:760px){.blog-hub{width:calc(100% - 36px)}.blog-heading{padding:35px 0 25px}.blog-heading h1{font-size:31px}.blog-heading>p{display:none}.blog-toolbar{display:block}.blog-search{padding:4px 0 14px}.blog-search input{flex:1}.blog-toolbar .view-tabs{gap:23px}.editorial-card{padding:24px 0}.editorial-card article{gap:18px;align-items:flex-start}.editorial-cover{width:125px;height:100px;margin-top:28px}.editorial-copy h2{font-size:18px}.editorial-excerpt{font-size:12px}.blog-metrics{gap:10px}.blog-footnote{line-height:1.8;gap:16px}.article-content{font-size:16px}.article-tags{gap:4px}}@media(max-width:400px){.editorial-card article{flex-direction:column-reverse}.editorial-cover{width:100%;height:180px;margin-top:0}}

/* Cover-led browsing */
.editorial-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;margin-top:28px}.editorial-card{padding:0 0 26px}.editorial-card article{display:flex;flex-direction:column-reverse;align-items:stretch;gap:18px}.editorial-cover{width:100%;height:auto;aspect-ratio:16/10;margin:0;border-radius:12px}.editorial-cover img{min-height:0;object-fit:contain}.editorial-copy h2{font-size:21px;margin:9px 0;line-height:1.55}.editorial-copy time{font-size:11px}.editorial-copy{width:100%}.blog-metrics .comment-count{color:inherit}.article-comments{margin:64px 0 32px;padding-top:30px;border-top:1px solid var(--line)}.article-comments h2{font-size:25px;font-weight:500}.article-comments form{display:grid;gap:16px}.article-comments label{display:grid;gap:7px;font-size:13px;color:#78856d}.article-comments input,.article-comments textarea{width:100%;padding:12px 14px;border:1px solid #d9dece;border-radius:9px;background:#fcfbf5;color:#3e4e39;font:inherit;font-size:15px}.article-comments textarea{resize:vertical}.article-comments input:focus,.article-comments textarea:focus{outline:2px solid #a7b692;outline-offset:2px}.comment-actions{display:flex;gap:20px;align-items:center;justify-content:space-between}.comment-actions small{font-size:11px;color:#939b86}.comment-actions button,#more-comments{border:0;border-radius:8px;padding:10px 18px;background:#617653;color:#fffdf3;cursor:pointer;white-space:nowrap}.comment-actions button:disabled{opacity:.5}.article-comments .comment-trap{display:none}.comment-item{border-top:1px solid #e0e3d7;padding:22px 0}.comment-item>div{display:flex;gap:16px;align-items:center;justify-content:space-between}.comment-item strong{font-size:14px;font-weight:500}.comment-item time{font-size:11px;color:#929b87}.comment-item p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.9}.comments-empty,#comment-status{font-size:13px;color:#839276}#more-comments[hidden]{display:none}@media(max-width:680px){.editorial-list{grid-template-columns:1fr;gap:24px}.editorial-card article{gap:14px;flex-direction:column-reverse;align-items:stretch}.editorial-cover{width:100%;height:auto;aspect-ratio:16/10;margin:0}.editorial-copy h2{font-size:21px}.comment-actions{align-items:flex-start}.comment-item>div{flex-wrap:wrap}}

/* Selected option 03: unified card with a WeChat-ratio cover. */
.blog-hub{max-width:1120px}.blog-heading{padding:32px 0 25px}.blog-eyebrow{margin-bottom:12px}.blog-heading h1{font-size:36px}.blog-toolbar .view-tabs button{padding:12px 0}.topic-chips{padding:18px 0 0}.editorial-list{gap:22px;margin-top:22px}.editorial-card{border:1px solid #dcded0;border-radius:12px;background:#fcfaf5;padding:8px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.editorial-card:hover{border-color:#b9c6aa;box-shadow:0 5px 18px #45553c09}.editorial-card article{height:100%;flex-direction:column;gap:0;align-items:stretch}.editorial-cover{width:100%;height:auto;aspect-ratio:2.35/1;flex-shrink:0;border:0;border-radius:7px;background:#eeece3;margin:0;overflow:hidden}.editorial-cover img{display:block;width:100%;height:100%;object-fit:contain}.editorial-cover:hover img{transform:none}.editorial-copy{display:flex;flex:1;flex-direction:column;padding:12px 8px 8px}.editorial-copy h2{font-size:20px;font-weight:550;line-height:1.55;margin:0 0 8px}.editorial-copy .article-tags{margin:0 0 17px;gap:6px}.editorial-copy .article-tags span{border-radius:14px;padding:2px 10px;font-size:11px}.editorial-footer{margin-top:auto;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.editorial-footer time{font-size:11px;letter-spacing:.3px;white-space:nowrap}.editorial-footer .blog-metrics{gap:12px;font-size:11px;color:#7b8672}.editorial-footer .metric-status:empty{display:none}.blog-hub [data-view-panel=timeline]{padding-top:0}
@media(max-width:760px){.blog-heading{padding:24px 0 18px}.blog-heading h1{font-size:29px}.blog-toolbar .view-tabs button{font-size:13px}.editorial-card article{flex-direction:column;gap:0}.editorial-cover{width:100%;height:auto;aspect-ratio:2.35/1;margin:0}.editorial-copy h2{font-size:19px}.editorial-list{gap:18px}.editorial-copy{padding:12px 6px 7px}.editorial-footer{gap:8px}.editorial-footer .blog-metrics{gap:10px}}

/* Match the approved compact 03 composition, not just its card shape. */
.blog-hub{width:calc(100% - 64px);max-width:960px}.blog-masthead{padding:18px 0 8px;border-bottom:0}.blog-brand{font-family:Georgia,serif;font-size:25px;font-style:italic;letter-spacing:-1px}.blog-brand small{font-style:normal;font-size:14px}.blog-nav-actions{display:flex;align-items:center;gap:22px;font-size:12px;color:#65735e}.blog-tools{position:relative}.blog-tools summary{cursor:pointer;list-style:none;color:#89917d}.blog-tools summary::-webkit-details-marker{display:none}.blog-tools .blog-toolbar{position:absolute;top:28px;right:0;z-index:5;display:block;width:330px;padding:15px 20px;border:1px solid #d8dece;border-radius:10px;background:#faf8f0;box-shadow:0 8px 30px #3a4b3215}.blog-tools .blog-search{padding-top:10px}.blog-heading{padding:20px 0 10px}.blog-heading h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:30px;font-weight:600;letter-spacing:1px}.blog-heading>p{font-size:11px;line-height:1.7;color:#7f8872}.topic-chips{padding:0;gap:8px}.topic-chips button{padding:3px 13px;font-size:11px;border:0;background:#eeece3}.editorial-list{gap:14px;margin-top:18px}.editorial-card{padding:6px;border-radius:10px}.editorial-copy{padding:9px 7px 6px}.editorial-copy h2{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:18px;line-height:1.45;font-weight:600;margin-bottom:7px}.editorial-copy .article-tags{margin-bottom:12px}.editorial-copy .article-tags span{font-size:10px;padding:1px 8px}.editorial-footer time{font-size:11px}.blog-metrics>span:not(.metric-status),.blog-metrics>a,.like-article{display:inline-flex;align-items:center;gap:6px}.editorial-footer .blog-metrics{gap:17px;color:#506049;font-size:11px}.editorial-footer .blog-metrics svg{width:15px;height:15px}.blog-footnote{padding-top:24px}@media(max-width:680px){.blog-hub{width:calc(100% - 28px)}.blog-heading{padding:18px 0 12px}.blog-heading h1{font-size:27px}.blog-nav-actions{gap:12px;font-size:11px}.blog-tools .blog-toolbar{width:min(320px,calc(100vw - 35px));right:-65px}.editorial-copy h2{font-size:18px}.editorial-list{gap:14px;margin-top:16px}.editorial-copy{padding:10px 7px}.topic-chips{gap:6px}.blog-heading>p{display:none}}