/*  全局样式设置，包括页面基础字体、颜色和 box-sizing 模式。
    使用了 CSS 变量来管理主题颜色，方便后期维护和调整。
    body 元素设置了深蓝色背景，白色文字颜色，以及无衬线字体。
    平滑滚动效果通过 `scroll-behavior: smooth;` 实现。
*/
:root {
    --primary-color: #1E1E2F; /* 主背景深蓝色 */
    --secondary-color: #28355A; /* 次要深蓝色 */
    --accent-color: #4C6EF5; /* 电蓝色强调色 */
    --highlight-color: #7B8FFF; /* 亮蓝色高光 */
    --text-color-light: #f0f0f0; /* 浅色文本 */
    --text-color-dark: #333; /* 深色文本（如果需要浅色背景模块） */
    --gradient-start: #2C3E50; /* 渐变起始色 */
    --gradient-end: #0F2027;   /* 渐变结束色 */
    --module-bg: rgba(40, 53, 90, 0.8); /* 模块背景，带有一定透明度 */
    --code-bg: #2E3440;        /* 代码块背景色，Nord Theme Darker */
    --code-text: #D8DEE9;      /* 代码文本色，Nord Theme Snow Storm */
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    line-height: 1.6;
    overflow-x: hidden; /* 防止水平滚动条 */
    -webkit-font-smoothing: antialiased; /* 字体平滑，针对webkit内核浏览器 */
    -moz-osx-font-smoothing: grayscale; /* 字体平滑，针对Firefox */
}

/*  网页通用容器样式，用于限制内容宽度，实现居中对齐。
    使用了 `max-width` 属性限制最大宽度，`margin: 0 auto;` 实现水平居中。
    `padding: 20px;` 设置了内边距，保证内容不紧贴屏幕边缘。
*/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative; /* 为可能出现的绝对定位元素提供定位上下文 */
}

/*  通用标题样式，用于页面中的各级标题。
    使用了 'Orbitron' 字体，使其更具科技感。
    `font-weight: bold;` 加粗字体，`margin-bottom: 1em;` 设置下边距。
    文本阴影效果 `text-shadow` 增强立体感。
*/
h1, h2, h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    margin-bottom: 1em;
    letter-spacing: 0.05em; /* 增加字间距，提升现代感 */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2); /* 轻微文本阴影 */
    color: var(--highlight-color); /* 标题颜色 */
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.6em; }

p {
    margin-bottom: 1.2em;
    font-size: 1.1em;
    color: var(--text-color-light); /* 段落文本颜色 */
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--highlight-color);
}

/*  按钮样式，用于页面中的交互按钮。
    使用了线性渐变背景，无边框，白色文字颜色，以及内边距。
    `border-radius: 5px;` 设置圆角，`cursor: pointer;` 指示可点击。
    `transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;` 添加过渡效果，使hover效果更平滑。
    `box-shadow` 在 hover 状态下添加阴影效果。
*/
button {
    background: linear-gradient(90deg, var(--accent-color), var(--highlight-color));
    border: none;
    padding: 12px 25px;
    color: var(--text-color-light);
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 默认阴影 */
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Hover 状态下阴影加深 */
}

/*  模块化内容区域样式，用于组织页面内容。
    使用了背景色、圆角和内边距，并设置了阴影效果。
    `margin-bottom: 20px;` 设置模块之间的间距。
*/
.module {
    background-color: var(--module-bg);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 模块阴影 */
    overflow: hidden; /* 清除内部浮动，并为内部的绝对定位元素提供裁剪 */
}

.module h2 {
    margin-top: 0; /* 模块标题顶部外边距重置 */
    border-bottom: 2px solid var(--accent-color); /* 标题下划线 */
    padding-bottom: 0.5em;
    margin-bottom: 1.5em; /* 标题与内容之间的距离 */
    display: inline-block; /* 使下划线宽度适应标题文本 */
}

/*  代码块样式，用于展示示例代码。
    使用了等宽字体 `monospace`，背景色和文字颜色来自 Nord Theme Darker 和 Snow Storm。
    内边距和圆角提升视觉效果，`overflow-x: auto;` 添加水平滚动条，以防代码溢出。
    白色边框增强代码块的视觉区分度。
*/
pre {
    background-color: var(--code-bg);
    color: var(--code-text);
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1); /* 代码块边框 */
    white-space: pre-wrap;       /* CSS3 换行 */
    word-wrap: break-word;       /* 兼容旧版本浏览器 */
}

code {
    font-family: 'Courier New', monospace;
    color: var(--code-text);
}

/*  列表样式，用于无序列表和有序列表。
    统一样式，移除默认列表标记的内边距和外边距。
    `padding-left: 20px;` 设置左内边距，使列表内容缩进。
    `list-style-type: disc;` 设置无序列表的标记类型。
*/
ul, ol {
    margin-bottom: 1.2em;
    padding-left: 20px;
}

li {
    margin-bottom: 0.5em;
    color: var(--text-color-light);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

/*  表格样式，用于展示表格数据。
    `width: 100%;` 使表格宽度自适应容器。
    `border-collapse: collapse;` 合并边框，`margin-bottom: 20px;` 设置下边距。
*/
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid var(--secondary-color); /* 表格边框颜色 */
    padding: 10px;
    text-align: left;
}

th {
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    font-weight: bold;
}

/*  页脚样式，位于页面底部。
    设置了小的内边距和文本居中对齐。
    使用了更浅的文本颜色。
*/
footer {
    padding: 20px 0;
    text-align: center;
    font-size: 0.9em;
    color: #999;
    border-top: 1px solid var(--secondary-color); /* 页脚顶部分割线 */
    margin-top: 50px; /* 与主体内容分隔 */
}

/*  响应式设计，针对不同屏幕尺寸调整样式。
    使用了媒体查询 `@media`，针对最大宽度为 768px 和 480px 的屏幕进行样式调整。
    主要调整字体大小、模块内边距和容器内边距，以适应小屏幕设备。
*/
@media (max-width: 768px) {
    body {
        font-size: 16px; /* 基础字体大小在小屏幕上增大 */
    }
    h1 { font-size: 2em; }
    h2 { font-size: 1.7em; }
    h3 { font-size: 1.4em; }
    .container {
        padding: 15px; /* 容器内边距在小屏幕上减小 */
    }
    .module {
        padding: 20px; /* 模块内边距在小屏幕上减小 */
    }
    pre {
        padding: 10px; /* 代码块内边距在小屏幕上减小 */
        font-size: 0.85em; /* 代码字体大小在小屏幕上减小 */
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px; /* 更小屏幕上进一步减小字体大小 */
    }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.3em; }
    .container {
        padding: 10px; /* 容器内边距在更小屏幕上进一步减小 */
    }
    .module {
        padding: 15px; /* 模块内边距在更小屏幕上进一步减小 */
    }
}

/*  装饰性图像样式，例如 Banner 或背景图案。
    `display: block;` 确保图片作为块级元素显示，`width: 100%;` 使图片宽度自适应容器。
    `height: auto;` 保持图片宽高比，`border-radius: 8px;` 设置圆角。
    `margin-bottom: 20px;` 设置图片下方的间距。
    `box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);` 为图片添加阴影效果。
*/
.decorative-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    object-fit: cover; /* 确保图片填充容器，并保持比例 */
}

/*  使用渐变叠加层，增加图片视觉层次感。
    `.image-overlay` 类可以与 `.decorative-image` 结合使用，
    通过绝对定位和渐变背景，在图片上方创建一层视觉叠加效果。
    可以用于创建更丰富的视觉效果，例如为图片添加色彩滤镜或纹理。
*/
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)); /* 渐变叠加层 */
    border-radius: 8px;
}

/*  辅助类，用于添加外边距。
    `.mt-large`, `.mt-medium`, `.mt-small` 提供不同大小的上外边距，
    方便在HTML中快速调整元素间距。
*/
.mt-large { margin-top: 50px; }
.mt-medium { margin-top: 30px; }
.mt-small { margin-top: 15px; }

/*  辅助类，用于文本对齐。
    `.text-center` 类用于使文本居中对齐。
*/
.text-center { text-align: center; }

/*  模块标题特殊样式，用于突出模块标题。
    `.module-title` 类可以应用于模块标题，
    提供更大的字体、更强的颜色对比和额外的底部边距。
    可以用于强调关键模块的标题，吸引用户注意。
*/
.module-title {
    font-size: 2.2em;
    color: var(--highlight-color);
    margin-bottom: 2em;
    text-align: center;
    text-transform: uppercase; /* 标题文字转换为大写 */
    letter-spacing: 0.1em; /* 增加标题字间距 */
    border-bottom: 3px solid var(--accent-color); /* 更粗的标题下划线 */
    padding-bottom: 0.7em;
    display: inline-block; /* 使下划线适应标题宽度 */
}

/*  代码块容器样式，用于包裹代码块，并提供额外样式。
    `.code-container` 类可以用于包裹 `<pre>` 代码块，
    可以添加边框、背景色或阴影等额外样式，以进一步突出代码块。
    例如，可以添加更明显的边框或不同的背景色，以区分代码块与页面其他内容。
*/
.code-container {
    border: 1px solid var(--accent-color); /* 代码容器边框 */
    border-radius: 8px;
    padding: 10px;
    background-color: rgba(46, 52, 64, 0.9); /* 略微不同的代码容器背景色 */
    margin-bottom: 20px;
    overflow: hidden; /* 清除内部浮动 */
}

/*  强调文本样式，用于突出显示重要文本。
    `.emphasized-text` 类可以用于突出显示段落中的关键词或短语，
    通过改变颜色、加粗或添加背景色等方式，吸引用户注意。
    例如，可以使用亮色或强调色来突出显示关键词。
*/
.emphasized-text {
    color: var(--highlight-color);
    font-weight: bold;
    /* 可以添加背景色或下划线等更多样式 */
}

/*  链接特殊样式，用于突出显示链接。
    `.special-link` 类可以用于突出显示重要链接，
    例如主要导航链接或行动号召按钮中的链接。
    可以通过改变颜色、添加边框或背景色等方式，使其更醒目。
*/
.special-link {
    color: var(--highlight-color);
    font-weight: bold;
    text-decoration: underline; /* 可以添加下划线或其他装饰 */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* 平滑过渡效果 */
}

.special-link:hover {
    color: var(--text-color-light);
    text-decoration: none; /* 鼠标悬停时移除下划线 */
}

/*  列表项特殊样式，用于突出显示列表中的重要项。
    `.special-list-item` 类可以用于突出显示列表中的特定项，
    例如重要提示或步骤。
    可以通过改变颜色、添加图标或背景色等方式，使其更醒目。
*/
.special-list-item {
    color: var(--highlight-color);
    font-weight: bold;
    list-style-type: square; /* 可以更改列表标记类型 */
    /* 可以添加背景色或边框等更多样式 */
}

/*  响应式图片样式，确保图片在不同屏幕尺寸下都能良好显示。
    `.responsive-image` 类可以应用于图片，
    `max-width: 100%;` 和 `height: auto;` 确保图片不会超出其容器，并保持宽高比。
    `display: block;` 移除图片底部的额外空间。
*/
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}