是跨行写的，pre-wrap 会把那些
换行渲染成真的换行，而 normal 与原先的 nowrap 在空白处理上完全一致（都折叠成单个空格），
只是额外允许在空格处断行。没有空格的长 token 由 code 规则里的 break-word 兜底。
表格单元格同样受益——列宽被 table-layout: fixed 定死，代码不折行会压到邻列文字上。
**必须写成 `:not(pre) > code`**：直接写裸 `code { white-space: normal }` 与 `pre` 的
`white-space: pre` 同特异性，会按先后顺序把代码块的等宽排布一起改掉。 */
:not(pre) > code { white-space: normal; overflow-wrap: break-word; }
.cmd { color: var(--syn-cmd); }
.comment { color: var(--syn-comment); font-style: italic; }
.keyword { color: var(--syn-keyword); }
.string { color: var(--syn-string); }
/* 复制按钮：由脚本注入 */
.code-copy {
position: absolute;
top: var(--sp-2);
right: var(--sp-2);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 34px;
height: 30px;
padding: 0 10px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-xs);
background: var(--surface-2);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: var(--text-muted);
font-family: var(--font);
font-size: 12px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity var(--t) linear, color var(--t-fast) linear,
background var(--t-fast) linear, border-color var(--t-fast) linear;
}
.code-copy svg { display: block; flex: none; }
.code-copy .code-copy-label { display: none; }
@media (min-width: 640px) { .code-copy .code-copy-label { display: inline; } }
pre:hover .code-copy,
pre:focus-within .code-copy,
.code-copy:focus-visible { opacity: 1; }
@media (hover: none) { .code-copy { opacity: 1; } }
@media (hover: hover) {
.code-copy:hover { color: var(--text); background: var(--surface-3); border-color: var(--border-strong); }
}
.code-copy.is-done { color: var(--green); border-color: var(--green-line); background: var(--green-bg); }
/* ---------------------------------------------------------------------------
11 提示框 .box
--------------------------------------------------------------------------- */
.box {
position: relative;
padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
margin: 0 0 var(--sp-4);
border-radius: var(--radius-sm);
font-size: 15px;
line-height: 1.75;
color: var(--text-dim);
background: var(--glass-bg);
}
.box::before {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 0;
width: 3px;
border-radius: var(--radius-pill);
background: var(--border-strong);
}
.box .t {
display: block;
font-family: var(--font-display);
font-size: 14px;
font-weight: 650;
letter-spacing: .01em;
color: var(--text);
margin-bottom: var(--sp-2);
}
.box p { font-size: 15px; color: var(--text-dim); margin-bottom: var(--sp-3); }
.box p:last-child { margin-bottom: 0; }
.box ul, .box ol { margin-bottom: var(--sp-3); }
.box li { color: var(--text-dim); }
.box code { color: var(--accent); }
.box > :first-child { margin-top: 0; }
.box.tip { background: var(--green-bg); border-color: var(--green-line); }
.box.tip::before { background: var(--green); }
.box.tip .t { color: var(--green); }
.box.warn { background: var(--orange-bg); border-color: var(--orange-line); }
.box.warn::before { background: var(--orange); }
.box.warn .t { color: var(--orange); }
.box.danger { background: var(--red-bg); border-color: var(--red-line); }
.box.danger::before { background: var(--red); }
.box.danger .t { color: var(--red); }
.box.note { background: var(--blue-bg); border-color: var(--blue-line); }
.box.note::before { background: var(--blue); }
.box.note .t { color: var(--blue); }
/* 彩色底上的正文要压回主文字色以保证对比度 */
.box.tip p, .box.tip li,
.box.warn p, .box.warn li,
.box.danger p, .box.danger li,
.box.note p, .box.note li { color: var(--text); }
/* ---------------------------------------------------------------------------
12 对照卡 .compare
--------------------------------------------------------------------------- */
.compare {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: var(--sp-3);
margin: 0 0 var(--sp-4);
}
.compare-box {
padding: var(--sp-4);
border-radius: var(--radius-sm);
font-size: 15px;
line-height: 1.75;
color: var(--text-dim);
}
.compare-box .compare-title {
display: block;
font-family: var(--font-display);
font-size: 14px;
font-weight: 650;
color: var(--text);
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--hairline);
}
.compare-box p, .compare-box li { font-size: 15px; color: var(--text-dim); }
.compare-box p { margin-bottom: var(--sp-2); }
.compare-box ul, .compare-box ol { margin-bottom: 0; }
.compare-bad { background: var(--red-bg); border-color: var(--red-line); }
.compare-bad .compare-title { color: var(--red); border-bottom-color: var(--red-line); }
.compare-good { background: var(--green-bg); border-color: var(--green-line); }
.compare-good .compare-title { color: var(--green); border-bottom-color: var(--green-line); }
.compare-bad p, .compare-bad li, .compare-good p, .compare-good li { color: var(--text); }
/* ---------------------------------------------------------------------------
13 步骤 .steps
--------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); counter-reset: step; }
.step-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--sp-4);
padding: var(--sp-4);
border-radius: var(--radius-sm);
}
.step-num {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
border-radius: var(--radius-pill);
background: var(--accent-bg);
border: 1px solid var(--accent-line);
color: var(--accent);
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.step-content { min-width: 0; }
.step-content .step-title {
display: block;
font-family: var(--font-display);
font-size: 15.5px;
font-weight: 650;
color: var(--text);
margin-bottom: var(--sp-2);
}
.step-content p { font-size: 15px; color: var(--text-dim); margin-bottom: var(--sp-3); }
.step-content p:last-child { margin-bottom: 0; }
.step-content pre { margin-bottom: var(--sp-3); }
/* ---------------------------------------------------------------------------
14 流程 .flow-diagram
--------------------------------------------------------------------------- */
.flow-diagram {
margin: 0 0 var(--sp-4);
padding: var(--sp-4);
border-radius: var(--radius-sm);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1);
}
.flow-steps {
display: flex;
align-items: stretch;
gap: var(--sp-2);
overflow-x: auto;
overscroll-behavior-x: contain;
padding-bottom: var(--sp-1);
scrollbar-width: thin;
}
.flow-step {
flex: none;
display: grid;
gap: var(--sp-1);
min-width: 132px;
padding: var(--sp-3);
border-radius: var(--radius-xs);
box-shadow: none;
}
.flow-step .step-cmd {
display: block;
font-family: var(--mono);
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
white-space: nowrap;
}
.flow-step .step-name {
display: block;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
}
.flow-arrow {
flex: none;
display: flex;
align-items: center;
color: var(--text-muted);
opacity: .5;
font-size: 14px;
user-select: none;
}
/* ---------------------------------------------------------------------------
15 KPI
--------------------------------------------------------------------------- */
.kpi {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-6);
padding: var(--sp-4) var(--sp-5);
margin: 0 0 var(--sp-4);
border-radius: var(--radius-sm);
}
.kpi div { display: grid; gap: 2px; }
.kpi b {
display: block;
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.kpi span {
display: block;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
}
/* ---------------------------------------------------------------------------
16 问答 .qa
--------------------------------------------------------------------------- */
.qa {
padding: var(--sp-4);
margin: 0 0 var(--sp-3);
border-radius: var(--radius-sm);
}
.qa .q {
display: block;
font-family: var(--font-display);
font-size: 15.5px;
font-weight: 650;
line-height: 1.55;
color: var(--text);
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--hairline);
text-wrap: pretty;
}
.qa .q::before { content: "Q "; font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .06em; }
.qa .a { font-size: 15px; line-height: 1.8; color: var(--text-dim); }
.qa .a p { font-size: 15px; color: var(--text-dim); margin-bottom: var(--sp-3); }
.qa .a p:last-child { margin-bottom: 0; }
.qa .a strong { color: var(--text); }
.qa .a pre { margin-bottom: var(--sp-3); }
/* ---------------------------------------------------------------------------
17 表格
--------------------------------------------------------------------------- */
.table-wrap {
margin: 0 0 var(--sp-4);
border-radius: var(--radius-sm);
overflow-x: auto;
overscroll-behavior-x: contain;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 14px;
line-height: 1.65;
}
th, td {
padding: 10px var(--sp-3);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--hairline);
/* 别用 anywhere：它会把单元格的**最小宽度**压到 1 个字符，于是内容一长，别的列
就被挤成一字一行（全仓有 60 张表含长命令，踩过）。break-word 只在真正溢出时才断词，
不改变最小宽度。 */
overflow-wrap: break-word;
}
th {
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 650;
letter-spacing: .02em;
color: var(--text-muted);
background: var(--surface);
border-bottom-color: var(--border);
}
/* 表头**始终允许折行**。原来用 `@media (min-width: 768px) { th { nowrap } }` 是为了
免得长中文表头把表格撑宽——但 table-layout: fixed 已经从根上不按内容撑宽了，
那条 nowrap 在等宽列里只会让长表头**溢出到邻列**（全仓最长的表头约 526px，而 4 列
均分只有 306px），所以撤掉。 */
td { color: var(--text-dim); }
td strong { color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { tbody tr:hover td { background: var(--surface); } }
td code { color: var(--accent); }
/* ---------------------------------------------------------------------------
18 网格与日程式卡片
--------------------------------------------------------------------------- */
.grid2, .grid3 {
display: grid;
gap: var(--sp-3);
margin: 0 0 var(--sp-4);
}
.grid2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
/* 网格子项的自动最小尺寸默认是 `min-width: auto`——它**不能缩到比内容的最小宽度更窄**。
子项里装着 （内部有超长行）时，子项会被撑到 800px 甚至 1050px，整个网格跟着把
页面撑破（手机端实测：hermes 的 .compare-box 1049px、pi-coding-agent 的 .grid2 子项 801px）。
设计稿的 @layer od-layout 给 `.od-*` 原语加过同一条，但本仓的组件类名不是 .od-*，所以漏了。
置 0 之后子项缩到轨道宽度，格子里的 由自己的 overflow-x 横滚承接。
**不要**把 `.flow-steps` 加进来：它的子项有刻意的 `flex: none; min-width: 132px`，
那是横滚流程图的排版，置 0 会把它压扁。 */
.compare > *, .grid2 > *, .grid3 > *, .steps > * { min-width: 0; }
.day {
padding: var(--sp-4);
border-radius: var(--radius-sm);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1);
}
.day h4 {
display: block;
margin: 0 0 var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--hairline);
font-family: var(--mono);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent);
}
.day p, .day li { font-size: 14.5px; color: var(--text-dim); }
/* ---------------------------------------------------------------------------
19 首页：工具条 / 卡片列表 / 难度级别
--------------------------------------------------------------------------- */
/* 首页没有侧栏，容器宽度就是它自己的 1180，顶栏按这条外沿对齐 */
body.index { --shell-w: 1180px; }
body.index main {
margin-left: 0;
margin-inline: auto;
width: 100%;
max-width: 1180px;
padding-top: var(--sp-6);
padding-bottom: var(--sp-9);
}
body.index .top-nav .logo { font-size: 15.5px; }
body.index .top-nav .stats {
display: none;
margin-left: auto;
padding-right: var(--sp-2);
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: .03em;
color: var(--text-muted);
}
@media (min-width: 900px) { body.index .top-nav .stats { display: block; } }
/* Hero */
body.index .hero {
padding: var(--sp-7) 0 var(--sp-6);
margin-bottom: var(--sp-5);
border-bottom: 0;
}
body.index .hero h1 {
font-size: clamp(32px, 6vw, 54px);
letter-spacing: -.03em;
margin-bottom: var(--sp-4);
}
body.index .hero p { font-size: 17px; max-width: 58ch; }
body.index .hero code {
font-size: .84em;
background: var(--accent-bg);
border-color: var(--accent-line);
color: var(--accent);
padding: 2px 8px;
}
/* 工具条：吸在顶栏下方的一整块玻璃 */
.toolbar {
position: sticky;
top: calc(var(--nav-h) + var(--sp-3));
z-index: 60;
display: grid;
gap: var(--sp-3);
padding: var(--sp-3);
margin-bottom: var(--sp-5);
border-radius: var(--radius);
background: var(--glass-bg-2);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
}
.toolbar-row {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.search-field {
position: relative;
display: flex;
align-items: center;
gap: var(--sp-2);
flex: 1 1 240px;
min-width: 0;
height: 40px;
padding: 0 var(--sp-3);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
background: var(--surface);
transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear, background var(--t-fast) linear;
}
.search-field:focus-within {
border-color: var(--accent-line);
box-shadow: 0 0 0 3px var(--accent-bg);
background: var(--surface-2);
}
.search-field svg { display: block; flex: none; color: var(--text-muted); }
.search-field input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0;
background: none;
color: var(--text);
font: inherit;
font-size: 14.5px;
outline: none;
}
.search-field input::placeholder { color: var(--text-muted); }
.search-field kbd {
flex: none;
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
background: var(--surface-2);
font-family: var(--mono);
font-size: 11px;
color: var(--text-muted);
}
.search-field.has-value kbd { display: none; }
/* 筛选胶囊 */
.filter-rail {
display: flex;
align-items: center;
gap: var(--sp-2);
overflow-x: auto;
scrollbar-width: none;
padding-inline: 2px;
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.filter-rail::-webkit-scrollbar { display: none; }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
height: 34px;
padding: 0 var(--sp-3);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-dim);
font: inherit;
font-size: 13.5px;
font-weight: 550;
cursor: pointer;
white-space: nowrap;
transition: color var(--t-fast) linear, background var(--t-fast) linear,
border-color var(--t-fast) linear, transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
.chip:hover { color: var(--text); background: var(--surface-3); border-color: var(--border-strong); }
}
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] {
color: var(--accent);
background: var(--accent-bg);
border-color: var(--accent-line);
font-weight: 650;
}
.chip .chip-count {
font-family: var(--mono);
font-size: 11.5px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip-count { color: var(--accent); opacity: .75; }
/* 排序分段控件 */
.segmented {
display: inline-flex;
flex: none;
padding: 3px;
gap: 2px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
background: var(--surface);
margin-left: auto;
}
.segmented button {
border: 0;
border-radius: var(--radius-pill);
background: none;
color: var(--text-muted);
font: inherit;
font-size: 13px;
font-weight: 550;
padding: 5px 12px;
cursor: pointer;
white-space: nowrap;
transition: color var(--t-fast) linear, background var(--t-fast) linear;
}
@media (hover: hover) { .segmented button:hover { color: var(--text); } }
.segmented button[aria-pressed="true"] { color: var(--accent); background: var(--accent-bg); font-weight: 650; }
.result-count {
font-family: var(--mono);
font-size: 12.5px;
letter-spacing: .02em;
color: var(--text-muted);
margin-left: auto;
white-space: nowrap;
}
.result-count b { color: var(--text); font-weight: 600; }
/* 卡片列表 */
body.index .card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
gap: var(--sp-4);
/* 默认的 stretch：同一行的卡片等高。设计原稿写的是 `align-items: start`（各按内容高度），
于是同一行底边参差——实测有 175/200、226/175 这样的行。等高还要靠下面 .card-title /
.card-desc 的行数预留来消掉底部空带，两者缺一不可。 */
align-items: stretch;
}
body.index .card {
display: grid;
gap: var(--sp-3);
padding: var(--sp-5);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
min-width: 0;
transition: transform var(--t) var(--ease-out), border-color var(--t) linear,
box-shadow var(--t) linear, background var(--t) linear;
}
@media (hover: hover) {
body.index .card:hover {
transform: translateY(-3px);
border-color: var(--accent-line);
background: var(--glass-bg-2);
box-shadow: inset 0 1px 0 var(--glass-hi), var(--glow), var(--shadow-2);
}
}
body.index .card:active { transform: translateY(-1px); }
.card-meta {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.card-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 650;
line-height: 1.5;
letter-spacing: -.012em;
color: var(--text);
text-wrap: pretty;
/* 预留两行：标题长短不一会让同一行的卡片内容高度不齐，配合 .card-desc 的预留，
整页卡片才会长得一样。实测标题最多占 2 行（1 行 ×28 张 / 2 行 ×3 张）。 */
min-height: calc(2 * 1.5em);
}
@media (hover: hover) { body.index .card:hover .card-title { color: var(--accent-light); } }
.card-desc {
font-size: 14.5px;
line-height: 1.72;
color: var(--text-dim);
text-wrap: pretty;
/* 预留三行：实测简介占 2–3 行（1440/1280 视口下 2 行 ×16 张、3 行 ×15 张）。
用 min-height 而不是 line-clamp——宁可个别卡片略高，也不截断简介。 */
min-height: calc(3 * 1.72em);
}
.card-date {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .02em;
color: var(--text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.card-icon { display: none; }
/* 难度级别：颜色 + 文字 + 信号条，三重表意，不靠颜色单独传达 */
.card-tag,
.difficulty-easy,
.difficulty-medium,
.difficulty-hard {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
padding: 3px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface);
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
line-height: 1.5;
white-space: nowrap;
}
.card-tag svg, .difficulty-easy svg, .difficulty-medium svg, .difficulty-hard svg { display: block; flex: none; }
.difficulty-easy,
.card-tag.difficulty-easy {
color: var(--lv-easy); background: var(--lv-easy-bg); border-color: var(--lv-easy-line);
}
.difficulty-medium,
.card-tag.difficulty-medium {
color: var(--lv-medium); background: var(--lv-medium-bg); border-color: var(--lv-medium-line);
}
.difficulty-hard,
.card-tag.difficulty-hard {
color: var(--lv-hard); background: var(--lv-hard-bg); border-color: var(--lv-hard-line);
}
/* 文章 Hero 里的级别徽章：盖子 .hero .badge 的基础配色，让级别色生效 */
.hero .badge.difficulty-easy,
.hero .badge.difficulty-medium,
.hero .badge.difficulty-hard {
font-size: 12.5px;
padding: 4px 12px 4px 10px;
}
.hero .badge.difficulty-easy { color: var(--lv-easy); background: var(--lv-easy-bg); border-color: var(--lv-easy-line); }
.hero .badge.difficulty-medium { color: var(--lv-medium); background: var(--lv-medium-bg); border-color: var(--lv-medium-line); }
.hero .badge.difficulty-hard { color: var(--lv-hard); background: var(--lv-hard-bg); border-color: var(--lv-hard-line); }
/* 空状态 */
.empty-state {
display: grid;
justify-items: center;
gap: var(--sp-3);
padding: var(--sp-9) var(--sp-5);
text-align: center;
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
background: var(--surface);
}
.empty-state svg { color: var(--text-muted); opacity: .7; }
.empty-state .empty-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 650;
color: var(--text);
}
.empty-state .empty-hint { font-size: 14px; color: var(--text-muted); max-width: 40ch; }
.empty-state button {
height: 36px;
padding: 0 var(--sp-4);
border: 1px solid var(--accent-line);
border-radius: var(--radius-pill);
background: var(--accent-bg);
color: var(--accent);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
/* 筛选进行中的卡片入场 */
@keyframes card-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.card.is-entering { animation: card-in 260ms var(--ease-out) both; animation-delay: var(--stagger, 0ms); }
/* ---------------------------------------------------------------------------
20 Skill 明细（兼容旧页面：humanlayer / mattpocock / ecc 等）
--------------------------------------------------------------------------- */
.skill-detail {
margin: 0 0 var(--sp-3);
padding: var(--sp-4);
border-radius: var(--radius-sm);
font-size: 15px;
line-height: 1.75;
}
.skill-detail .skill-header {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--hairline);
}
.skill-detail .skill-cmd {
font-family: var(--mono);
font-size: 13px;
font-weight: 600;
color: var(--accent);
background: var(--accent-bg);
border: 1px solid var(--accent-line);
border-radius: var(--radius-xs);
padding: 2px 8px;
white-space: nowrap;
}
.skill-detail .skill-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-left: auto; }
.skill-detail .skill-name {
font-family: var(--font-display);
font-size: 16px;
font-weight: 650;
color: var(--text);
}
.skill-detail .skill-type {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .04em;
padding: 2px 8px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
color: var(--text-muted);
white-space: nowrap;
}
.skill-detail .skill-type.type-user { color: var(--blue); background: var(--blue-bg); border-color: var(--blue-line); }
.skill-detail .skill-type.type-model { color: var(--purple); background: var(--purple-bg); border-color: var(--border); }
.skill-detail .skill-desc { font-size: 15px; color: var(--text-dim); margin-bottom: var(--sp-3); }
.skill-detail .skill-section { margin-top: var(--sp-3); }
.skill-detail .skill-section-title {
display: block;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--sp-2);
}
.skill-detail .skill-section li { font-size: 14.5px; color: var(--text-dim); }
/* ---------------------------------------------------------------------------
21 页脚与浮动控件
--------------------------------------------------------------------------- */
footer {
margin-top: var(--sp-8);
padding: var(--sp-5) 0 var(--sp-2);
border-top: 1px solid var(--hairline);
font-size: 13px;
line-height: 1.8;
color: var(--text-muted);
}
footer p { font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-2); }
footer code {
font-size: .88em;
background: var(--accent-bg);
border-color: var(--accent-line);
color: var(--accent);
padding: 1px 6px;
}
footer a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border); }
@media (hover: hover) { footer a:hover { color: var(--accent); border-bottom-color: var(--accent-line); } }
body.index footer {
max-width: 1180px;
margin-inline: auto;
width: 100%;
padding-inline: var(--sp-6);
padding-top: var(--sp-6);
text-align: center;
}
/* 返回主页 */
.back-home {
position: fixed;
right: var(--sp-5);
bottom: var(--sp-5);
z-index: 70;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
width: 44px;
height: 44px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
background: var(--glass-bg-2);
-webkit-backdrop-filter: blur(18px) saturate(170%);
backdrop-filter: blur(18px) saturate(170%);
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-1);
transition: color var(--t-fast) linear, border-color var(--t-fast) linear,
transform var(--t) var(--ease-out), box-shadow var(--t) linear;
}
@media (min-width: 640px) {
.back-home { width: auto; padding: 0 var(--sp-4); height: 42px; }
.back-home .back-home-label { display: inline; }
}
.back-home .back-home-label { display: none; }
@media (hover: hover) {
.back-home:hover {
color: var(--accent);
border-color: var(--accent-line);
transform: translateY(-2px);
box-shadow: var(--glow), var(--shadow-2);
}
}
/* 回到顶部 */
.to-top {
position: fixed;
right: var(--sp-5);
bottom: calc(var(--sp-5) + 56px);
z-index: 70;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
background: var(--glass-bg-2);
-webkit-backdrop-filter: blur(18px) saturate(170%);
backdrop-filter: blur(18px) saturate(170%);
color: var(--text-dim);
cursor: pointer;
box-shadow: var(--shadow-1);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--t) linear, visibility var(--t) linear,
transform var(--t) var(--ease-out), color var(--t-fast) linear,
border-color var(--t-fast) linear;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .to-top:hover { color: var(--accent); border-color: var(--accent-line); } }
/* ---------------------------------------------------------------------------
22 响应式 —— 375 / 768 / 1024 / 1440，重排内容而不是整体缩放
--------------------------------------------------------------------------- */
@media (max-width: 1023px) {
.main {
margin-left: 0;
padding: var(--sp-6) var(--sp-5) var(--sp-8);
max-width: 100%;
}
.sidebar { padding-top: var(--sp-5); }
body.index main { padding-inline: var(--sp-5); }
}
@media (max-width: 768px) {
:root { --nav-h: 56px; }
body { font-size: 16px; }
.main { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
body.index main { padding-inline: var(--sp-4); }
body.index footer { padding-inline: var(--sp-4); }
.hero { padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); }
.hero p { font-size: 16px; }
section { margin-bottom: var(--sp-7); }
h2 { margin-top: var(--sp-7); }
.hero .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero .stat { padding: var(--sp-3); }
.toolbar { top: calc(var(--nav-h) + var(--sp-2)); }
.segmented { margin-left: 0; }
.result-count { margin-left: auto; }
.compare { grid-template-columns: 1fr; }
.grid2, .grid3 { grid-template-columns: 1fr; }
.table-wrap { margin-inline: calc(var(--sp-1) * -1); }
.back-home { right: var(--sp-4); bottom: var(--sp-4); }
.to-top { right: calc(var(--sp-4) + 52px); bottom: var(--sp-4); }
}
@media (max-width: 640px) {
.top-nav { padding: 0 var(--sp-4); gap: var(--sp-3); }
.top-nav .logo { font-size: 14.5px; }
.hero h1 { font-size: clamp(26px, 7vw, 32px); }
body.index .hero { padding-top: var(--sp-6); }
body.index .hero h1 { font-size: clamp(30px, 9vw, 40px); }
body.index .hero p { font-size: 16px; }
body.index .card-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
body.index .card { padding: var(--sp-4); }
.card-title { font-size: 16.5px; }
.card-desc { font-size: 14px; }
.toolbar { padding: var(--sp-2); gap: var(--sp-2); }
.kpi { gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) var(--sp-4); }
.kpi b { font-size: 19px; }
.box { padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); font-size: 14.5px; }
.box p { font-size: 14.5px; }
.qa { padding: var(--sp-3); }
.qa .a, .qa .a p { font-size: 14.5px; }
table { font-size: 13.5px; }
th, td { padding: 8px var(--sp-2); }
pre { padding: var(--sp-3); margin-bottom: var(--sp-3); }
pre code { font-size: 12.5px; }
.flow-step { min-width: 116px; }
body.index footer { padding-inline: var(--sp-4); }
.empty-state { padding: var(--sp-7) var(--sp-4); }
}
/* 宽屏：内容仍然收窄，让阅读行长稳定 */
@media (min-width: 1440px) {
.main { padding-top: var(--sp-8); }
}
/* ---------------------------------------------------------------------------
22b 大屏居中：侧栏与正文作为一个整体在视口里居中，而不是贴着左边
窄屏（<1024px）侧栏是抽屉、正文通栏，完全不受这里影响。
--------------------------------------------------------------------------- */
@media (min-width: 1024px) {
:root {
/* 顶栏浮动后，内容避让高度 = 上间隙 + 条高 + 下间隙 */
--nav-h: calc(var(--nav-gap) + var(--nav-bar) + var(--sp-3));
/* 正文栏左沿 = 容器左外沿 + 侧栏宽 */
--main-x: max(var(--sidebar-w),
calc((100% - var(--layout-w)) / 2 + var(--sidebar-w)));
}
/* 顶栏：与居中容器同宽、脱离视口顶边的浮动玻璃条 */
.top-nav,
.top-nav.is-scrolled {
top: var(--nav-gap);
left: max(var(--sp-3), calc((100% - var(--shell-w)) / 2));
right: max(var(--sp-3), calc((100% - var(--shell-w)) / 2));
height: var(--nav-bar);
padding-inline: var(--sp-4);
border: 1px solid var(--glass-border);
border-radius: var(--radius-pill);
box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-2);
}
/* 侧栏跟着整体右移同样的距离 */
body:not(.index) .sidebar {
left: max(0px, calc((100% - var(--layout-w)) / 2));
}
/* 正文与页脚：起点 = 正文栏左沿，宽度 = 阅读栏宽 + 两侧留白 */
body:not(.index) .main,
body:not(.index) > footer {
margin-left: var(--main-x);
margin-right: auto;
max-width: calc(var(--content-max) + var(--gutter) * 2);
}
body:not(.index) > footer {
padding-inline: var(--gutter);
}
/* 右下角的两个浮动控件也对齐到正文栏右沿，不留在视口最边上 */
body:not(.index) .back-home,
body:not(.index) .to-top {
right: max(var(--sp-4), calc((100% - var(--layout-w)) / 2 + var(--gutter)));
}
/* 阅读进度条：与正文栏同起点同宽度，不再是通栏 */
body:not(.index) .read-progress {
left: calc(var(--main-x) + var(--gutter));
width: min(var(--content-max),
calc(100% - var(--main-x) - var(--gutter) * 2));
border-radius: var(--radius-pill);
overflow: hidden;
}
}
/* ---------------------------------------------------------------------------
23 动效与可访问性收尾
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.card.is-entering { animation: none; }
}
/* 高对比度偏好：发丝边框加粗一档，避免玻璃panel糊在一起 */
@media (prefers-contrast: more) {
:root { --glass-border: rgba(255, 255, 255, .30); --hairline: rgba(255, 255, 255, .22); }
:root[data-theme="light"] { --glass-border: rgba(17, 26, 46, .34); --hairline: rgba(17, 26, 46, .24); }
}