/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
@media (prefers-color-scheme: dark) {
    .markdown-body {
        /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
        color-scheme: dark;
    }
}
/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
@media (prefers-color-scheme: light) {
    // https://verytoolz.com/blog/03bfb3598f/
    .markdown-body {
        /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
        color-scheme: light;
        /* 定义CSS自定义属性，用于主题色彩管理 */
        --color-fg-default: #24292f; // 文本色-默认 - 主要文本颜色
        --color-fg-muted: #57606a; // 文本色-柔和 - 次要文本颜色
        --color-fg-subtle: #6e7781; // 文本色-微妙 - 最淡的文本颜色
        --color-canvas-default: #ffffff; // 底色-默认 - 主要背景颜色
        --color-canvas-subtle: #f6f8fa; // 底色-微妙 - 次要背景颜色
        --color-border-default: #d0d7de; // 边框色-默认 - 主要边框颜色
        --color-border-muted: hsla(210, 18%, 87%, 1); // 边框色-柔和 - 次要边框颜色
        --color-neutral-muted: rgba(175, 184, 193, 0.2); // 边框色-中性 - 中性边框颜色
        --color-accent-fg: #0969da; // 文本强调色 - 强调文本颜色
        --color-accent-emphasis: #0969da; // 背景强调色 - 强调背景颜色
        --color-attention-subtle: #fff8c5; // 背景注意色 - 注意提示背景色
        --color-danger-fg: #cf222e; // 文本危险色 - 危险/错误文本颜色
        --color-mark-default: rgb(255, 255, 0); // mark 默认色 - 标记默认背景色
        --color-mark-fg: rgb(255, 187, 0); // mark 强调色 - 标记强调背景色
    }
}

/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
.markdown-body {
    /* 防止iOS Safari自动调整文本大小 */
    -webkit-text-size-adjust: 100%;
    /* 防止IE自动调整文本大小 */
    -ms-text-size-adjust: 100%;
    /* 优化文本渲染质量，提升可读性 */
    text-rendering: optimizelegibility;
    /* 重置外边距为0 */
    margin: 0;
    /* 允许长单词在必要时换行，防止溢出 */
    word-wrap: break-word;
    /* 使用CSS变量设置文本颜色 */
    color: var(--color-fg-muted);
    /* 伪元素before - 用于清除浮动 */
    &::before {
        /* 设置为表格显示模式，用于清除浮动 */
        display: table;
        /* 空内容，仅用于布局 */
        content: "";
    }
    /* 伪元素after - 用于清除浮动 */
    &::after {
        /* 设置为表格显示模式，用于清除浮动 */
        display: table;
        /* 清除左右浮动 */
        clear: both;
        /* 空内容，仅用于布局 */
        content: "";
    }
    /* 第一个子元素 - 移除顶部外边距 */
    > *:first-child {
        /* 强制移除顶部外边距，避免不必要的空白 */
        margin-top: 0 !important;
    }
    /* 最后一个子元素 - 移除底部外边距 */
    > *:last-child {
        /* 强制移除底部外边距，避免不必要的空白 */
        margin-bottom: 0 !important;
    }
    /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
    p,
    blockquote,
    ul,
    ol,
    dl,
    table,
    hr,
    form,
    pre,
    details {
        /* 移除顶部外边距，避免重复间距 */
        margin-top: 0;
        /* 设置底部外边距为1em，保持适当间距 */
        margin-bottom: 1em;
    }
    /* 引用块内部元素间距处理 */
    blockquote {
        /* 引用块内第一个子元素 - 移除顶部外边距 */
        & > :first-child {
            margin-top: 0;
        }
        /* 引用块内最后一个子元素 - 移除底部外边距 */
        & > :last-child {
            margin-bottom: 0;
        }
    }
    /* 统一显示成块状元素 - 确保这些元素独占一行 */
    details,
    figcaption,
    figure {
        /* 设置为块级元素，独占一行显示 */
        display: block;
    }
    /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
    audio,
    canvas,
    video {
        /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
        display: inline-block;
    }
    /* 按钮内部间距统一 - 移除Firefox默认内边距 */
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        /* 移除Firefox浏览器按钮和输入框的内部内边距 */
        padding: 0;
        /* 移除Firefox浏览器按钮和输入框的内部边框 */
        border: 0;
    }
    /* 定义元素显示为斜体 - 术语定义样式 */
    dfn {
        /* 设置字体为斜体，用于术语定义 */
        font-style: italic;
    }
    /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
    table {
        /* 合并表格边框，相邻单元格边框合并为一条 */
        border-collapse: collapse;
        /* 设置表格单元格间距为0 */
        border-spacing: 0;
        /* 设置为块级元素，可以设置宽高 */
        display: block;
        /* 宽度根据内容自适应 */
        width: max-content;
        /* 最大宽度不超过父容器 */
        max-width: 100%;
        /* 内容溢出时显示滚动条 */
        overflow: auto;
    }
    /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
    [draggable] {
        /* 设置鼠标悬停时显示移动光标 */
        cursor: move;
    }
    /* 加粗元素 - 粗体文本样式 */
    b,
    strong {
        /* 设置字体粗细，使用CSS变量或默认600 */
        font-weight: var(--base-text-weight-semibold, 600);
    }
    /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
    abbr,
    acronym {
        /* 移除底部边框 */
        border-bottom: none;
        /* 设置字体变体为正常 */
        font-variant: normal;
        /* 设置虚线下划线装饰 */
        text-decoration: underline dotted;
    }
    /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
    abbr {
        /* 设置鼠标悬停时显示帮助光标 */
        cursor: help;
    }
    /* 一致的 del 样式 - 删除线文本样式 */
    del {
        /* 设置文本装饰为删除线 */
        text-decoration: line-through;
    }
    /* a标签去除下划线 - 链接样式处理 */
    a {
        /* 默认移除下划线，保持页面简洁 */
        text-decoration: none;
        /* 没有href属性的链接样式 */
        &:not([href]) {
            /* 继承父元素颜色 */
            color: inherit;
            /* 移除下划线装饰 */
            text-decoration: none;
        }
        /* 鼠标悬停时显示下划线 */
        &:hover {
            text-decoration: underline;
        }
    }
    /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
    ins {
        /* 移除下划线装饰，保持页面简洁 */
        text-decoration: none;
    }
    /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
 * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
 * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
 * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
 * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
 */
    u,
    .typo-u {
        /* 设置文本装饰为下划线，用于专名号显示 */
        text-decoration: underline;
    }
    /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
    [hidden] {
        /* 强制隐藏元素，优先级最高 */
        display: none !important;
    }
    /* 伸缩框显示为列表元素 - 详情框摘要样式 */
    summary {
        /* 设置为列表项显示，显示为可点击的列表项 */
        display: list-item;
    }
    /* 引用元素前后内容 - 移除默认引号 */
    q:before,
    q:after {
        /* 移除引用元素前后的默认引号内容 */
        content: "";
    }
    /* 表格标题和表头文本对齐 - 默认左对齐 */
    caption,
    th {
        /* 设置文本左对齐 */
        text-align: left;
    }
    /* 居中对齐的表格标题和表头 */
    caption[align="center"],
    th[align="center"] {
        /* 设置文本居中对齐 */
        text-align: center;
    }
    /* 特定元素字体粗细统一 - 地址、标题、引用等 */
    address,
    caption,
    cite,
    em,
    th,
    var {
        /* 设置字体粗细为正常（400） */
        font-weight: 400;
    }
    /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
    mark {
        /* 设置标记背景色，使用CSS变量 */
        background: var(--color-mark-default);
        // background: #fffdd1; // 备用背景色
        // border-bottom: 1px solid #ffedce; // 备用底部边框
        /* 设置内边距，增加标记的可读性 */
        padding: 2px;

        /* 激活状态的标记样式 */
        &.active {
            /* 激活时使用强调色背景 */
            background: var(--color-mark-fg);
        }
        // margin: 0 5px; // 备用外边距
    }
    /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
    h1 {
        /* 设置上下外边距为0.67em */
        margin: 0.67em 0;
        /* 设置字体粗细，使用CSS变量或默认600 */
        font-weight: var(--base-text-weight-semibold, 600);
        /* 设置字体大小为2倍基础大小 */
        font-size: 2em;
    }
    /* small字体缩小 - 小字体文本样式 */
    small {
        /* 设置字体大小为父元素的90% */
        font-size: 90%;
    }
    /* 上下标显示 - 下标和上标文本样式 */
    sub,
    sup {
        /* 设置字体大小为75% */
        font-size: 75%;
        /* 设置行高为0，避免影响行间距 */
        line-height: 0;
        /* 设置相对定位，用于精确控制位置 */
        position: relative;
        /* 设置垂直对齐为基线 */
        vertical-align: baseline;
    }
    /* 上下标内链接样式 */
    sub a,
    sup a {
        /* 设置左右内边距为0.1em */
        padding: 0 0.1em;
    }
    /* 下标位置调整 */
    sub {
        /* 向下偏移0.25em */
        bottom: -0.25em;
    }
    /* 上标位置调整 */
    sup {
        /* 向上偏移0.5em */
        top: -0.5em;
    }
    /* 代码相关的字体大小统一 - 代码元素字体样式 */
    code,
    kbd,
    pre,
    samp,
    pre tt {
        /* 设置字体为等宽字体，便于代码阅读 */
        font-family: monospace;
        /* 设置字体大小为1em，保持一致性 */
        font-size: 1em;
    }
    /* 去除默认边框 - 移除字段集和图片的默认边框 */
    fieldset,
    img {
        /* 移除边框 */
        border: 0;
    }
    /* 图片初始化样式 - 图片元素基础样式 */
    img {
        /* 设置边框样式为无 */
        border-style: none;
        /* 设置最大宽度为100%，防止溢出 */
        max-width: 100%;
        /* 设置盒模型为内容盒模型 */
        box-sizing: content-box;
        /* 设置左右外边距为自动，实现居中 */
        margin: 0 auto;
        /* 设置背景色，使用CSS变量 */
        background-color: var(--color-canvas-default);
    }
    /* 可附标题内容元素的间距 - 图片容器样式 */
    figure {
        /* 设置上下外边距为1em，左右外边距为40px */
        margin: 1em 40px;
    }
    /* 间隔线 - 水平分隔线样式 */
    /* 一致化 horizontal rule - 统一水平分隔线样式 */
    hr {
        /* 设置盒模型为内容盒模型 */
        box-sizing: content-box;
        /* 隐藏溢出内容 */
        overflow: hidden;
        /* 设置背景为透明 */
        background: transparent;
        /* 设置底部边框，使用CSS变量 */
        border-bottom: 1px solid var(--color-border-muted);
        /* 设置高度为0.25em */
        height: 0.25em;
        /* 移除内边距 */
        padding: 0;
        /* 设置上下外边距为24px */
        margin: 24px 0;
        /* 设置背景色，使用CSS变量 */
        background-color: var(--color-border-default);
        /* 移除边框 */
        border: 0;
        /* 伪元素before - 用于清除浮动 */
        &::before {
            /* 设置为表格显示模式，用于清除浮动 */
            display: table;
            /* 空内容，仅用于布局 */
            content: "";
        }
        /* 伪元素after - 用于清除浮动 */
        &::after {
            /* 设置为表格显示模式，用于清除浮动 */
            display: table;
            /* 清除左右浮动 */
            clear: both;
            /* 空内容，仅用于布局 */
            content: "";
        }
    }

    /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
    button,
    input,
    select,
    textarea {
        /* 继承父元素的字体样式 */
        font: inherit;
        /* 移除外边距 */
        margin: 0;
        /* 设置溢出为可见 */
        overflow: visible;
        /* 继承父元素的字体族 */
        font-family: inherit;
        /* 继承父元素的字体大小 */
        font-size: inherit;
        /* 继承父元素的行高 */
        line-height: inherit;
    }
    /* 外观显示为按钮 - 按钮类型输入框样式 */
    [type="button"],
    [type="reset"],
    [type="submit"] {
        /* 设置WebKit浏览器按钮外观 */
        -webkit-appearance: button;
        /* 设置标准按钮外观，提高兼容性 */
        appearance: button;
    }
    /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
    [type="checkbox"],
    [type="radio"] {
        /* 设置盒模型为边框盒模型 */
        box-sizing: border-box;
        /* 移除内边距 */
        padding: 0;
    }
    /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
    [type="number"]::-webkit-inner-spin-button,
    [type="number"]::-webkit-outer-spin-button {
        /* 设置高度为自动，适应内容 */
        height: auto;
    }
    /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
    [type="search"]::-webkit-search-cancel-button,
    [type="search"]::-webkit-search-decoration {
        /* 移除WebKit浏览器搜索框默认样式 */
        -webkit-appearance: none;
    }
    /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
    ::-webkit-input-placeholder {
        /* 继承父元素颜色 */
        color: inherit;
        /* 设置透明度为0.54，创建半透明效果 */
        opacity: 0.54;
    }
    /* 文件选择按钮样式统一 - 文件上传按钮样式 */
    ::-webkit-file-upload-button {
        /* 设置WebKit浏览器按钮外观 */
        -webkit-appearance: button;
        /* 继承父元素字体样式 */
        font: inherit;
    }
    /* 占位符显示统一 - 通用占位符样式 */
    ::placeholder {
        /* 设置占位符颜色，使用CSS变量 */
        color: var(--color-fg-subtle);
        /* 设置完全不透明 */
        opacity: 1;
    }
    /* table内的td,th去除留白 - 表格单元格样式 */
    td,
    th {
        /* 移除表格单元格内边距 */
        padding: 0;
    }
    /* 伸缩框鼠标显示 - 详情框摘要样式 */
    details summary {
        /* 设置鼠标悬停时显示手型光标 */
        cursor: pointer;
    }

    /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
    details:not([open]) > *:not(summary) {
        /* 强制隐藏未展开详情框内的非摘要内容 */
        display: none !important;
    }
    /* 按键显示 - 键盘按键样式 */
    kbd {
        /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
        display: inline-block;
        /* 设置内边距为3px上下，5px左右 */
        padding: 3px 5px;
        /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
        font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
        /* 设置行高为10px */
        line-height: 10px;
        /* 设置文本颜色，使用CSS变量 */
        color: var(--color-fg-default);
        /* 设置垂直对齐为中间 */
        vertical-align: middle;
        /* 设置背景色，使用CSS变量 */
        background-color: var(--color-canvas-subtle);
        /* 设置边框为1px实线，使用CSS变量 */
        border: solid 1px var(--color-neutral-muted);
        /* 设置底部边框颜色，使用CSS变量 */
        border-bottom-color: var(--color-neutral-muted);
        /* 设置圆角为6px */
        border-radius: 6px;
        /* 设置内阴影，创建按键凹陷效果 */
        box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
    }
    /* 清除浮动工具类 - 清除浮动伪元素 */
    .clearfix:before,
    .clearfix:after {
        /* 空内容，仅用于布局 */
        content: "";
        /* 设置为表格显示模式，用于清除浮动 */
        display: table;
    }
    /* 清除浮动工具类 - after伪元素 */
    .clearfix:after {
        /* 清除左右浮动 */
        clear: both;
    }
    /* 清除浮动工具类 - 主容器 */
    .clearfix {
        /* 触发IE的hasLayout属性，用于清除浮动 */
        zoom: 1;
    }
    /* 强制文本换行 - 文本换行工具类 */
    .textwrap,
    .textwrap td,
    .textwrap th {
        /* 允许长单词在必要时换行，防止溢出 */
        word-wrap: break-word;
        /* 强制在任意字符间换行，防止溢出 */
        word-break: break-all;
    }
    /* 文本换行表格 - 固定表格布局 */
    .textwrap-table {
        /* 设置表格布局为固定，提高渲染性能 */
        table-layout: fixed;
    }
    /* 无序列表样式 - 项目符号列表 */
    ul {
        /* 重置左边距为0 */
        margin-left: 0;
        /* 重置左内边距为0 */
        padding-left: 0;
        /* 设置左边距为2em，创建缩进效果 */
        margin-left: 2em;
        /* 设置列表样式为实心圆点 */
        list-style: disc;
    }
    /* 有序列表样式 - 数字列表 */
    ol {
        /* 重置左边距为0 */
        margin-left: 0;
        /* 重置左内边距为0 */
        padding-left: 0;
        /* 设置左边距为2em，创建缩进效果 */
        margin-left: 2em;
        /* 设置列表样式为数字 */
        list-style: decimal;
        /* 列表项样式 */
        li {
            /* 设置左内边距为0.4em，增加数字与文本间距 */
            padding-left: 0.4em;
        }
    }
    /* 相邻列表项间距 - 列表项之间的间距 */
    li + li {
        /* 设置顶部外边距为0.25em，增加列表项间距 */
        margin-top: 0.25em;
    }
    /* 嵌套列表样式 - 列表项内的子列表 */
    li {
        /* 无序子列表样式 */
        ul {
            /* 设置底部外边距为0.8em */
            margin-bottom: 0.8em;
            /* 设置左边距为2em，创建嵌套缩进 */
            margin-left: 2em;
            /* 设置列表样式为空心圆点 */
            list-style: circle;
            /* 三级无序列表样式 */
            li {
                ul {
                    /* 设置列表样式为实心方块 */
                    list-style: square;
                }
            }
        }
        /* 有序子列表样式 */
        ol {
            /* 设置底部外边距为0.8em */
            margin-bottom: 0.8em;
            /* 设置左边距为2em，创建嵌套缩进 */
            margin-left: 2em;
        }
    }
    /* 任务列表项样式 - 待办事项列表项 */
    .task-list-item {
        /* 移除列表样式，不显示项目符号 */
        list-style-type: none;
        /* 设置相对定位，用于绝对定位子元素 */
        position: relative;
        /* 第一个子输入框样式 */
        > input {
            /* 第一个子元素右边距 */
            &:nth-child(1) {
                /* 设置右边距为6px */
                margin-right: 6px;
            }
        }
        /* 标签样式 */
        label {
            /* 设置字体粗细为正常（400） */
            font-weight: 400;
        }
        /* 拖拽手柄样式 */
        .handle {
            /* 隐藏拖拽手柄 */
            display: none;
        }
        /* 复选框样式 */
        input[type="checkbox"] {
            /* 设置宽度为0.9em */
            width: 0.9em;
            /* 设置高度为0.9em */
            height: 0.9em;
            /* 设置绝对定位 */
            position: absolute;
            /* 向左偏移1.3em */
            left: -1.3em;
            /* 向下偏移0.35em */
            top: 0.35em;
        }
    }
    /* 启用的任务列表项样式 */
    .task-list-item.enabled {
        /* 标签样式 */
        label {
            /* 设置鼠标悬停时显示手型光标 */
            cursor: pointer;
        }
    }
    /* 相邻任务列表项间距 */
    .task-list-item + .task-list-item {
        /* 设置顶部外边距为3px */
        margin-top: 3px;
    }
    /* 包含任务列表的容器样式 */
    .contains-task-list {
        // margin-left: 0.6em; // 备用左边距
        /* 从右到左文本方向样式 */
        &:dir(rtl) {
            .task-list-item {
                input[type="checkbox"] {
                    /* 设置复选框外边距，适配RTL布局 */
                    margin: 0 -1.6em 0.25em 0.2em;
                }
            }
        }
    }

    /* 目录样式 - 表格目录容器 */
    .toc {
        /* 重置左边距为0 */
        margin-left: 0;
    }

    /* 定义列表样式 - 描述列表容器 */
    dl {
        /* 设置为块级元素 */
        display: block;
        /* 设置块级起始外边距为1em */
        margin-block-start: 1em;
        /* 设置块级结束外边距为1em */
        margin-block-end: 1em;
        /* 设置内联起始外边距为0px */
        margin-inline-start: 0px;
        /* 设置内联结束外边距为0px */
        margin-inline-end: 0px;
        /* 设置Unicode双向算法为隔离 */
        unicode-bidi: isolate;
        /* 定义术语样式 */
        dt {
            /* 设置为块级元素 */
            display: block;
            /* 设置Unicode双向算法为隔离 */
            unicode-bidi: isolate;
        }
        /* 定义描述样式 */
        dd {
            /* 设置为块级元素 */
            display: block;
            /* 设置内联起始外边距为40px，创建缩进效果 */
            margin-inline-start: 40px;
            /* 设置Unicode双向算法为隔离 */
            unicode-bidi: isolate;
        }
    }
}