/* =============================================================
   文章样式表 - Article Stylesheet
   ============================================================= */

/* -------------------------------------------------------------
   1. CSS 变量定义 (Variables)
   ------------------------------------------------------------- */

:root {
    /* 间距系统 */
    --article-spacing-xs: 0.2em;
    --article-spacing-sm: 0.3em;
    --article-spacing-md: 0.5em;
    --article-spacing-lg: 0.8em;
    --article-spacing-xl: 1em;
    --article-spacing-2xl: 1.2em;
    --article-spacing-3xl: 1.5em;
    --article-spacing-4xl: 2em;

    /* 内边距系统 */
    --article-padding-xs: 0.15em;
    --article-padding-sm: 0.2em;
    --article-padding-md: 0.4em;
    --article-padding-lg: 0.6em;
    --article-padding-xl: 0.8em;
    --article-padding-2xl: 1em;
    --article-padding-3xl: 1.2em;
    --article-padding-4xl: 1.5em;

    /* 外边距系统 */
    --article-margin-xs: 0.3em;
    --article-margin-sm: 0.5em;
    --article-margin-md: 0.8em;
    --article-margin-lg: 1em;
    --article-margin-xl: 1.2em;
    --article-margin-2xl: 1.5em;
    --article-margin-3xl: 2em;

    /* 圆角系统 */
    --article-radius-sm: 3px;
    --article-radius-md: 4px;
    --article-radius-lg: 8px;
    --article-radius-xl: 10px;
    --article-radius-2xl: 12px;

    /* 字体大小系统 */
    --article-font-xs: 0.75em;
    --article-font-sm: 0.8em;
    --article-font-md: 0.85em;
    --article-font-base: 0.9em;
    --article-font-lg: 0.95em;
    --article-font-xl: 1em;
    --article-font-2xl: 1.1em;
    --article-font-3xl: 1.25em;
    --article-font-4xl: 1.5em;
    --article-font-5xl: 1.75em;
    --article-font-6xl: 2em;

    /* 行高系统 */
    --article-line-height-sm: 1.4;
    --article-line-height-base: 1.6;
    --article-line-height-lg: 1.8;

    /* 边框系统 */
    --article-border-width-sm: 1px;
    --article-border-width-md: 2px;
    --article-border-width-lg: 4px;

    /* 特效系统 */
    --article-letter-spacing-sm: 0.5px;
    --article-shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1);
    --article-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15);
    --article-shadow-lg: 0 10px 30px var(--box-shadow);
    --article-transition-fast: all 0.2s ease;

    /* 代码块主题色 */
    --article-code-bg: #1e1e1e;
    --article-code-border: #333;
    --article-code-text: #d4d4d4;
    --article-terminal-header-bg: linear-gradient(180deg, #3c3c3c 0%, #2d2d2d 100%);
    --article-terminal-header-border: #222;
    --article-scrollbar-track: #1e1e1e;
    --article-scrollbar-thumb: #4a4a4a;
    --article-scrollbar-thumb-hover: #5a5a5a;

    /* 终端按钮色 */
    --article-terminal-btn-close: #ff5f56;
    --article-terminal-btn-minimize: #ffbd2e;
    --article-terminal-btn-maximize: #27c93f;
}

/* -------------------------------------------------------------
   2. 布局组件 (Layout Components)
   ------------------------------------------------------------- */

/* 卡片容器 */
.card-box {
    display: flex;
    justify-content: center;
}

.card {
    width: 794px;
}

.card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--article-spacing-xl);
}

.card-content {
    min-height: calc(100dvh - (var(--nav-height) + 26rem));
}

/* -------------------------------------------------------------
   3. 文章基础 (Article Base)
   ------------------------------------------------------------- */

.article-content {
    line-height: var(--article-line-height-lg);
    font-size: var(--article-font-xl);
}

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

/* -------------------------------------------------------------
   4. 标题系统 (Headings)
   ------------------------------------------------------------- */

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-top: var(--article-margin-3xl);
    margin-bottom: var(--article-margin-lg);
    line-height: var(--article-line-height-sm);
    scroll-margin-top: calc(var(--nav-height) + 2em);
}

.article-content h1 {
    font-size: var(--article-font-6xl);
    border-bottom: var(--article-border-width-md) solid var(--divider-color);
    padding-bottom: var(--article-spacing-sm);
}

.article-content h2 {
    font-size: var(--article-font-5xl);
    border-bottom: var(--article-border-width-sm) solid var(--divider-color);
    padding-bottom: var(--article-spacing-sm);
}

.article-content h3 {
    font-size: var(--article-font-4xl);
}

.article-content h4 {
    font-size: var(--article-font-3xl);
}

.article-content h5 {
    font-size: var(--article-font-2xl);
}

.article-content h6 {
    font-size: var(--article-font-xl);
    color: var(--text-secondary-color);
}

/* -------------------------------------------------------------
   5. 段落与文本 (Paragraphs & Text)
   ------------------------------------------------------------- */

.article-content p {
    margin-bottom: var(--article-margin-xl);
    color: var(--text-color);
}

/* 重置特定容器内的段落缩进 */
.article-content blockquote p,
.article-content li p,
.article-content table p,
.article-content .alert p {
    text-indent: 0;
}

/* 文本样式 */
.article-content strong {
    color: var(--text-color);
    font-weight: 600;
}

.article-content em {
    font-style: italic;
}

.article-content del {
    text-decoration: line-through;
    opacity: 0.7;
}

.article-content ins {
    text-decoration: underline;
}

.article-content mark {
    color: var(--text-color);
    background: rgba(255, 217, 0, 0.397);
    padding: var(--article-padding-sm) var(--article-padding-md);
    border-radius: var(--article-radius-sm);
}

.article-content sup,
.article-content sub {
    font-size: var(--article-font-xs);
}

/* -------------------------------------------------------------
   6. 链接 (Links)
   ------------------------------------------------------------- */

.article-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: var(--article-border-width-sm) solid transparent;
    transition: var(--article-transition-fast);
}

.article-content a:hover {
    border-bottom-color: var(--primary-color);
}

/* -------------------------------------------------------------
   7. 列表 (Lists)
   ------------------------------------------------------------- */

.article-content ul,
.article-content ol {
    margin-bottom: var(--article-margin-xl);
    padding-left: var(--article-spacing-4xl);
}

.article-content ul {
    list-style-type: disc;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content ul ul,
.article-content ol ol,
.article-content ul ol,
.article-content ol ul {
    margin-top: var(--article-spacing-md);
    margin-bottom: var(--article-spacing-md);
}

.article-content li {
    margin-bottom: var(--article-spacing-md);
}

.article-content li::marker {
    color: var(--primary-color);
}

/* -------------------------------------------------------------
   8. 引用块 (Blockquotes)
   ------------------------------------------------------------- */

.article-content blockquote {
    margin: var(--article-margin-2xl) 0;
    padding: var(--article-padding-2xl) var(--article-padding-4xl);
    border-left: var(--article-border-width-lg) solid var(--primary-color);
    background: var(--surface-color);
    border-radius: 0 var(--article-radius-lg) var(--article-radius-lg) 0;
    backdrop-filter: var(--backdrop-blur);
}

.article-content blockquote p {
    margin-bottom: var(--article-spacing-md);
    color: var(--text-secondary-color);
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

/* 嵌套引用 */
.article-content blockquote blockquote {
    margin: var(--article-spacing-md) 0 0 0;
    border-left-color: var(--text-secondary-color);
}

/* -------------------------------------------------------------
   9. 代码 (Code)
   ------------------------------------------------------------- */

/* 行内代码 */
.article-content code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: var(--article-font-base);
    color: var(--primary-color);
    border: var(--article-border-width-sm) solid var(--border-color);
}

/* 代码块容器 */
.article-content pre {
    padding: 0;
    margin: var(--article-margin-2xl) 0;
    box-shadow: var(--article-shadow-lg);
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

/* 代码块复制按钮 */
.article-content pre .copy-btn {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 10;
    font-family: inherit !important;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8em;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    transition: var(--article-transition-fast);
}

.article-content .codehilite:hover .copy-btn {
    opacity: 1;
}

/* 代码块表格布局（带行号） */
.article-content .codehilitetable {
    width: 100%;
    border-collapse: collapse;
    margin: var(--article-margin-2xl) 0;
    border-radius: var(--article-radius-xl);
    overflow: hidden;
    background: var(--article-code-bg);
    border: var(--article-border-width-sm) solid var(--article-code-border);
    box-shadow: var(--article-shadow-lg);
    position: relative;
    display: block;
}

/* 终端窗口装饰 - 标题栏 */
.article-content .codehilitetable::before {
    content: '';
    display: block;
    height: 32px;
    background: var(--article-terminal-header-bg);
    border-radius: var(--article-radius-xl) var(--article-radius-xl) 0 0;
    border-bottom: var(--article-border-width-sm) solid var(--article-terminal-header-border);
}

/* 终端窗口装饰 - 控制按钮 */
.article-content .codehilitetable::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: var(--article-terminal-btn-close);
    border-radius: 50%;
    box-shadow:
        20px 0 0 var(--article-terminal-btn-minimize),
        40px 0 0 var(--article-terminal-btn-maximize);
}

.article-content .codehilitetable td {
    padding: 0;
    border: none;
    vertical-align: top;
}

/* 行号列 */
.article-content .codehilitetable .linenos {
    background: rgba(255, 255, 255, 0.03);
    border-right: var(--article-border-width-sm) solid var(--article-code-border);
    width: 1%;
    min-width: 3em;
    text-align: center;
    user-select: none;
}

.article-content .codehilitetable .linenos .linenodiv {
    padding: var(--article-padding-3xl) var(--article-padding-md);
    color: var(--text-secondary-color);
    font-size: var(--article-font-base);
    line-height: var(--article-line-height-base);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.article-content .codehilitetable .linenos .linenodiv pre {
    margin: 0;
    padding: 0.4em;
}

/* 代码内容区域 */
.article-content pre code {
    padding: var(--article-padding-3xl);
    border: none;
    color: var(--article-code-text);
    font-size: var(--article-font-base);
    line-height: var(--article-line-height-base);
    display: block;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
    overflow-x: auto;
}

/* 代码块滚动条 */
.article-content pre code::-webkit-scrollbar {
    height: 6px;
}

.article-content pre code::-webkit-scrollbar-track {
    background: var(--article-scrollbar-track);
    border-radius: 0 0 var(--article-radius-xl) var(--article-radius-xl);
}

.article-content pre code::-webkit-scrollbar-thumb {
    background: var(--article-scrollbar-thumb);
    border-radius: var(--article-radius-md);
}

.article-content pre code::-webkit-scrollbar-thumb:hover {
    background: var(--article-scrollbar-thumb-hover);
}

/* -------------------------------------------------------------
   10. 语法高亮 (Syntax Highlighting - Pygments)
   ------------------------------------------------------------- */

/* 关键字 */
.article-content pre .k,
.article-content pre .kd {
    color: #c586c0;
}

/* 函数名 */
.article-content pre .nf,
.article-content pre .nb {
    color: #dcdcaa;
}

/* 类名 */
.article-content pre .nc {
    color: #4ec9b0;
}

/* 字符串 */
.article-content pre .s,
.article-content pre .s2,
.article-content pre .sb,
.article-content pre .si {
    color: #ce9178;
}

/* 注释 */
.article-content pre .c1,
.article-content pre .cm,
.article-content pre .sd {
    color: #6a9955;
}

/* 常量 */
.article-content pre .kc {
    color: #569cd6;
}

/* 变量名 */
.article-content pre .n,
.article-content pre .nx,
.article-content pre .na {
    color: #9cdcfe;
}

/* 操作符与标点 */
.article-content pre .o,
.article-content pre .p {
    color: #d4d4d4;
}

/* 空白符 */
.article-content pre .w {
    color: transparent;
}

/* HTML/XML 标签 */
.article-content pre .nt {
    color: #569cd6;
}

/* self/this */
.article-content pre .bp {
    color: #569cd6;
}

/* 行号 */
.article-content pre .normal {
    color: #858585;
}

/* -------------------------------------------------------------
   11. 表格 (Tables)
   ------------------------------------------------------------- */

.article-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--article-margin-2xl) 0;
    border-radius: var(--article-radius-2xl);
    overflow: hidden;
    border: var(--article-border-width-sm) solid var(--border-color);
    box-shadow: var(--article-shadow-md);
    background: var(--surface-color);
    backdrop-filter: var(--backdrop-blur);
}

/* 表头 */
.article-content thead {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.article-content th {
    padding: var(--article-padding-xl) var(--article-padding-4xl);
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: var(--article-border-width-md) solid var(--primary-color);
    font-size: var(--article-font-lg);
    letter-spacing: var(--article-letter-spacing-sm);
    text-transform: uppercase;
}

/* 单元格 */
.article-content td {
    padding: var(--article-padding-lg) var(--article-padding-4xl);
    text-align: left;
    border-bottom: var(--article-border-width-sm) solid var(--divider-color);
    color: var(--text-secondary-color);
    transition: var(--article-transition-fast);
}

/* 隔行变色 */
.article-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

/* 悬停效果 */
.article-content tbody tr:hover td:not(.codehilitetable td) {
    background: var(--surface-color);
    color: var(--text-color);
}

.article-content tbody tr:last-child td {
    border-bottom: none;
}

/* 首列加粗 */
.article-content td:first-child {
    font-weight: 500;
    color: var(--text-color);
}

/* 表格内代码 */
.article-content table code {
    padding: var(--article-padding-xs) var(--article-padding-md);
    font-size: var(--article-font-md);
}

/* -------------------------------------------------------------
   12. 媒体元素 (Media)
   ------------------------------------------------------------- */

.article-content figure {
    margin: var(--article-margin-2xl) 0;
    text-align: center;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--article-radius-lg);
    box-shadow: var(--box-shadow);
}

.article-content figcaption {
    margin-top: var(--article-spacing-md);
    font-size: var(--article-font-base);
    color: var(--text-secondary-color);
    font-style: italic;
}

/* -------------------------------------------------------------
   13. 分隔线与定义列表 (Dividers & Definition Lists)
   ------------------------------------------------------------- */

/* 水平分割线 */
.article-content hr {
    border: none;
    height: var(--article-border-width-md);
    background: var(--divider-color);
    margin: var(--article-margin-3xl) 0;
}

/* 定义列表 */
.article-content dl {
    margin: var(--article-margin-2xl) 0;
}

.article-content dt {
    font-weight: 600;
    color: var(--text-color);
    margin-top: var(--article-padding-xl);
}

.article-content dd {
    margin-left: var(--article-spacing-4xl);
    color: var(--text-secondary-color);
    margin-top: var(--article-spacing-xs);
}

/* -------------------------------------------------------------
   14. 脚注 (Footnotes)
   ------------------------------------------------------------- */

.article-content .footnote-ref {
    font-size: var(--article-font-sm);
    vertical-align: super;
}

.article-content .footnote-ref a {
    color: var(--primary-color);
}

.article-content .footnotes {
    margin-top: var(--article-margin-3xl);
    padding-top: var(--article-padding-xl);
    border-top: var(--article-border-width-sm) solid var(--divider-color);
    font-size: var(--article-font-base);
}

.article-content .footnotes ol {
    padding-left: var(--article-padding-4xl);
}

.article-content .footnotes li {
    color: var(--text-secondary-color);
}

/* -------------------------------------------------------------
   15. 提示框/警告框 (Admonitions)
   ------------------------------------------------------------- */

.article-content .admonition {
    margin: var(--article-margin-2xl) 0;
    padding: var(--article-padding-xl) var(--article-padding-4xl);
    border-radius: var(--article-radius-lg);
    border-left: var(--article-border-width-lg) solid;
    background: var(--surface-color);
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--article-shadow-md);
}

.article-content .admonition p {
    text-indent: 0;
    margin-bottom: var(--article-spacing-md);
}

.article-content .admonition p:last-child {
    margin-bottom: 0;
}

.article-content .admonition-title {
    font-weight: 600;
    font-size: var(--article-font-lg);
    margin-bottom: var(--article-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--article-spacing-sm);
}

/* Note - 注意 */
.article-content .admonition.note {
    border-left-color: #448aff;
    background: rgba(68, 138, 255, 0.05);
}

.article-content .admonition.note .admonition-title {
    color: #448aff;
}

.article-content .admonition.note .admonition-title::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Warning - 警告 */
.article-content .admonition.warning {
    border-left-color: #ff9100;
    background: rgba(255, 145, 0, 0.05);
}

.article-content .admonition.warning .admonition-title {
    color: #ff9100;
}

.article-content .admonition.warning .admonition-title::before {
    content: '\f071';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Tip - 提示 */
.article-content .admonition.tip {
    border-left-color: #00c853;
    background: rgba(0, 200, 83, 0.05);
}

.article-content .admonition.tip .admonition-title {
    color: #00c853;
}

.article-content .admonition.tip .admonition-title::before {
    content: '\f0eb';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Danger - 危险 */
.article-content .admonition.danger {
    border-left-color: #ff1744;
    background: rgba(255, 23, 68, 0.05);
}

.article-content .admonition.danger .admonition-title {
    color: #ff1744;
}

.article-content .admonition.danger .admonition-title::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Info - 信息 */
.article-content .admonition.info {
    border-left-color: #00b8d4;
    background: rgba(0, 184, 212, 0.05);
}

.article-content .admonition.info .admonition-title {
    color: #00b8d4;
}

.article-content .admonition.info .admonition-title::before {
    content: '\f129';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* -------------------------------------------------------------
   16. 标签页 (Tabbed - pymdownx.tabbed)
   ------------------------------------------------------------- */

.article-content .tabbed-set {
    margin: var(--article-margin-2xl) 0;
    border-radius: var(--article-radius-lg);
    background: var(--surface-color);
    border: var(--article-border-width-sm) solid var(--border-color);
    overflow: hidden;
}

/* 隐藏单选按钮 */
.article-content .tabbed-set > input {
    display: none;
}

/* 标签导航栏 */
.article-content .tabbed-labels {
    display: flex;
    background: var(--surface-color);
    border-bottom: var(--article-border-width-sm) solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.article-content .tabbed-labels::-webkit-scrollbar {
    display: none;
}

/* 标签按钮 */
.article-content .tabbed-labels label {
    padding: var(--article-padding-lg) var(--article-padding-2xl);
    font-weight: 500;
    color: var(--text-secondary-color);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.article-content .tabbed-labels label:hover {
    color: var(--text-color);
    background: var(--hover-color);
}

/* 选中状态标签 - 使用 :has() 选择器 */
.article-content .tabbed-set:has(> input:nth-of-type(1):checked) .tabbed-labels label:nth-of-type(1),
.article-content .tabbed-set:has(> input:nth-of-type(2):checked) .tabbed-labels label:nth-of-type(2),
.article-content .tabbed-set:has(> input:nth-of-type(3):checked) .tabbed-labels label:nth-of-type(3),
.article-content .tabbed-set:has(> input:nth-of-type(4):checked) .tabbed-labels label:nth-of-type(4),
.article-content .tabbed-set:has(> input:nth-of-type(5):checked) .tabbed-labels label:nth-of-type(5) {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* 默认选中第一个标签 */
.article-content .tabbed-set:not(:has(> input:checked)) .tabbed-labels label:nth-of-type(1) {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* 标签内容区域 */
.article-content .tabbed-content {
    padding: var(--article-padding-xl);
}

.article-content .tabbed-block {
    display: none;
}

/* 显示选中内容块 */
.article-content .tabbed-set:has(> input:nth-of-type(1):checked) .tabbed-content .tabbed-block:nth-of-type(1),
.article-content .tabbed-set:has(> input:nth-of-type(2):checked) .tabbed-content .tabbed-block:nth-of-type(2),
.article-content .tabbed-set:has(> input:nth-of-type(3):checked) .tabbed-content .tabbed-block:nth-of-type(3),
.article-content .tabbed-set:has(> input:nth-of-type(4):checked) .tabbed-content .tabbed-block:nth-of-type(4),
.article-content .tabbed-set:has(> input:nth-of-type(5):checked) .tabbed-content .tabbed-block:nth-of-type(5) {
    display: block;
}

/* 默认显示第一个内容块 */
.article-content .tabbed-set:not(:has(> input:checked)) .tabbed-content .tabbed-block:nth-of-type(1) {
    display: block;
}

/* 标签页内代码块调整 */
.article-content .tabbed-block .codehilite,
.article-content .tabbed-block .codehilitetable {
    margin: var(--article-margin-md) 0;
}

/* -------------------------------------------------------------
   17. 数学公式 (MathJax)
   ------------------------------------------------------------- */

.article-content mjx-container {
    display: inline-block;
    margin: 0 0.2em;
    vertical-align: middle;
}

/* 块级公式 */
.article-content mjx-container[display="true"] {
    display: block;
    margin: var(--article-margin-xl) 0;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
}

/* 行内公式 */
.article-content mjx-container:not([display="true"]) {
    font-size: 0.95em;
}

/* 公式滚动条 */
.article-content mjx-container[display="true"]::-webkit-scrollbar {
    height: 4px;
}

.article-content mjx-container[display="true"]::-webkit-scrollbar-track {
    background: transparent;
}

.article-content mjx-container[display="true"]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* 公式颜色适配 */
.article-content mjx-container svg {
    fill: currentColor;
    stroke: currentColor;
}

/* 公式选中样式 */
.article-content mjx-container::selection {
    background: var(--primary-color);
    color: var(--on-primary-color);
}

/* -------------------------------------------------------------
   18. Pymdownx 扩展 (Extensions)
   ------------------------------------------------------------- */

/* 删除线 */
.article-content del {
    text-decoration: line-through;
    opacity: 0.7;
}

/* 上下标 */
.article-content sub {
    font-size: var(--article-font-xs);
    vertical-align: sub;
}

.article-content sup {
    font-size: var(--article-font-xs);
    vertical-align: super;
}

/* 高亮标记 */
.article-content mark,
.article-content .mark {
    color: var(--text-color);
    background: rgba(255, 217, 0, 0.397);
    padding: var(--article-padding-sm) var(--article-padding-md);
    border-radius: var(--article-radius-sm);
}

/* 键盘按键 */
.article-content .keys kbd {
    display: inline-block;
    padding: 0.15em 0.6em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.85em;
    font-weight: 500;
    color: #e0e0e0;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border: 1px solid #555;
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 2px 0 #222;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    margin: 0 0.15em;
    vertical-align: middle;
    line-height: 1.4;
}

/* 任务列表 */
.article-content .task-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.article-content .task-list-item {
   display: flex;
   align-items: flex-start;
   gap: var(--article-spacing-sm);
   margin-bottom: var(--article-spacing-sm);
   position: relative;
   padding-left: 1.5em;
}

.article-content .task-list-item input[type="checkbox"] {
   display: none;
   position: relative;
}

.article-content .task-list-item::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.2rem;
   width: 1.3rem;
   height: 1.3rem;
   border-radius: 50%;
   background: var(--hero-bg-color);
   border: 2px solid var(--border-color, #ccc);
   box-sizing: border-box;
}

.article-content .task-list-item:has(input[checked])::before {
   background: var(--hero-bg-color);
   border-color: var(--text-color);
}

.article-content .task-list-item:has(input[checked])::after {
   content: "\f00c";
   font-family: "Font Awesome 6 Free";

   position: absolute;
   left: 0.65rem;
   top: 0.15rem;
   transform: translate(-50%, 0);
   color: var(--text-color);
   font-size: 0.9rem;
   font-weight: bold;
}

/* 折叠详情 */
.article-content details {
    margin: var(--article-margin-xl) 0;
    padding: var(--article-padding-xl);
    background: var(--surface-color);
    border-radius: var(--article-radius-lg);
    border: var(--article-border-width-sm) solid var(--border-color);
}

.article-content details summary {
    font-weight: 600;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.article-content details summary:hover {
    color: var(--primary-color);
}

.article-content details[open] summary {
    margin-bottom: var(--article-spacing-md);
}

/* 表情符号 */
.article-content .emoji {
    font-size: 1.2em;
    vertical-align: middle;
}

/* 智能链接 */
.article-content .magiclink {
    color: var(--primary-color);
    text-decoration: none;
}

.article-content .magiclink:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------
   19. 页脚 (Footer)
   ------------------------------------------------------------- */

.article-footer {
    margin-top: 5rem;
}

/* =============================================================
   20. 响应式设计 (Responsive Design)
   ============================================================= */

/* 平板设备 */
@media (max-width: 1024px) {
    .card {
        width: 100%;
    }
}

/* 移动设备 */
@media (max-width: 768px) {
    /* 基础字体 */
    .article-content {
        font-size: var(--article-font-lg);
    }

    /* 标题尺寸调整 */
    .article-content h1 {
        font-size: var(--article-font-5xl);
    }

    .article-content h2 {
        font-size: var(--article-font-4xl);
    }

    .article-content h3 {
        font-size: var(--article-font-3xl);
    }

    /* 列表缩进 */
    .article-content ul,
    .article-content ol {
        padding-left: var(--article-padding-4xl);
    }

    /* 表格单元格 */
    .article-content th,
    .article-content td {
        padding: var(--article-padding-lg) var(--article-padding-xl);
    }

    /* 表格字体 */
    .article-content table {
        font-size: var(--article-font-base);
    }

    /* 标签页 */
    .article-content .tabbed-labels label {
        padding: var(--article-padding-md) var(--article-padding-lg);
        font-size: var(--article-font-sm);
    }

    /* 公式 */
    .article-content mjx-container[display="true"] {
        margin: var(--article-margin-lg) 0;
        font-size: 0.9em;
    }

    /* 进度条 */
    .article-content .progress {
        margin: var(--article-margin-md) 0;
    }
}

/* ------------------------------------------------------------- */
/* Progressbar 进度条样式 (pymdownx.progressbar)
/* ------------------------------------------------------------- */

.article-content .progress {
    display: flex;
    height: 0.75rem;
    overflow: hidden;
    font-size: var(--article-font-xs);
    background: var(--surface-border-color);
    border-radius: 100em;
    margin: var(--article-margin-lg) 0;
}

.article-content .progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: var(--primary-color);
    transition: width 0.6s ease;
    border-radius: 9999px;
}

.article-content .progress-label {
    position: absolute;
    width: 100%;
    text-align: center;
    color: var(--text-color);
    font-weight: 500;
    line-height: 0.75rem;
}

/* 条纹动画效果 */
.article-content .progress-bar-striped {
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 0.5rem 0.5rem;
}

.article-content .progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

.toc::before {
    content: "\f0ca";

    font-family: "Font Awesome 6 Free";
}

@keyframes progress-bar-stripes {
    0% { background-position: 0.5rem 0; }
    100% { background-position: 0 0; }
}