/* ================================================================
   Agent Harness 专题页 — 终端手册风
   与全站绿色「速查」体系区分：本页强调色走暖橙（--hn-accent）
   复用 common.css / pages.css 的主题变量与 .pg-* 组件
   ================================================================ */

/* 变量同时挂在 body.page-dsh 与内容列 .hn-page 上：
   侧栏 .sidebar 是 .hn-page 的兄弟节点，只挂 .hn-page 会让侧栏部件取不到变量 */
.page-dsh,
.hn-page {
    --hn-accent: #e07b39;
    --hn-accent-dark: #b85f24;
    --hn-accent-soft: rgba(224, 123, 57, 0.12);
    --hn-ink: #16201a;
    --hn-ink-soft: #3a4a3f;
    --hn-mono: var(--font-mono);
}

/* 页面底色微调：给长文阅读一点纸张感 */
.hn-page > .pg-masthead,
.hn-page .hn-section,
.hn-page .hn-terminal {
    position: relative;
}

/* ---------- 头图增强：终端网格 + 暖橙光晕 ---------- */
.hn-masthead {
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(224, 123, 57, 0.18), transparent 55%),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 253, 250, 0.86) 55%,
            rgba(252, 245, 238, 0.92) 100%);
}

.hn-masthead::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(224, 123, 57, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 123, 57, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(120deg, transparent 42%, #000 100%);
            mask-image: linear-gradient(120deg, transparent 42%, #000 100%);
    pointer-events: none;
}

.hn-masthead .pg-masthead-inner {
    position: relative;
    z-index: 2;
}

.hn-masthead .pg-overline {
    color: var(--hn-accent-dark);
    font-family: var(--hn-mono);
    letter-spacing: 0.16em;
}

.hn-masthead .pg-overline-dot {
    background: var(--hn-accent);
    box-shadow: 0 0 0 4px rgba(224, 123, 57, 0.16);
    animation: hnPulse 2.6s ease-in-out infinite;
}

@keyframes hnPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(224, 123, 57, 0.16); }
    50%      { box-shadow: 0 0 0 8px rgba(224, 123, 57, 0.06); }
}

.hn-masthead .pg-title-accent {
    color: var(--hn-accent);
}

.hn-masthead .pg-chip b { color: var(--hn-accent); }

.hn-masthead .pg-chip {
    border-color: rgba(224, 123, 57, 0.22);
}

.hn-masthead .pg-chip:hover {
    border-color: rgba(224, 123, 57, 0.48);
}

.hn-masthead .pg-masthead-bar {
    background: linear-gradient(90deg, var(--hn-accent-dark), var(--hn-accent) 30%, #f2a76f 60%, var(--hn-accent-dark) 82%, transparent);
    height: 4px;
}

/* 头图左侧「终端提示符」装饰条，强化工具手册气质 */
.hn-masthead::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: repeating-linear-gradient(
        180deg,
        var(--hn-accent) 0 10px,
        rgba(224, 123, 57, 0.28) 10px 20px);
}

.hn-masthead .pg-masthead-glyph {
    color: rgba(224, 123, 57, 0.15);
    font-weight: 700;
}

/* 章节标题：编号等宽 + 下划线，读起来像工程手册目录 */
.hn-section > .pg-section-head .pg-section-num {
    color: var(--hn-accent);
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* 标题下的短渐变下划线：独立于标题 flex 布局，避免被当成行内项并排 */
.hn-section > .pg-section-head {
    position: relative;
    padding-bottom: var(--space-12);
    border-bottom: 1px solid rgba(224, 123, 57, 0.14);
}

.hn-section > .pg-section-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    border-radius: var(--radius-2);
    background: linear-gradient(90deg, var(--hn-accent), #f2b985);
}

.hn-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin-top: var(--space-24);
}

.hn-hero-actions .pg-btn {
    background: linear-gradient(135deg, #e8853f, #c86520);
    box-shadow: 0 5px 16px rgba(224, 123, 57, 0.34);
}

.hn-hero-actions .pg-btn:hover {
    background: linear-gradient(135deg, #d9782f, #a95417);
    box-shadow: 0 10px 24px rgba(224, 123, 57, 0.40);
}

.hn-hero-actions .pg-btn-outline {
    background: rgba(255, 255, 255, 0.86);
    color: var(--hn-accent-dark);
    border-color: rgba(224, 123, 57, 0.36);
    box-shadow: none;
}

.hn-hero-actions .pg-btn-outline:hover {
    background: #fdf5ef;
    color: var(--hn-accent-dark);
}

/* ---------- 终端示意窗 ---------- */
.hn-terminal {
    margin-top: var(--space-24);
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.22);
    background: #101a14;
    box-shadow: 0 18px 40px rgba(18, 32, 24, 0.22);
    overflow: hidden;
}

.hn-terminal-bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-16);
    background: #16241c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hn-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
}

.hn-dot--r { background: #ff5f57; }
.hn-dot--y { background: #febc2e; }
.hn-dot--g { background: #28c840; }

.hn-terminal-title {
    margin-left: var(--space-8);
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hn-terminal-body {
    padding: var(--space-20) var(--space-20) var(--space-6);
    font-family: var(--hn-mono);
    font-size: var(--fs-13);
    line-height: 2.05;
}

.hn-line { color: #d7e8dd; }

.hn-prompt {
    color: #7ddc9b;
    font-weight: 700;
}

.hn-cmd { color: #ffd479; }
.hn-arg { color: #9fe4c2; }

.hn-out {
    color: rgba(215, 232, 221, 0.78);
    padding-left: var(--space-16);
}

.hn-out--ok { color: #86e6a8; }

.hn-tag {
    display: inline-block;
    min-width: 46px;
    margin-right: var(--space-10);
    padding: 0 8px;
    border-radius: var(--radius-6);
    font-size: var(--fs-11);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.04em;
}

.hn-tag--think { background: rgba(147, 51, 234, 0.22); color: #cfa6f5; }
.hn-tag--tool  { background: rgba(59, 130, 246, 0.22); color: #9ec7fb; }
.hn-tag--ok    { background: rgba(40, 200, 64, 0.20);  color: #8ce9a4; }

.hn-terminal-note {
    padding: var(--space-12) var(--space-20) var(--space-20);
    margin-top: var(--space-4);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: rgba(215, 232, 221, 0.72);
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
}

.hn-terminal-note b { color: #ffd479; }

/* ---------- 章节壳：顶部暖橙光带 ---------- */
.hn-section {
    position: relative;
    margin-top: var(--space-48);
    padding: var(--space-28) var(--space-24);
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 252, 248, 0.82));
    box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-height) + 20px);
    overflow: hidden;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.hn-section::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hn-accent), #f2b985 45%, transparent 92%);
    opacity: 0.5;
    transition: opacity var(--transition-normal);
}

.hn-section:hover {
    border-color: rgba(224, 123, 57, 0.26);
    box-shadow: 0 14px 34px rgba(224, 123, 57, 0.10);
}

.hn-section:hover::before { opacity: 1; }

.hn-section .pg-section-head { margin-bottom: var(--space-24); }

.hn-subtitle {
    margin: 28px 0 14px;
    padding-left: var(--space-12);
    border-left: 3px solid var(--hn-accent);
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-paragraph { margin-bottom: var(--space-16);
    font-size: var(--fs-14);
    line-height: 2;
    color: var(--text-secondary);
}

.hn-paragraph b { color: var(--hn-ink); }

/* ---------- 类比三卡 ---------- */
.hn-analogy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    margin-bottom: var(--space-24);
}

.hn-analogy-item {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hn-analogy-item:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.30);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}

.hn-analogy-item--accent {
    border-color: rgba(224, 123, 57, 0.34);
    background: linear-gradient(150deg, rgba(224, 123, 57, 0.10), rgba(255, 255, 255, 0.88));
}

.hn-analogy-item--accent:hover {
    border-color: rgba(224, 123, 57, 0.55);
    box-shadow: 0 14px 30px rgba(224, 123, 57, 0.18);
}

.hn-analogy-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-12);
    border-radius: var(--radius-12);
    font-size: var(--fs-24);
    background: linear-gradient(150deg, rgba(93, 151, 67, 0.15), rgba(93, 151, 67, 0.05));
    border: 1px solid rgba(93, 151, 67, 0.18);
}

.hn-analogy-item--accent .hn-analogy-icon {
    background: linear-gradient(150deg, rgba(224, 123, 57, 0.20), rgba(224, 123, 57, 0.06));
    border-color: rgba(224, 123, 57, 0.28);
}

.hn-analogy-item h4 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-analogy-item p {
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

/* ---------- 表格 ---------- */
.hn-table-wrap {
    overflow-x: auto; margin-bottom: var(--space-20);
    border-radius: var(--radius-12);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.80);
}

.hn-table {
    width: 100%;
    /* 三列均为长文本，窄容器走横向滚动，保持单元格可读 */
    min-width: 680px;
    border-collapse: collapse;
    font-size: var(--fs-13);
}

.hn-table th {
    padding: var(--space-12) var(--space-16);
    background: linear-gradient(180deg, rgba(224, 123, 57, 0.10), rgba(224, 123, 57, 0.04));
    border-bottom: 2px solid rgba(224, 123, 57, 0.20);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--hn-accent-dark);
    text-align: left;
    white-space: nowrap;
}

.hn-table td {
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    line-height: var(--lh-base);
    vertical-align: top;
}

.hn-table tbody tr { transition: background-color var(--transition-fast); }
.hn-table tbody tr:hover { background: rgba(224, 123, 57, 0.05); }
.hn-table tbody tr:last-child td { border-bottom: none; }

.hn-badge {
    display: inline-block;
    margin-left: var(--space-6);
    padding: 1px var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--fs-11);
    font-weight: 700;
    vertical-align: 1px;
}

.hn-badge--green  { background: rgba(93, 151, 67, 0.13);  color: #48762f; }
.hn-badge--blue   { background: rgba(59, 130, 246, 0.12); color: #2f66d0; }
.hn-badge--orange { background: rgba(224, 123, 57, 0.15); color: var(--hn-accent-dark); }

/* ---------- 提示块 ---------- */
.hn-callout {
    display: flex; gap: var(--space-12);
    padding: var(--space-16) var(--space-20);
    margin: 20px 0 4px;
    border-radius: var(--radius-12);
    border: 1px solid rgba(93, 151, 67, 0.18);
    background: rgba(93, 151, 67, 0.06);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

.hn-callout b { display: block; margin-bottom: var(--space-4); color: var(--text-primary); font-size: var(--fs-14); }
.hn-callout p { margin: 0; }
.hn-callout-icon { flex: none; font-size: var(--fs-20); line-height: var(--lh-tight); }

.hn-callout--tip {
    border-color: rgba(93, 151, 67, 0.26);
    background: rgba(93, 151, 67, 0.07);
}

.hn-callout--warn {
    border-color: rgba(217, 164, 6, 0.28);
    background: rgba(217, 164, 6, 0.07);
}

.hn-callout--danger {
    border-color: rgba(224, 123, 57, 0.30);
    background: rgba(224, 123, 57, 0.08);
}









/* ---------- 代码 ---------- */
.hn-code {
    display: inline;
    padding: 1px var(--space-6);
    border-radius: var(--radius-6);
    border: 1px solid rgba(224, 123, 57, 0.16);
    background: rgba(224, 123, 57, 0.09);
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    color: #a8551b;
    word-break: break-all;
}

.hn-code-block {
    margin: 0;
    padding: var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f7faf4;
    overflow-x: auto;
}

.hn-code-block code {
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: #3d4f38;
    white-space: pre;
    display: block;
}

.hn-code-block--prompt {
    border-color: rgba(224, 123, 57, 0.24);
    background: linear-gradient(150deg, #fdf7f1, #fbf3ea);
}

.hn-code-block--prompt code { color: #7a4720; }

/* ---------- 四要素迷你卡 ---------- */
.hn-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-16);
}

.hn-mini {
    padding: var(--space-20) var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.80);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hn-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(93, 151, 67, 0.14);
}

.hn-mini > span { display: block; margin-bottom: var(--space-8); font-size: var(--fs-22); }

.hn-mini h5 {
    margin-bottom: var(--space-6);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-mini p {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}

/* ---------- 任务模板 ---------- */
.hn-prompt {
    margin-top: var(--space-24);
    border-radius: var(--radius-8);
    border: 1px dashed rgba(224, 123, 57, 0.34);
    background: rgba(255, 253, 250, 0.9);
    overflow: hidden;
}

.hn-prompt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px dashed rgba(224, 123, 57, 0.26);
    background: rgba(224, 123, 57, 0.07);
}

.hn-prompt-label {
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--hn-accent-dark);
}

.hn-prompt-hint { font-size: var(--fs-12); color: var(--text-muted); }

.hn-prompt .hn-code-block {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ---------- 命令速记 ---------- */
.hn-cmd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
}

.hn-cmd-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-12);
    border: 1px solid rgba(93, 151, 67, 0.13);
    background: rgba(255, 255, 255, 0.84);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hn-cmd-card:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 123, 57, 0.34);
    box-shadow: 0 10px 22px rgba(224, 123, 57, 0.13);
}

.hn-cmd-card code {
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--hn-accent-dark);
    word-break: break-all;
}

.hn-cmd-card span {
    font-size: var(--fs-12);
    color: var(--text-muted);
}

/* ---------- 技能流程 ---------- */
.hn-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-16); margin-bottom: var(--space-16);
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.20);
    background: rgba(224, 123, 57, 0.05);
}

.hn-flow-node {
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(224, 123, 57, 0.26);
    background: #fff;
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--hn-accent-dark);
}

.hn-flow-node--accent {
    background: linear-gradient(135deg, #e8853f, #c2631f);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(224, 123, 57, 0.28);
}

.hn-flow-arrow {
    color: rgba(224, 123, 57, 0.65);
    font-weight: 700;
}

.hn-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
    margin-top: var(--space-20);
}

.hn-advice {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.18);
    background: rgba(93, 151, 67, 0.06);
}

.hn-advice--no {
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(220, 38, 38, 0.045);
}

.hn-advice h5 {
    margin-bottom: var(--space-10);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-advice ul {
    margin: 0; padding-left: var(--space-16);
    list-style: disc;
}

.hn-advice li {
    margin-bottom: var(--space-8);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

.hn-advice li:last-child { margin-bottom: 0; }

/* ---------- 技能专题跳转卡 ---------- */
.hn-cross-link {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-top: var(--space-24);
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.30);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(224, 123, 57, 0.16), transparent 58%),
        rgba(255, 252, 249, 0.94);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hn-cross-link:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 123, 57, 0.55);
    box-shadow: 0 16px 34px rgba(224, 123, 57, 0.16);
}

.hn-cross-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-16);
    font-size: var(--fs-26);
    background: linear-gradient(150deg, rgba(224, 123, 57, 0.18), rgba(224, 123, 57, 0.05));
    border: 1px solid rgba(224, 123, 57, 0.24);
}

.hn-cross-body { flex: 1; min-width: 0; }

.hn-cross-body b {
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-cross-body span {
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}

/* ---------- 技巧卡 ---------- */
.hn-tips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
}

.hn-tip {
    position: relative; padding: var(--space-20) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hn-tip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--hn-accent), rgba(224, 123, 57, 0.10));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hn-tip:hover {
    transform: translateY(-5px);
    border-color: rgba(224, 123, 57, 0.30);
    box-shadow: 0 16px 34px rgba(224, 123, 57, 0.14);
}

.hn-tip:hover::before { transform: scaleY(1); }

.hn-tip-no {
    display: inline-block;
    margin-bottom: var(--space-10);
    font-family: var(--hn-mono);
    font-size: var(--fs-20);
    font-weight: 700;
    line-height: 1;
    color: rgba(224, 123, 57, 0.34);
    letter-spacing: 0.02em;
}

.hn-tip h4 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-tip p {
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

/* ---------- 收尾速查 + CTA ---------- */
.hn-recap { margin-top: var(--space-24); padding: var(--space-24) var(--space-24) var(--space-20) ;
    border-radius: var(--radius-8);
    border: 1px solid var(--hn-ink);
    background: #14201a;
    color: #d7e8dd;
}

.hn-recap h3 {
    margin-bottom: var(--space-16);
    font-family: var(--hn-mono);
    font-size: var(--fs-14);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffd479;
}

.hn-recap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); gap: var(--space-12);
}

.hn-recap-grid > div {
    padding: var(--space-12);
    border-radius: var(--radius-8);
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.035);
}

.hn-recap-grid b {
    display: inline-block;
    min-width: 26px;
    margin-right: var(--space-8);
    color: #7ddc9b;
    font-family: var(--hn-mono);
}

.hn-recap-grid span {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: rgba(215, 232, 221, 0.82);
}

.hn-cta {
    position: relative; margin-top: var(--space-24); padding: var(--space-40) 36px;
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.34);
    background:
        radial-gradient(circle at 90% 16%, rgba(224, 123, 57, 0.24), transparent 55%),
        linear-gradient(135deg, rgba(224, 123, 57, 0.12), rgba(255, 255, 255, 0.90) 62%);
    overflow: hidden;
}

.hn-cta-glyph {
    position: absolute;
    right: var(--space-16);
    bottom: -30px;
    font-family: var(--font-display);
    font-size: 168px;
    line-height: 1;
    color: rgba(224, 123, 57, 0.10);
    pointer-events: none;
}

.hn-cta h2 {
    position: relative;
    margin-bottom: var(--space-10);
    font-family: var(--font-display);
    font-size: var(--fs-24);
    font-weight: 400;
    color: var(--text-primary);
}

.hn-cta p {
    position: relative;
    max-width: 640px;
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1199px) {
    .hn-grid-4,
    .hn-cmd-grid{ grid-template-columns: repeat(2, 1fr); }
    .hn-tips { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .hn-analogy { grid-template-columns: 1fr; }
    .hn-recap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .hn-section { padding: var(--space-20) var(--space-16); }
    .hn-grid-4,
    .hn-cmd-grid,
    .hn-grid-2,
    .hn-tips,
    .hn-recap-grid{ grid-template-columns: 1fr; }
    .hn-terminal-body { font-size: var(--fs-12); padding: var(--space-16) var(--space-12) var(--space-4); }
    .hn-terminal-note { padding: var(--space-12) var(--space-16) var(--space-16); }
    .hn-cta { padding: var(--space-28) var(--space-20); }
    .hn-cross-link { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   以下为第二版新增组件与视觉强化（终端手册风 → 工程蓝图层）
   新增：claim 主张卡 / seam 三角色图 / install 卡片 / 目录树 /
        fiber 状态机 / 插件流程 / safety 对卡 / preset 行 /
        flagship 能力卡 / donts 清单 / 打字机光标 / 扫描线
   ================================================================ */

/* ---------- 头图升级：扫描线 + 打字机光标 ---------- */
.hn-masthead::after {
    background-image:
        linear-gradient(rgba(224, 123, 57, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 123, 57, 0.07) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* 终端扫描线：缓慢下移的一条暖橙细线，暗示「终端正在跑」 */
.hn-masthead-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 90px;
    background: linear-gradient(180deg, transparent, rgba(224, 123, 57, 0.10) 60%, transparent);
    animation: hnScan 6.5s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes hnScan {
    0%   { transform: translateY(-120px); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(360px); opacity: 0; }
}

/* 标题里的代码内联块：命令感 */
.hn-masthead .pg-lede .hn-code {
    background: rgba(224, 123, 57, 0.13);
    color: var(--hn-accent-dark);
}

/* 打字机光标（纯 CSS，跟随代码块末尾闪烁） */
.hn-masthead .pg-typing {
    position: relative;
    font-family: var(--hn-mono);
    font-size: 0.94em;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-6);
    background: rgba(224, 123, 57, 0.12);
    color: var(--hn-accent-dark);
    white-space: nowrap;
}

.hn-masthead .pg-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 0.95em;
    margin-left: var(--space-4);
    vertical-align: -0.12em;
    background: var(--hn-accent);
    animation: hnCaret 1.05s steps(1) infinite;
}

@keyframes hnCaret {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---------- 终端窗：加顶部渐变边 + 行错峰入场 ---------- */
.hn-terminal {
    border-top: 2px solid rgba(224, 123, 57, 0.42);
    box-shadow: 0 18px 44px rgba(22, 32, 26, 0.16), 0 2px 8px rgba(22, 32, 26, 0.08);
}

.hn-terminal-badge {
    margin-left: auto;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(224, 123, 57, 0.34);
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    font-weight: 700;
    color: #ffd7b4;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.hn-terminal-body .hn-line,
.hn-terminal-body .hn-out {
    animation: hnLineIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hn-terminal-body .hn-line      { animation-delay: 0.10s; }
.hn-terminal-body .hn-out:nth-child(2) { animation-delay: 0.28s; }
.hn-terminal-body .hn-out:nth-child(3) { animation-delay: 0.46s; }
.hn-terminal-body .hn-out:nth-child(4) { animation-delay: 0.64s; }
.hn-terminal-body .hn-out:nth-child(5) { animation-delay: 0.82s; }
.hn-terminal-body .hn-out:nth-child(6) { animation-delay: 1.00s; }
.hn-terminal-body .hn-out:nth-child(7) { animation-delay: 1.18s; }

@keyframes hnLineIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hn-tag--ask {
    background: rgba(224, 123, 57, 0.2);
    color: #ffc38c;
}

.hn-dim { color: #6f8478; }

/* ---------- 通用：小标题升级（左侧短竖线 + 渐隐底线） ---------- */
.hn-section .hn-subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin: 30px 0 14px; padding-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px dashed rgba(224, 123, 57, 0.26);
}

.hn-section .hn-subtitle::before {
    content: '';
    width: 4px;
    height: 15px;
    border-radius: var(--radius-2);
    background: linear-gradient(180deg, #f2b985, var(--hn-accent));
}

.hn-subtitle::-webkit-details-marker { display: none; }

.hn-para-note {
    margin: 12px 0 0; padding-left: var(--space-12);
    border-left: 3px solid rgba(224, 123, 57, 0.3);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

.hn-para-note b { color: var(--hn-accent-dark); }

/* ---------- 02 主张卡：编号大字 + 左侧强调条 + 悬停位移 ---------- */
.hn-claims {
    display: grid;
    gap: var(--space-16);
}

.hn-claim {
    position: relative;
    padding: var(--space-20) var(--space-24) var(--space-20) var(--space-28);
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.18);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(224, 123, 57, 0.09), transparent 58%),
        rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hn-claim::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hn-accent), #f2b985);
    transform: scaleY(0.35);
    transform-origin: top center;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.hn-claim:hover {
    transform: translateX(5px);
    border-color: rgba(224, 123, 57, 0.42);
    box-shadow: 0 14px 32px rgba(224, 123, 57, 0.14);
}

.hn-claim:hover::before { transform: scaleY(1); }

.hn-claim-no {
    display: inline-block; margin-bottom: var(--space-6);
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--hn-accent);
}

.hn-claim h3 { margin-bottom: var(--space-8);
    font-size: var(--fs-16);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-claim p {
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

/* 该元素是 .hn-claim 内的 <p>：.hn-claim p 比 .hn-claim-meta 多一个类型选择器，
   字体与颜色只能靠 !important 压过 */
.hn-claim-meta { margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px dashed rgba(224, 123, 57, 0.2);
    font-size: var(--fs-12) !important;
    color: var(--text-muted) !important;
}

.hn-claim-meta b { color: var(--hn-accent-dark); }

/* ---------- 02 seam 三角色图 ---------- */
.hn-seam-graph {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-20) var(--space-16);
    border-radius: var(--radius-8);
    border: 1px dashed rgba(224, 123, 57, 0.32);
    background: rgba(255, 253, 250, 0.86);
}

.hn-seam-node {
    position: relative; padding: var(--space-16) ;
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.2);
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hn-seam-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(224, 123, 57, 0.16);
}

.hn-seam-node--def  { border-top: 3px solid #e07b39; }
.hn-seam-node--prov { border-top: 3px solid #b85f24; background: rgba(255, 250, 244, 0.96); }
.hn-seam-node--cons { border-top: 3px solid #f2a76f; }

.hn-seam-badge {
    display: block; margin-bottom: var(--space-6);
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--hn-accent);
    text-transform: uppercase;
}

.hn-seam-node code {
    display: block; margin-bottom: var(--space-6);
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    font-weight: 700;
    color: var(--hn-ink);
    word-break: break-all;
}

.hn-seam-node p {
    font-size: var(--fs-12);
    line-height: 1.7;
    color: var(--text-muted);
}

.hn-seam-arrow {
    font-size: var(--fs-18);
    color: rgba(224, 123, 57, 0.7);
    animation: hnArrowPulse 2.2s ease-in-out infinite;
}

.hn-seam-arrow--b { animation-delay: 0.7s; }

@keyframes hnArrowPulse {
    0%, 100% { opacity: 0.42; transform: translateX(-2px); }
    50%      { opacity: 1;    transform: translateX(3px); }
}

.hn-seam-note { margin-top: var(--space-12);
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

.hn-seam-note b { color: var(--hn-accent-dark); }

/* ---------- 03 安装卡网格 ---------- */
.hn-install-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}

.hn-install-card {
    position: relative;
    display: flex;
    flex-direction: column; padding: var(--space-20) var(--space-20) var(--space-16) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.2);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.hn-install-card::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 123, 57, 0.13), transparent 68%);
    pointer-events: none;
}

.hn-install-card:hover {
    transform: translateY(-4px);
    border-color: rgba(224, 123, 57, 0.44);
    box-shadow: 0 16px 34px rgba(224, 123, 57, 0.14);
}

.hn-install-head {
    display: flex;
    align-items: center;
    gap: var(--space-10); margin-bottom: var(--space-8);
}

.hn-install-tag {
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--fs-11);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #e8853f, #c86520);
}

.hn-install-tag--alt {
    background: linear-gradient(135deg, #8a9c92, #5f7268);
}

.hn-install-card h4 {
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-install-card > p {
    margin-bottom: var(--space-10);
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}

.hn-install-card .hn-code-block {
    margin: 0 0 10px;
    flex: 1;
}

.hn-install-card .hn-code-block code { font-size: var(--fs-12); line-height: var(--lh-base); }

/* 本元素是 .hn-install-card 的直接子 <p>，被同卡片的 .hn-install-card > p 覆盖，故边距/字体/颜色用 !important */
.hn-install-foot {
    margin: 0 !important;
    padding-top: var(--space-10);
    border-top: 1px dashed rgba(224, 123, 57, 0.2);
    font-size: var(--fs-12) !important;
    color: var(--text-muted) !important;
}

.hn-install-foot code { font-size: var(--fs-11); }

/* ---------- 04 目录树 ---------- */
.hn-tree {
    padding: var(--space-16) var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.2);
    background: rgba(30, 40, 34, 0.97);
    font-family: var(--hn-mono);
    overflow-x: auto;
}

.hn-tree-line {
    display: flex;
    align-items: baseline; gap: var(--space-8);
    padding: 5px 0;
    font-size: var(--fs-12);
    line-height: var(--lh-ui);
    color: #d6e2d9;
    border-left: 1px dashed rgba(224, 123, 57, 0.22);
    transition: background-color var(--transition-fast);
}

.hn-tree-line:hover { background: rgba(224, 123, 57, 0.07); }

.hn-tree-line--root { border-left: none; padding-left: 0; }
.hn-tree-line--l1   { padding-left: var(--space-16); }
.hn-tree-line--l2   { padding-left: 36px; }
.hn-tree-line--l3   { padding-left: 54px; }

.hn-tree-line code {
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    color: #ffd7b4;
    white-space: nowrap;
}

.hn-tree-line--root code { font-weight: 700; color: #ffb877; }

.hn-tree-icon { flex: none; font-size: var(--fs-12); opacity: 0.9; }

.hn-tree-note {
    color: #7f9587;
    font-size: var(--fs-11);
    font-family: inherit;
    white-space: nowrap;
}

.hn-tree-note code {
    font-size: var(--fs-11);
    color: #a9c1b1;
    background: rgba(255, 255, 255, 0.06);
    padding: 0 4px;
    border-radius: var(--radius-4);
}

/* ---------- 06 插件三步流程 ---------- */
.hn-plugin-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: var(--space-10);
    margin-bottom: var(--space-16);
}

.hn-plugin-step {
    position: relative; padding: var(--space-16) var(--space-16) var(--space-12) ;
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.22);
    background: rgba(255, 255, 255, 0.92);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.hn-plugin-step:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 123, 57, 0.46);
}

.hn-plugin-step-no {
    display: block;
    margin-bottom: var(--space-6);
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hn-accent);
}

.hn-plugin-step h5 { margin-bottom: var(--space-6);
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-plugin-step code {
    display: block;
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    line-height: var(--lh-ui);
    color: var(--text-muted);
    word-break: break-all;
}

.hn-plugin-arrow {
    display: flex;
    align-items: center;
    font-size: var(--fs-17);
    color: rgba(224, 123, 57, 0.66);
    animation: hnArrowPulse 2.2s ease-in-out infinite;
}

/* 插件三步流程图在窄屏改为竖排，箭头转向 */
@media (max-width: 767px) {
    .hn-plugin-flow { grid-template-columns: 1fr; }
    .hn-plugin-arrow { justify-content: center; transform: rotate(90deg); animation: none; }
}

/* ---------- 06 Fiber 状态机 ---------- */
.hn-fiber { padding: var(--space-16) ;
    border-radius: var(--radius-8);
    border: 1px dashed rgba(224, 123, 57, 0.3);
    background: rgba(255, 253, 250, 0.88);
}

.hn-fiber-states {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
}

.hn-fiber-state {
    padding: var(--space-6) var(--space-12);
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.24);
    background: #fff;
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.hn-fiber-state--ok {
    border-color: rgba(224, 123, 57, 0.5);
    background: rgba(224, 123, 57, 0.12);
    color: var(--hn-accent-dark);
    box-shadow: 0 0 0 4px rgba(224, 123, 57, 0.07);
    animation: hnFiberPulse 2.8s ease-in-out infinite;
}

@keyframes hnFiberPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(224, 123, 57, 0.07); }
    50%      { box-shadow: 0 0 0 8px rgba(224, 123, 57, 0.03); }
}

.hn-fiber-arrow { color: rgba(224, 123, 57, 0.6); font-size: var(--fs-14); }

.hn-fiber-note {
    margin-top: var(--space-12);
    font-size: var(--fs-12);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

.hn-fiber-note b { color: var(--hn-accent-dark); }

/* ---------- 08 安全对卡 ---------- */
.hn-safety-pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16); margin-top: var(--space-12);
}

.hn-safety-card { padding: var(--space-16) var(--space-20) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.2);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
}

.hn-safety-card ul { margin: 9px 0 0; padding-left: 0; list-style: none; }

.hn-safety-card li {
    position: relative;
    padding: 5px 0 5px 16px;
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}

.hn-safety-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--space-12);
    width: 6px;
    height: 6px;
    border-radius: var(--radius-2);
    background: var(--hn-accent);
}

.hn-safety-tag {
    display: inline-block;
    margin-bottom: var(--space-8);
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.hn-safety-tag--1 { color: #a24f13; background: rgba(224, 123, 57, 0.14); }
.hn-safety-tag--2 { color: #48762f; background: rgba(93, 151, 67, 0.14); }

.hn-safety-card h4 {
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-safety-card .hn-para-note { margin-top: var(--space-10); font-size: var(--fs-12); }

/* ---------- 08 权限预设行 ---------- */
.hn-preset-row {
    display: grid;
    gap: var(--space-10);
    margin-top: var(--space-12);
}

.hn-preset {
    display: flex;
    flex-wrap: wrap;
    align-items: center; gap: var(--space-10);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-12);
    border: 1px solid rgba(224, 123, 57, 0.24);
    border-left: 4px solid var(--hn-accent);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hn-preset:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 24px rgba(224, 123, 57, 0.12);
}

.hn-preset > code {
    font-family: var(--hn-mono);
    font-size: var(--fs-13);
    font-weight: 700;
    color: var(--hn-accent-dark);
    white-space: nowrap;
}

.hn-preset-body {
    flex: 1;
    min-width: 200px;
    font-size: var(--fs-13);
    line-height: 1.7;
    color: var(--text-secondary);
}

.hn-preset-body b { color: var(--text-primary); }

.hn-preset-tag {
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--fs-11);
    font-weight: 700;
    color: #48762f;
    background: rgba(93, 151, 67, 0.14);
    white-space: nowrap;
}

.hn-preset--danger { border-left-color: #dc5a4a; }
.hn-preset--danger > code { color: #b23b2d; }
.hn-preset--danger .hn-preset-tag { color: #b23b2d; background: rgba(220, 90, 74, 0.14); }

.hn-preset--custom { border-left-color: #8a9c92; }
.hn-preset--custom > code { color: #5f7268; }
.hn-preset--custom .hn-preset-tag { color: #5f7268; background: rgba(138, 156, 146, 0.18); }

/* ---------- 08 旗舰能力卡 ---------- */
.hn-flagship {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
}

/* 首卡横跨两列：5 张卡铺成 2 行（跨列 2 + 1 / 1 + 1 + 1），不留落单行 */
.hn-flagship-card--lead { grid-column: span 2; }

.hn-flagship-card {
    position: relative;
    display: flex;
    flex-direction: column; padding: var(--space-20) var(--space-20) var(--space-16) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(224, 123, 57, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 246, 0.94));
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

/* 卡片顶部一条会在悬停时展开的渐变线 */
.hn-flagship-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hn-accent), #f2b985 60%, transparent);
    transform: scaleX(0.22);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hn-flagship-card:hover {
    transform: translateY(-5px);
    border-color: rgba(224, 123, 57, 0.42);
    box-shadow: 0 16px 34px rgba(224, 123, 57, 0.15);
}

.hn-flagship-card:hover::before { transform: scaleX(1); }

.hn-flagship-icon {
    display: block;
    margin-bottom: var(--space-10);
    font-size: var(--fs-20);
    line-height: 1;
}

.hn-flagship-card h4 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}

.hn-flagship-card p {
    flex: 1;
    font-size: var(--fs-13);
    line-height: var(--lh-loose);
    color: var(--text-secondary);
}

.hn-flagship-meta {
    display: block;
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: 1px dashed rgba(224, 123, 57, 0.22);
    font-size: var(--fs-12);
    line-height: 1.7;
    color: var(--text-muted);
}

.hn-flagship-meta code {
    font-family: var(--hn-mono);
    font-size: var(--fs-11);
    color: var(--hn-accent-dark);
    background: rgba(224, 123, 57, 0.1);
    padding: 1px var(--space-4);
    border-radius: var(--radius-4);
}

/* ---------- 10 donts 清单 ---------- */
.hn-donts {
    display: grid; gap: var(--space-8);
    margin-top: var(--space-4);
}

.hn-dont {
    display: flex;
    align-items: flex-start; gap: var(--space-10);
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-12);
    border: 1px solid rgba(220, 90, 74, 0.22);
    border-left: 4px solid #dc5a4a;
    background: rgba(255, 251, 250, 0.94);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.hn-dont:hover {
    transform: translateX(4px);
    background: rgba(220, 90, 74, 0.05);
}

.hn-dont span { flex: none; font-size: var(--fs-14); line-height: var(--lh-ui); }

.hn-dont p {
    flex: 1;
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}

.hn-dont code {
    font-family: var(--hn-mono);
    font-size: var(--fs-12);
    color: #b23b2d;
    background: rgba(220, 90, 74, 0.1);
    padding: 1px var(--space-4);
    border-radius: var(--radius-4);
}

/* ---------- 响应式补齐 ---------- */
@media (max-width: 1199px) {
    .hn-install-grid { grid-template-columns: repeat(2, 1fr); }
    .hn-flagship { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 2 列时 5 张卡：跨列首卡独占一行，其余 4 张铺成 2×2，仍无落单 */
    .hn-flagship-card--lead { grid-column: span 2; }
}

@media (max-width: 991px) {
    .hn-seam-graph {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .hn-seam-arrow {
        justify-self: center;
        transform: rotate(90deg);
        animation: none;
    }
    .hn-safety-pair { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .hn-install-grid,
    .hn-flagship { grid-template-columns: 1fr; }
    .hn-flagship-card--lead { grid-column: auto; }
    .hn-claim { padding: var(--space-16) var(--space-16) var(--space-16) var(--space-20); }
    .hn-claim:hover { transform: none; }
    .hn-terminal-badge { display: none; }
    .hn-fiber-states { gap: var(--space-6); }
    .hn-fiber-arrow { display: none; }
    .hn-preset { padding: var(--space-12) ; }
    .hn-preset-body { min-width: 0; }
    .hn-tree { padding: var(--space-12); }
    .hn-tree-line { font-size: var(--fs-11); }
    .hn-tree-note { display: none; }
    .hn-seam-node code { font-size: var(--fs-12); }
}

@media (prefers-reduced-motion: reduce) {
    .hn-masthead-scan,
    .hn-masthead .pg-typing::after,
    .hn-seam-arrow,
    .hn-plugin-arrow,
    .hn-fiber-state--ok { animation: none; }
    .hn-terminal-body .hn-line,
    .hn-terminal-body .hn-out { animation: none; }
}


/* ================================================================
   视觉强化 v3：页面暖橙极光 / 标题流光（与 skills 页同款手法，配色区分）
   ================================================================ */

.hn-page { position: relative; }

.hn-page::before {
    content: '';
    position: absolute;
    inset: 40px 0 auto 0;
    height: 620px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(42% 46% at 14% 16%, rgba(224, 123, 57, 0.12), transparent 70%),
        radial-gradient(46% 44% at 86% 8%, rgba(242, 185, 133, 0.16), transparent 72%);
    filter: blur(6px);
    animation: hnAurora 16s ease-in-out infinite alternate;
}

@keyframes hnAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
    100% { transform: translate3d(0, -18px, 0) scale(1.03); opacity: 1; }
}

.hn-page > * { position: relative; z-index: 1; }

.hn-masthead .pg-title {
    background: linear-gradient(100deg, var(--text-primary) 12%, var(--hn-accent) 48%, #f2b985 80%, var(--text-primary) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hnTitleFlow 9s ease-in-out infinite;
}

.hn-masthead .pg-title .pg-title-accent { -webkit-text-fill-color: var(--hn-accent); background: none; }

@keyframes hnTitleFlow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .hn-page::before,
    .hn-masthead .pg-title,
    .hn-masthead-scan { animation: none !important; }
    .hn-masthead .pg-title { -webkit-text-fill-color: inherit; background: none; }
}


/* ================================================================
   v3：大模块上下间距收紧（48 → 26），与 skills 专题页保持一致的多屏阅读节奏
   ================================================================ */

.hn-page .hn-section { margin-top: var(--space-24); padding: var(--space-24) ;
}

/* 头图与终端演示窗之间的间距单独控制，避免两处 26 叠加显得仍偏大 */
.hn-page .hn-masthead { margin-bottom: var(--space-20); }
.hn-page .hn-terminal { margin-bottom: var(--space-24); }

/* 模块内小标题同步收紧 */
.hn-page .hn-subtitle { margin: 22px 0 12px; }
.hn-page .hn-section .pg-section-head { margin-bottom: var(--space-16); }

@media (max-width: 767px) {
    .hn-page .hn-section { margin-top: var(--space-16); padding: var(--space-20) var(--space-16); }
    .hn-page .hn-masthead { margin-bottom: var(--space-16); }
    .hn-page .hn-terminal { margin-bottom: var(--space-16); }
}


/* ================================================================
   侧栏「本页速览」 widget —— 本页专属换肤（终端键入风 · 暖橙）
   外层 .widget / .widget-title 沿用「链接伙伴」的卡片外壳，标题条保留全站默认绿色；
   只重绘 widget-content 内部：条目做成「终端 prompt 行」，序号是行号，
   右侧是键入光标。条目内容为本页章节锚点（见 dsh.html 侧栏）。
   ================================================================ */

.page-dsh .topic-picks-body {
    gap: var(--space-6);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(224, 123, 57, 0.07), transparent 60%);
}

.page-dsh .topic-pick-row {
    position: relative;
    padding: var(--space-8) var(--space-10) var(--space-8) var(--space-12);
    border: 1px solid rgba(224, 123, 57, 0.16);
    border-left: 2px solid rgba(224, 123, 57, 0.35);
    border-radius: 0 9px 9px 0;
    background: linear-gradient(100deg, rgba(224, 123, 57, 0.05), rgba(255, 255, 255, 0.62) 46%);
    font-family: var(--hn-mono, var(--font-mono));
}

.page-dsh .topic-pick-idx {
    flex-shrink: 0;
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(184, 95, 36, 0.55);
    font-variant-numeric: tabular-nums;
}

.page-dsh .topic-pick-idx::before {
    content: '❯ ';
    color: var(--hn-accent);
}

.page-dsh .topic-pick-name {
    font-family: inherit;
    font-size: var(--fs-12);
    letter-spacing: -0.01em;
}

.page-dsh .topic-pick-desc {
    font-size: var(--fs-11);
    color: rgba(140, 108, 84, 0.85);
}

/* 键入光标：hover 时才闪烁，静态时是一条很淡的短竖线 */
.page-dsh .topic-pick-go {
    flex-shrink: 0;
    width: 6px;
    height: 12px;
    border-radius: var(--radius-2);
    background: rgba(224, 123, 57, 0.28);
    transition: background var(--transition-fast);
}

.page-dsh .topic-pick-row:hover {
    border-color: rgba(224, 123, 57, 0.5);
    border-left-color: var(--hn-accent);
    background: linear-gradient(100deg, rgba(224, 123, 57, 0.14), rgba(255, 255, 255, 0.85) 52%);
    box-shadow: 0 3px 12px rgba(224, 123, 57, 0.16);
    transform: translateX(3px);
}

.page-dsh .topic-pick-row:hover .topic-pick-name { color: var(--hn-accent-dark); }
.page-dsh .topic-pick-row:hover .topic-pick-go {
    background: var(--hn-accent);
    animation: hnPickCaret 0.9s steps(1, end) infinite;
}

@keyframes hnPickCaret {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
    .page-dsh .topic-pick-row,
    .page-dsh .topic-pick-row:hover { transform: none; }
    .page-dsh .topic-pick-row:hover .topic-pick-go { animation: none; }
}