/* 
整体布局使用现代的CSS3技术，包括Flexbox和Grid布局，确保页面在不同设备上都有良好的响应性和适配性。
设置页面背景为线性渐变，从主色调过渡到辅色调，营造未来感和高级质感。
使用box-shadow和text-shadow为元素增加立体感和视觉层次，同时通过关键帧动画和过渡效果增强交互体验。
字体方面，标题使用Montserrat，正文使用Roboto，确保文字清晰易读且风格统一。
导航栏固定在顶部，使用半透明背景，包含下拉菜单，移动端采用隐藏式侧边栏导航。
图片采用圆角和阴影效果，并在悬停时添加放大效果，提升视觉美感。
模块化设计，通过Grid系统将内容分割为不同的块，合理利用留白，确保信息清晰传达。
按钮设计采用点缀色进行强调，悬停时颜色变化和轻微放大，增加点击欲望。
折叠区域采用CSS3的details和summary标签，提供简洁的交互方式，让用户根据需要展开内容。
代码示例部分使用不同的字体和背景色，区分于正文内容，确保代码可读性和美观性。
响应式设计通过媒体查询调整布局，确保在小屏幕设备上内容不拥挤，保持良好的用户体验。
*/

/* 页面全局样式 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #0074D9 70%, #FF851B 25%, #002366 5%);
    color: #ffffff;
    line-height: 1.6;
}

/* 导航栏样式 */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 116, 217, 0.9);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

.navbar li {
    position: relative;
}

.navbar a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: #FF851B;
}

.dropdown {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background: #002366;
    padding: 10px;
    border-radius: 5px;
}

.navbar li:hover .dropdown {
    display: block;
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background: #ffffff;
    transition: all 0.3s ease;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background: #002366;
    padding: 60px 20px;
    transition: right 0.3s ease;
}

.sidebar.active {
    right: 0;
}

.sidebar ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar a {
    color: #ffffff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

.sidebar a:hover {
    color: #FF851B;
}

/* 主内容样式 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 100px 60px 60px 60px;
}

.module {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

.module img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.module img:hover {
    transform: scale(1.05);
}

.module h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    margin-top: 20px;
    color: #FF851B;
}

.module p {
    font-size: 16px;
    color: #e0e0e0;
}

/* 按钮样式 */
.btn {
    background-color: #FF851B;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 20px;
}

.btn:hover {
    background-color: #e68900;
    transform: scale(1.05);
}

/* 折叠区域样式 */
details {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
}

summary {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    cursor: pointer;
}

/* 代码示例部分 */
.code-block {
    background: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin-top: 20px;
}

.code-block code {
    font-family: 'Source Code Pro', monospace;
    color: #d4d4d4;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar ul {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    .container {
        padding: 100px 20px 20px 20px;
    }
}

@media (max-width: 500px) {
    .module {
        padding: 20px;
    }
    .module h2 {
        font-size: 20px;
    }
    .btn {
        width: 100%;
        padding: 15px 0;
        font-size: 14px;
    }
}