@chengzhao-dev/dsh-quarto-book 0.4.3 → 0.5.0

package/skills/designing-theme/assets/theme/css/code.css

@@ -50,11 +50,11 @@ pre:not(.sourceCode) code {
 }
 pre.sourceCode code > span { line-height: var(--code-line-height); }
 
-/* GitHub 风格高亮只区分颜色，不用额外字重强调命令名或输出 token。 */
+/* 高亮只区分颜色，不用额外字重强调命令名或输出 token。 */
 pre.sourceCode code span { font-weight: 400; }
 
 /*
- * 颜色只由 GitHub 风格的语义 token 提供。不要按字符、位置或命令名
+ * 颜色只由语义 token 提供。不要按字符、位置或命令名
  * 覆盖 span，否则同一行的括号、版本号和普通文本会出现突兀的颜色切换。
  */
 /* 语言代码块和普通文本代码块共享布局；只有语言代码块保留语义 token。 */
@@ -206,6 +206,88 @@ pre.sourceCode code > span:hover { background-color: var(--line-hover-bg); }
 }
 .code-copy-button-checked { opacity: 1; color: var(--link-color); }
 
+/* ---------- 代码工具（code-tools） ----------
+   浮在代码块右上角的「代码」按钮与下拉菜单来自 Bootstrap，默认 16px 灰蓝字、
+   无本轮语义；接到令牌：次要色 → 悬停主色，菜单与分隔线用卡片层令牌。 */
+.code-tools-button {
+  color: var(--text-secondary) !important;
+  font-family: var(--ui-font);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  padding: 0.15rem 0.45rem;
+  border-radius: var(--radius-sm);
+  background: transparent;
+}
+.code-tools-button:hover,
+.code-tools-button:focus-visible {
+  color: var(--body-color) !important;
+  background: var(--surface-raised);
+}
+.code-tools-menu {
+  border: 1px solid var(--card-border);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+  font-family: var(--ui-font);
+  font-size: 0.875rem;
+  padding: 0.25rem;
+}
+.code-tools-menu .dropdown-item {
+  color: var(--body-color);
+  border-radius: var(--radius-sm);
+  padding: 0.3rem 0.55rem;
+}
+.code-tools-menu .dropdown-item:hover {
+  background: var(--surface-raised);
+  color: var(--body-color);
+}
+.code-tools-menu .dropdown-divider {
+  border-top-color: var(--card-border);
+}
+
+/* ---------- 代码标注（code-annotation） ----------
+   Quarto 自带的标注样式是 Bootstrap 默认：gutter 一块浅灰底、行号是主色圆点，
+   暗色下浅灰块会发亮、圆点色与本书强调色不同源。这里只接令牌：gutter 透明、
+   行内编号与注释列表编号共用动作色描边，注释正文走 14px 次要色。 */
+.code-annotation-gutter,
+.code-annotation-gutter-bg {
+  background-color: transparent;
+}
+#quarto-document-content code.sourceCode .code-annotation-anchor,
+#quarto-document-content .code-annotation-container-grid dt {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--accent);
+  font-family: var(--ui-font);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  line-height: 1;
+  text-decoration: none;
+}
+#quarto-document-content code.sourceCode .code-annotation-anchor {
+  margin-right: 0.4rem;
+}
+.code-annotation-container-grid {
+  margin: 0.6rem 0 1.5rem;
+}
+.code-annotation-container-grid dt {
+  border-color: var(--text-secondary);
+  color: var(--text-secondary);
+  font-family: var(--ui-font);
+}
+.code-annotation-container-grid dd {
+  margin: 0 0 0.45rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.65;
+}
+
 /* 打印时横向滚动不存在，屏幕上的 white-space: pre 会把 100 列截掉；
    打印恢复折行，屏幕规则不动。 */
 @media print {

package/skills/designing-theme/assets/theme/css/content.css

@@ -1,6 +1,6 @@
 /* dsh-quarto-book Quarto 主题 · 正文内容（表格 / 引用 / 正文组件与排版；自 common.css 拆分） */
 
-/* ---------- 表格（冷灰 docs：无外框、表头底线 + 行 hairline） ---------- */
+/* ---------- 表格（booktabs：顶/底粗线、表头细线，无行线与竖线） ---------- */
 .table {
   --bs-table-hover-bg: transparent;
   /* 表体与正文同档：表格字号一旦小于正文，正文里嵌表格就会出现两次字级跳变，
@@ -17,11 +17,11 @@
   font-variant-numeric: tabular-nums;
 }
 .table > :not(caption) > * > * {
-  padding: 0.5rem 1rem;
+  padding: 0.55rem 0.9rem;
   vertical-align: baseline;
-  border-bottom: 1px solid var(--table-hairline);
+  border-bottom: 0;
 }
-/* 首尾列贴边（docs 表格无左右内边距） */
+/* 首尾列贴边，让表格与正文左缘对齐 */
 .table > :not(caption) > * > :first-child {
   padding-inline-start: 0;
 }
@@ -31,9 +31,15 @@
 .table thead th {
   background-color: transparent;
   font-weight: 600;
-  font-size: 0.8125rem;
+  /* 表头比表体小 1px（17px → 15px），层级靠字重与字号，不靠比顶线更粗的线。 */
+  font-size: 0.9375rem;
   text-align: left;
   padding-top: 0;
+  padding-bottom: 0.45rem;
+  border-top: 1px solid var(--table-border);
+  border-bottom: 1px solid var(--table-border);
+}
+.table > tbody > tr:last-child > * {
   border-bottom: 1px solid var(--table-border);
 }
 
@@ -59,55 +65,151 @@
   padding-inline-end: 0;
 }
 
-/* ---------- 引用块（> 标记，用于「注意」等提示；GitHub markdown-body 灰风：灰边 + 灰字，无彩色底） ---------- */
+/* 表题：Pandoc 输出 <caption>，Bootstrap 默认把它放表下（caption-side: bottom），
+   这里统一提到表上、左对齐，与图注一样小一号。 */
+#quarto-document-content .table > caption {
+  caption-side: top;
+  text-align: left;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--text-secondary);
+  padding: 0 0 0.5rem;
+}
+
+/* 斑马纹压平：书籍表格靠表头线与列距，不靠交替底色（打印时还要 print-color-adjust）。 */
+#quarto-document-content .table-striped > tbody > tr:nth-of-type(odd) > * {
+  background-color: transparent;
+}
+
+/* 任务列表：checkbox 跟强调色，不加卡片。 */
+#quarto-document-content input[type="checkbox"] {
+  accent-color: var(--action-color);
+  margin-inline-end: 0.4em;
+}
+
+/* 脚注：比正文小一档（17px → 14px），顶部一条通栏发丝线与正文分开。 */
+#quarto-document-content .footnotes {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--card-border);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--text-secondary);
+}
+#quarto-document-content .footnotes ol {
+  padding-inline-start: 1.25rem;
+  margin-bottom: 0;
+}
+#quarto-document-content .footnotes li + li {
+  margin-top: 0.35rem;
+}
+#quarto-document-content .footnotes a {
+  color: var(--text-secondary);
+}
+
+/* ---------- 引用块（上下各一条通栏发丝线 + 正文色，无底色、无竖线；书籍引文而非灰卡） ----------
+   横线规则：全书正文里的分隔一律是「通栏 1px 卡片发丝线」，与表格线、顶栏底边同一档颜色；
+   引用块左右贯通正文列，靠这两条线界定范围，不再用左侧 2px 竖条（竖条与通栏规则相斥）。 */
 blockquote,
 blockquote.blockquote {
-  font-size: 0.9375rem; /* 略小于正文（次要提示定位），并压掉 Quarto .blockquote 命中的 Bootstrap 1.25rem */
-  margin: 1.375rem 0;
-  border-left: 3px solid var(--quote-border);
-  background-color: var(--quote-bg);
-  color: var(--text-secondary);
-  padding: 0 1rem;
+  font-size: inherit;
+  margin: 1.75rem 0;
+  /* Quarto 默认给引用块画 4px 左竖条，这里显式清零，否则上下横线之外还挂着一根竖墙。 */
+  border: 0;
+  border-top: 1px solid var(--card-border);
+  border-bottom: 1px solid var(--card-border);
+  background-color: transparent;
+  color: var(--body-color);
+  padding: 1.1rem 0 1.15rem;
   font-style: normal;
 }
-/* 分隔线（---）样式与节奏统一在下方「正文排版」段定义（docs 风：每个小节标题前一条细线，上方 3.375rem） */
 
 /* ---------- 正文组件润色 ---------- */
-/* 正文链接：强调色 + 细下划线 */
+/* 正文链接：常态与正文同色 + 下划线；hover 才转为 accent，underline 用 action 色 */
 #quarto-document-content a {
   color: var(--text-link);
   text-decoration: underline;
   text-decoration-color: var(--text-underline);
   text-decoration-thickness: 1px;
-  text-underline-offset: 0.2em;
+  text-underline-offset: 0.18em;
 }
 #quarto-document-content a:hover {
-  color: var(--link-color);
-  text-decoration-color: var(--link-underline);
+  color: var(--link-hover-color);
+  text-decoration-color: var(--action-color);
 }
-/* 图片 / 图：圆角 + 细边 + 居中图注 */
+/* 图片 / 图：小圆角 + 细边 + 居中图注 */
 #quarto-document-content img:not(.no-border) {
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-sm);
   border: 1px solid var(--code-border);
   max-width: 100%;
 }
-#quarto-document-content figure figcaption {
+#quarto-document-content figure figcaption,
+#quarto-document-content .quarto-float-caption,
+#quarto-document-content .figure-caption {
   color: var(--text-secondary);
-  font-size: 0.88rem;
+  font-size: 0.875rem;
+  line-height: 1.65;
   text-align: center;
   margin-top: 0.5rem;
 }
+/* MathJax：行内公式默认缩到正文的 94%，夹在中文里会显得「小一号」；
+   拉到 1em 与正文同档，display 公式单独给上下呼吸。 */
+/* MathJax 会把 94% 写进 mjx-container 的行内 style，样式表必须 !important 才压得住。 */
+#quarto-document-content mjx-container {
+  font-size: 1em !important;
+}
+mjx-container[display="true"] {
+  margin: 1.3rem 0;
+}
+
+/* 源码模态（code-tools）：Bootstrap 默认 1000px，平板宽度下会顶满整屏。
+   这里在 ≥576px 时封顶并留出 1rem 边距；更窄沿用 Bootstrap 的 .5rem 边距。 */
+@media (min-width: 576px) {
+  #quarto-embedded-source-code-modal .modal-dialog {
+    max-width: min(1000px, calc(100vw - 2rem));
+  }
+}
+
+/* 图片灯箱（GLightbox，format.html.lightbox: true 时启用）
+   默认遮罩 0.7 黑、页面图注会从图片后面透出来，读起来像「标签贴错位置」；
+   这里加深遮罩把图单独抬出来，关闭/翻页按钮统一成白描边胶囊。 */
+.glightbox-container .goverlay {
+  background: rgba(0, 0, 0, 0.86);
+}
+.glightbox-container .gbtn {
+  background: rgba(0, 0, 0, 0.45);
+  border-radius: 999px;
+}
+.glightbox-container .gbtn:hover,
+.glightbox-container .gbtn:focus-visible {
+  background: rgba(0, 0, 0, 0.7);
+}
+.glightbox-container .gbtn svg path {
+  fill: #fff;
+}
+.glightbox-container .gslide-image img {
+  border-radius: var(--radius-sm);
+}
+/* 透明底的 SVG（品牌标记、图表）在深色遮罩上会「消失」：给矢量图垫白卡，
+   位图不加任何装饰，避免给照片套白边。 */
+.glightbox-container .gslide-image img[src$=".svg"],
+.glightbox-container .gslide-image img[src*=".svg?"] {
+  background: #fff;
+  padding: 0.9rem;
+  box-sizing: border-box;
+}
+
 /* jupyter 单元的图必须用 IPython.display.HTML 输出保持 SVG 内联：image/svg+xml 输出会被
    Quarto 外置成 <img>，无法继承站点 data-bs-theme 明暗与文档字体。text/html 输出不被
    Quarto 识别为图像，fig-cap 退化为图后一个裸 <p>，这里按 figcaption 同款图注样式居中。 */
 #quarto-document-content .cell-output-display > svg.coords-grid + p {
   color: var(--text-secondary);
-  font-size: 0.88rem;
+  font-size: 0.875rem;
   text-align: center;
   margin-top: 0.5rem;
 }
 /* mermaid / dot 图表样式见 mermaid.css（SVG 居中规则已迁入） */
-/* 坐标图：GitHub 文档图的做法是抬起一块浅底、不加实线外框。
+/* 坐标图：常见文档图的做法是抬起一块浅底、不加实线外框。
    内联 SVG 用 currentColor，跟着正文颜色走；独立 svg 文件再用
    prefers-color-scheme 兜住系统明暗。 */
 #quarto-document-content :is(figure, .cell-output-display) svg.coords-grid {
@@ -118,7 +220,7 @@ blockquote.blockquote {
   height: auto;
   color: var(--body-color);
   background: var(--surface-raised);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   padding: 0.75rem;
   box-sizing: border-box;
 }
@@ -127,6 +229,15 @@ blockquote.blockquote {
 #quarto-document-content section :is(.code-copy-outer-scaffold, .code-with-filename, pre) + :is(p, ul, ol) {
   font-family: var(--ui-font);
 }
+/* 行内代码遇到无空格的类型名（std::array<std::array<CellType, 3>, 3>）时，
+   窄屏会把正文列顶宽；此时允许行内代码换行，桌面保持原样。 */
+@media (max-width: 575.98px) {
+  #quarto-document-content :is(p, li, dd, td, th) code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+}
+
 /* 键盘键 */
 #quarto-document-content kbd {
   font-family: var(--mono-font);
@@ -157,23 +268,28 @@ dd {
   color: var(--text-secondary);
 }
 #quarto-document-content details.answer-disclosure {
-  border: 1px solid var(--card-border);
-  border-radius: var(--radius-md);
-  padding: 0.6rem 1rem;
-  margin: 1.2rem 0;
+  border: 0;
+  border-top: 1px solid var(--card-border);
+  border-bottom: 1px solid var(--card-border);
+  border-radius: 0;
+  background: transparent;
+  padding: 0.7rem 0;
+  margin: 1.4rem 0;
 }
 /* 摘要文字用正文色；折叠三角显式着色——部分浏览器的 marker 不跟随文字色，
    暗色底上会以黑色渲染导致消失。 */
 #quarto-document-content details.answer-disclosure > summary {
   cursor: pointer;
   color: var(--body-color);
+  font-size: 0.9375rem;
+  line-height: 1.5;
 }
 #quarto-document-content details.answer-disclosure > summary::marker,
 #quarto-document-content details.answer-disclosure > summary::before {
   color: var(--body-color);
 }
 #quarto-document-content details.answer-disclosure[open] > summary {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.6rem;
 }
 
 /* ---------- 正文排版 ---------- */
@@ -201,19 +317,19 @@ html {
 ::selection {
   background-color: var(--selection-bg);
 }
-/* 键盘导航焦点可见 */
+/* 键盘导航焦点可见：用 action 色，不把正文链接染蓝 */
 :focus-visible {
-  outline: 2px solid var(--link-color);
+  outline: 2px solid var(--action-color);
   outline-offset: 2px;
   border-radius: 2px;
 }
-/* 列表项间距：li+li 0.625rem、嵌套列表上距 0.625rem（docs 节奏；仅正文内容，不碰侧栏） */
+/* 列表项间距：li+li 0.5rem、嵌套列表上距 0.5rem（仅正文内容，不碰侧栏） */
 #quarto-document-content li + li {
-  margin-top: 0.625rem;
+  margin-top: 0.5rem;
 }
 #quarto-document-content li > ul,
 #quarto-document-content li > ol {
-  margin-top: 0.625rem;
+  margin-top: 0.5rem;
 }
 /* 列表 marker（圆点/序号）：显式用次要文字色，暗色底上浏览器默认 marker 可能
    以黑色渲染导致消失。 */
@@ -262,7 +378,7 @@ code {
   text-autospace: no-autospace;
 }
 
-/* GitHub Markdown 正文约束：普通段落使用正文列的实际宽度，组件不撑破三栏布局。
+/* Markdown 正文约束：普通段落使用正文列的实际宽度，组件不撑破三栏布局。
    页面列宽由 Quarto grid 与 --content-width 决定；不要再用 75ch 对段落做第二次限宽。 */
 #quarto-document-content {
   max-width: min(100%, var(--content-width));
@@ -278,7 +394,7 @@ code {
 #quarto-document-content hr {
   border: 0;
   border-top: 1px solid var(--card-border);
-  margin: 2rem 0;
+  margin: 2.5rem 0;
   opacity: 1;
 }
 /* 锚点 / 深链跳转后的目标标题轻微高亮，便于定位（复用行 hover 的浅强调底） */

package/skills/designing-theme/assets/theme/css/landing.css

@@ -1,61 +1,114 @@
-/* dsh-quarto-book Quarto 主题 · 首页落地页（Hero / 卡片网格；自 common.css 拆分） */
+/* dsh-quarto-book Quarto 主题 · 首页落地页（Hero / 目录网格；书籍式编辑排版） */
 
-/* ---------- 首页落地页：Hero + 功能卡片 ---------- */
+/* ---------- 首页落地页：Hero + 目录 ---------- */
 /* Hero 复用 #title-block-header（h1 + description 副标题）
    —— 间距控制点（关键）：
       · 标题→描述：本规则 margin-top
         注意：Bootstrap 自带 #title-block-header.quarto-title-block.default .description { margin-top:0 }
         （特异性 1,3,0）会压过低特异性 #title-block-header .description（1,1,0），
-        故此处必须用【同等特异性】选择器才能生效；否则改 margin-top 一律无效（之前 20rem 不生效即此因）。
-       · 描述→hero 卡片：本规则 margin-bottom（与 .feature-grid margin-top 折叠取大值，须同步改才生效） */
+        故此处必须用【同等特异性】选择器才能生效。
+      · 描述→目录网格：本规则 margin-bottom（与 .feature-grid margin-top 折叠取大值，须同步改才生效） */
 #title-block-header.quarto-title-block.default .description {
   font-size: 1.125rem;
   text-align: left;        /* 与左对齐标题一致（覆盖默认 theme 居中） */
-  margin-top: 1.5rem;      /* 标题→描述：空一行（gitcn hero mt-3 放宽） */
-  margin-bottom: 0.6rem;   /* 描述→卡片：收紧（须与 .feature-grid 顶边距同步改） */
+  margin-top: 1.5rem;      /* 标题→描述：留一行 */
+  margin-bottom: 0.6rem;   /* 描述→目录：收紧 */
 }
 .feature-grid {
   display: grid;
-  /* 桌面端固定两列；单卡也保留半行宽度，与双卡保持一致。
-     半行宽度沿用 calc((100% - 1.25rem) / 2) 的既有布局契约。 */
-  grid-template-columns: repeat(2, minmax(0, calc((100% - 1.25rem) / 2)));
-  gap: 1.25rem;            /* 卡片间距对齐 gitcn（~20px） */
-  margin: 0.6rem 0 1rem;   /* 顶部 0.9rem → 0.6rem，与描述下边距折叠后整体 0.6rem */
+  /* 两栏目录；栏距比卡片内边距宽一档，让两栏的文本列互不干扰 */
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 2.5rem;
+  margin: 0.9rem 0 1.5rem;
+  counter-reset: landing-card;
 }
-/* 首页各分组（## 准备 / ## 语言核心）下方引导段：灰字小一号，对齐 gitcn 分组描述；
+/* 只有一张卡（当前游戏）时占满整行，右侧不再留半行空白；
+   多卡（后续棋类）仍按两栏目录排。 */
+.feature-grid:has(> .landing-card:only-child) {
+  grid-template-columns: 1fr;
+}
+/* 单张「当前游戏」是首页的主目录条目：把序号放大成版式锚点，
+   标题、提要列在中间，动作留在右下，避免整行只有左侧一小段文字。 */
+.feature-grid:has(> .landing-card:only-child) .landing-card {
+  grid-template-columns: 3rem minmax(0, 1fr) auto;
+  grid-template-areas:
+    "index title cta"
+    "index desc  cta";
+  column-gap: 1.25rem;
+  row-gap: 0.45rem;
+  padding: 1.35rem 0 1.5rem;
+}
+.feature-grid:has(> .landing-card:only-child) .landing-card::before {
+  font-size: 1.75rem;
+  letter-spacing: 0;
+  line-height: 1;
+  padding-top: 0.15rem;
+  opacity: 1;
+}
+.feature-grid:has(> .landing-card:only-child) .landing-card h3 {
+  font-size: 1.375rem;
+}
+.feature-grid:has(> .landing-card:only-child) .landing-card p {
+  font-size: 1rem;
+  max-width: 46ch;
+}
+/* 首页各分组（## 准备 / ## 语言核心）下方引导段：灰字小一号；
    作用域限定首页（:has(.hero-eyebrow)），内容页引言保持正文色不受影响 */
 #quarto-document-content:has(.hero-eyebrow) section.level2 > p:first-of-type {
   color: var(--text-secondary);
   font-size: 0.9375rem;
-  line-height: 1.5;
-  margin: 0 0 1.25rem;
+  line-height: 1.6;
+  margin: 0 0 1rem;
 }
-/* 首页专用卡片（与正文内容完全隔离的组件，高特异性确保标题加粗+描述灰必生效） */
+/* 首页目录条目：书页目录的一行。
+   左侧是序号、标题、提要，右侧是动作；顶线分隔，不画卡片底色。 */
 .landing-card {
-  display: block;
-  background: var(--card-bg);
-  border: 1px solid var(--card-border);
-  border-radius: var(--radius-lg);
-  padding: 1.35rem 1.5rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "index index"
+    "title cta"
+    "desc  cta";
+  column-gap: 2rem;
+  row-gap: 0.35rem;
+  align-items: start;
+  background: transparent;
+  border: 0;
+  border-top: 1px solid var(--card-border);
+  border-radius: 0;
+  padding: 1.1rem 0 1.35rem;
   transition: var(--transition);
-  min-height: 100%; /* 两卡并排时等高，避免短卡显得挤 */
+  min-height: 0;
   box-sizing: border-box;
 }
+/* 目录序号：小号等宽数字，像纸书目录前的 01/02 */
+.landing-card::before {
+  counter-increment: landing-card;
+  content: counter(landing-card, decimal-leading-zero);
+  grid-area: index;
+  font-family: var(--mono-font);
+  font-size: 1.25rem;
+  letter-spacing: 0;
+  line-height: 1.1;
+  padding-top: 0.1rem;
+  color: var(--text-secondary);
+  opacity: 1;
+}
 .landing-card:hover {
-  border-color: var(--card-hover-border);
-  background-color: var(--surface-raised);
-  box-shadow: var(--card-shadow);
+  border-top-color: var(--accent);
+  background-color: transparent;
+  box-shadow: none;
 }
 .landing-card:focus-within {
-  border-color: var(--accent);
+  border-top-color: var(--accent);
   outline: 2px solid var(--accent);
-  outline-offset: 2px;
+  outline-offset: 3px;
 }
 #quarto-document-content .landing-card h3 {
+  grid-area: title;
   margin-top: 0;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0;
   font-size: 1.0625rem;
-  /* 单字面字体 + font-synthesis: none 下 600 不会变粗；卡片标题靠字号与边框区分 */
   color: var(--body-color);
 }
 #quarto-document-content .landing-card h3 a {
@@ -64,19 +117,36 @@
   text-decoration: none;
 }
 .landing-card h3 a:hover {
-  color: var(--accent);
+  color: var(--link-hover-color);
   text-decoration: none;
 }
 #quarto-document-content .landing-card p {
+  grid-area: desc;
+  max-width: 54ch;
   margin-bottom: 0;
-  color: var(--text-secondary);   /* 描述灰字（对齐 gitcn） */
+  color: var(--text-secondary);
   font-size: 0.9375rem;
-  line-height: 1.5;
+  line-height: 1.7;
+}
+/* Pandoc 会把 `[进入井字棋 →]{.cta}` 包进 <p>；网格项因此是段落而不是链接。
+   把带 .cta 的段落放到 cta 区，链接本体再恢复字号。 */
+#quarto-document-content .landing-card p:has(> a.cta) {
+  grid-area: cta;
+  align-self: end;
+  justify-self: end;
+  max-width: none;
+  margin: 0;
+  font-size: 0;
+  line-height: 1;
 }
-/* 未撰写章节：弱化 + "规划中" 角标 */
+#quarto-document-content .landing-card p:has(> a.cta) > a.cta {
+  font-size: 0.8125rem;
+}
+/* 未撰写章节：弱化 + "规划中" 文字标记 */
 .landing-card.coming-soon {
-  background-color: var(--surface-raised);
-  border-color: var(--card-border);
+  background-color: transparent;
+  border-top-color: var(--card-border);
+  opacity: 0.7;
 }
 .landing-card.coming-soon h3,
 .landing-card.coming-soon h3 a,
@@ -86,34 +156,38 @@
 }
 .landing-card.coming-soon::after {
   content: "规划中";
-  display: inline-block;
-  margin-top: 0.7rem;
-  font-size: 0.72rem;
+  grid-area: cta;
+  align-self: end;
+  justify-self: end;
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
   color: var(--text-secondary);
-  border: 1px solid var(--card-border);
-  border-radius: 6px;
-  padding: 0.05rem 0.55rem;
 }
 
-/* 主题卡 CTA：对齐 gitcn 的「开始学习 →」蓝链；块级 + 上留白，确保与描述分行 */
+/* 目录 CTA：条目右下的动作，墨色下划线，hover 才转 accent */
 #quarto-document-content .landing-card a.cta {
-  display: block;
-  margin-top: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
+  grid-area: cta;
+  align-self: end;
+  justify-self: end;
+  display: inline-block;
+  margin-top: 0;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
   color: var(--link-color);
-  text-decoration: none;
-}
-.landing-card a.cta:hover {
   text-decoration: underline;
   text-decoration-color: var(--link-underline);
-  text-underline-offset: 0.2em;
+  text-underline-offset: 0.18em;
+}
+.landing-card a.cta:hover {
+  color: var(--link-hover-color);
+  text-decoration-color: var(--action-color);
 }
 /* 落地页分组标题与卡片的间距节奏
    Quarto 把 h2 包进 section.level2，不能用「主容器直属 h2」选择器 */
 #quarto-document-content > h2 + .feature-grid,
 #quarto-document-content section.level2 > h2 + .feature-grid {
-  margin-top: 0.4rem;
+  margin-top: 0.9rem;
 }
 /* 分组引导段（h2 下首段）与卡片网格：略收紧，避免两卡一行时上下空档过大 */
 #quarto-document-content section.level2 > p:first-of-type + .feature-grid {
@@ -173,10 +247,34 @@ body.homepage .landing-card,
     gap: 1rem;
   }
   .landing-card {
-    padding: 1.1rem 1.15rem;
+    padding: 1rem 0 1.25rem;
+  }
+  /* 窄屏单卡：动作挪到提要下方，提要不再被右侧 CTA 挤成一条窄栏 */
+  .feature-grid:has(> .landing-card:only-child) .landing-card {
+    grid-template-columns: 2.5rem minmax(0, 1fr);
+    grid-template-areas:
+      "index title"
+      "index desc"
+      "index cta";
+    column-gap: 1rem;
+    row-gap: 0.4rem;
+  }
+  .feature-grid:has(> .landing-card:only-child) .landing-card::before {
+    font-size: 1.5rem;
+    padding-top: 0.1rem;
+  }
+  .feature-grid:has(> .landing-card:only-child) .landing-card h3 {
+    font-size: 1.25rem;
+  }
+  .feature-grid:has(> .landing-card:only-child) .landing-card p {
+    font-size: 0.9375rem;
+    max-width: none;
+  }
+  .feature-grid:has(> .landing-card:only-child) .landing-card p:has(> a.cta) {
+    justify-self: end;
   }
 }
 body.homepage .landing-card h3 a,
 #quarto-document-content:has(> #title-block-header:first-child + .feature-grid) .landing-card h3 a {
-  color: var(--body-color);   /* 卡片标题非蓝链，与 hero 配色统一 */
+  color: var(--body-color);   /* 目录标题不是动作色，与 hero 配色统一 */
 }