/* Color Palette:
   Gray: #464646 (main text/dark elements)
   Green Set: #2E8B57 (Sea Green - Main Dark Green)
              #3CB371 (Medium Sea Green - Secondary Medium Green)
              #66CDAA (Medium Aquamarine - Tertiary Light-Medium Green)
              #98FB98 (Pale Green - Quaternary Light Green)
              #F0FFF0 (Honeydew / lightest background)
*/

body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #F0FFF0; /* Honeydew - Lightest background */
    color: #464646; /* Gray - Main text color */
    margin: 0;
    padding: 0 5%; 
    line-height: 1.6;
}

header {
    text-align: center;
    padding: 20px 0;
}

header h1 {
    color: #2E8B57; /* Main Dark Green */
    font-size: 2.5em;
    margin-bottom: 5px;
}

header .description {
    color: #3CB371; /* Secondary Medium Green */
    font-size: 1.1em;
}

#introduction {
    background-color: #E6F5E6; /* Slightly darker than F0FFF0 for contrast */
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 5px;
    border-left: 5px solid #2E8B57; /* Main Dark Green */
    font-size: 1.05em;
}

/* --- Passage Section Styles --- */

.passage-section {
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 20px 0;
    border-top: 2px solid #3CB371; /* Secondary Medium Green top line */
}

.passage-section h2 {
    color: #464646;
    font-size: 1.8em;
    margin-bottom: 5px;
}

.passage-section .article-title {
    color: #2E8B57; /* Main Dark Green title */
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 15px;
}

.passage-section .article-description {
    font-size: 1.05em;
    padding-left: 15px;
    border-left: 3px solid #98FB98; /* Quaternary Light Green accent line */
    line-height: 1.7;
}

/* --- Layout for Visualization Blocks (Flexbox for left/right alignment) --- */

.visualization-block {
    margin-bottom: 40px;
    padding: 20px 0;
    border-top: 1px solid #98FB98; /* Quaternary Light Green separator */
}

.topic-header {
    color: #464646; /* Gray */
    font-size: 1.5em;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 2px solid #66CDAA; /* Tertiary Light-Medium Green under-line */
    padding-bottom: 5px;
}

/* 左右排版 (Flexbox) */
.layout-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.image-column, .code-column {
    flex: 1;
    min-width: 45%; 
}

/* --- Image/Plot Area (Left) --- */

.image-box {
    /* 图片框 */
    border: 1px solid #66CDAA; /* Tertiary Light-Medium Green border */
    background-color: white;
    padding: 15px;
    min-height: 300px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.static-plot-placeholder {
    flex-grow: 1; 
    background-color: #F0FFF0; /* Lightest Background */
    border: 1px dashed #3CB371; /* Secondary Medium Green dashed line */
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #464646;
}

/* --- Code Area (Right) --- */

.code-box {
    /* 代码框 (灰色框) */
    border: 1px solid #464646; /* Gray border for the code box */
    background-color: #EBEBEB; /* Light gray background for code area (kept for readability) */
    padding: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); 
}

.code-editor {
    width: 100%;
    min-height: 250px;
    box-sizing: border-box; 
    border: none;
    resize: vertical; 
    font-family: monospace;
    font-size: 0.9em;
    color: #464646;
    background-color: transparent; 
    padding: 0; 
}

/* --- Controls (Below Code) --- */

.controls {
    text-align: right;
    margin-top: 10px;
}

.reload-btn {
    background-color: #2E8B57; /* Main Dark Green */
    color: white;
    border: none;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-family: 'Times New Roman', Times, serif;
}

.reload-btn:hover {
    background-color: #3CB371; /* Secondary Medium Green on hover */
}

/* --- Responsiveness --- */
@media (max-width: 900px) {
    .layout-row {
        flex-direction: column;
    }
    .image-column, .code-column {
        min-width: 100%;
    }
}

.back-btn {
    /* 使用绿色 set 中的 Main Dark Green 作为背景 */
    background-color: #2E8B57; 
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
    font-family: 'Times New Roman', Times, serif;
    display: block; /* 确保按钮独占一行 */
    margin-left: auto;
    margin-right: auto;
    width: fit-content; /* 按钮宽度适配内容 */
}

.back-btn:hover {
    /* 使用 Secondary Medium Green 作为 hover 颜色 */
    background-color: #3CB371; 
}
/* Return to Homepage 区域容器样式 */
.return-home {
    text-align: center; /* 按钮居中 */
    margin: 20px 0; /* 减小垂直间距 */
    padding: 5px 0;
}

/* Return to Homepage 按钮链接样式 - 尺寸减小约一半 */
.home-link {
    /* 字体和颜色 */
    font-family: 'Times New Roman', Times, serif;
    font-size: 1em; /* 从 1.5em 减小到 1em */
    font-weight: bold;
    color: #FFFFFF; /* 初始文字颜色：白色 */
    
    /* 按钮外观 */
    background-color: #004D40; /* 初始背景颜色：深绿色 */
    text-decoration: none; /* 移除下划线 */
    padding: 8px 20px; /* 从 12px 30px 减小到 8px 20px */
    border-radius: 6px; /* 相应减小圆角 */
    display: inline-block;
    border: 2px solid #004D40;
    transition: background-color 0.3s, color 0.3s;
}

/* 悬停 (Hover) 效果 */
.home-link:hover {
    background-color: #E0F2F1; /* 悬停时背景：浅绿色 */
    color: #004D40; /* 悬停时文字：深绿色 */
    border-color: #004D40;
    cursor: pointer;
}
h1 {
    /* 1. 字体：使用优雅的 Didone 衬线字体栈 */
    font-family: "Bodoni", "Didot", "Times New Roman", Times, serif;
    
    /* 2. 字距：增加字母间距（可根据需要调整 0.2em 的值） */
    letter-spacing: 0.12em; 
    
    /* 3. 字重：确保标题醒目 */
    font-weight: 800; 
    font-size: 2.5em;
}