@font-face{
    font-family:Consolas;
    /*等宽字体*/
    src:url('Consolas.ttf');
}
@font-face{
    font-family:LseedSans;
    src:url('Rg_sans.ttf');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f5f7fa; /* 浅灰色背景 */
    overflow-x: hidden; /* 防止水平滚动 */
    position: relative; /* 为 .right 的绝对定位提供参考 */
}

/* --- 左侧边栏 (.left) 保持不变 --- */
.left-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: calc(25vw); /* 使用相对宽度计算：侧边栏宽度 + 按钮区域宽度 */
    max-width: calc(350px); /* 对应侧边栏最大宽度 */
    min-width: calc(180px); /* 对应侧边栏最小宽度 */
    z-index: 999;
}

.left {
    position: relative;
    height: 100%;
    width: 25vw; /* 使用视口宽度的 20% 作为基础宽度 */
    max-width: 350px; /* 当屏幕很大时，宽度不超过 350px */
    min-width: 180px; /* 当屏幕较小时，宽度至少为 180px */
    /* 深色渐变背景 */
    /* background: linear-gradient(215deg, #2c3e5017, #1ec6c053);  */
    background: transparent;
    /*color: #ecf0f1;*/
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);

    /* 使用backdrop-filter大法设置毛玻璃模糊 */
    backdrop-filter: blur(2px) saturate(180%);
    -webkit-backdrop-filter: blur(2px) saturate(180%);
}
.sideul li{
    text-align: right;
    padding-right: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 26px;
    color: #333;
    text-decoration: none;
}
.sideul li:hover{
    color:rgb(0, 85, 85);
    background-color: #d3e6f94f;
}
.left.collapsed {
    transform: translateX(calc(-100%)); /* 折叠时只显示按钮条 */
}

/*.toggle-btn {*/
/*    position: absolute;*/
    /*top: 0px;*/
    /* 放置在顶部 */
    /*right: -40px; */
    /* 位于侧边栏外 */
/*    width: 40px;*/
/*    height: 50px;*/
    /*background: #ecf0f13e;*/
    /* 按钮背景色 */
/*    border: none;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    border-radius: 0 4px 4px 0;*/
/*    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);*/
/*    transition: background 0.2s;*/
    /*z-index: 1000;*/
    /* 确保按钮在内容之上 */
/*}*/

/*.toggle-btn:hover {*/
    /*color: #3d566e;*/
    /* 悬停效果 */
/*}*/

/*.toggle-btn::before {*/
    /*content: '«'; */
    /* 箭头字符 */
/*    font-size: 20px;*/
/*    color: #34495e;*/
/*    transition: transform 0.3s;*/
/*}*/

/*.left.collapsed .toggle-btn::before {*/
    /*transform: rotate(180deg); */
    /* 箭头方向翻转 */
/*}*/

.left-header {
    padding: 20px;
    /* border-bottom: 1px solid rgba(5, 53, 16, 0.3); */
    flex-shrink: 0; /* 防止头部被压缩 */
    text-align:right;
    background: rgba(5, 53, 16, 0.3);
    text-shadow: 1px 1px 1px black;
    color: #f3f3f3;
    /* filter: invert(100%); */
}

.left-scrollable-content {
    flex-grow: 1; /* 占据剩余所有空间 */
    overflow-y: auto; /* 内容溢出时可滚动 */
    padding: 20px; /* 内边距 */
}

.left-scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.left-scrollable-content::-webkit-scrollbar-track {
    background: transparent;
}

.left-scrollable-content::-webkit-scrollbar-thumb {
    background: rgba(236, 240, 241, 0.3);
    border-radius: 4px;
    transition: background 0.2s;
}

.left-scrollable-content::-webkit-scrollbar-thumb:hover {
    background: rgba(236, 240, 241, 0.5);
}
/* --- 左侧边栏结束 --- */

/* --- 新增：右侧内容区 (.right) --- */
.right {
    /* 使用绝对定位，相对于 body */
    position: absolute;
    top: 0;
    left: calc(25vw ); /* 起始位置在 .left 展开时的右边 */
    width: calc(100% - (25vw)); /* 宽度占满剩余空间 */
    height: 100vh; /* 高度撑满视口 */
    /* max-width 和 min-width 确保在 .left 收起时，.right 也能占满 */
    /* max-width: calc(100% - (350px + 40px)); */
    /* min-width: calc(100% - (500px + 40px)); */
    margin-left: 0;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* 添加过渡动画 */
    overflow-y: auto; /* 如果内容过高，允许滚动 */
}

/* 当 .left 收起时，调整 .right 的位置和宽度 */
.left.collapsed ~ .right {
    left: 40px; /* 起始位置在 .left 收起时按钮的右边 */
    width: calc(100% - 40px); /* 宽度占满剩余空间 */
}

/* --- 您提供的 .main 样式 --- */
.main {
    /* 右栏div框 */
    width: 90%; /* 您的原始宽度 */
    
    margin-top: 2%; /* 您的原始上边距 */
    /* margin-right: 0%; -- 通常不需要设置，除非有特殊需求 */
    margin-bottom: auto; /* 您的原始下边距 */
    margin-left: 2%; /* 您的原始左边距 */
    
    padding: 0 3%; /* 您的原始内边距 */
    border-radius: 10px; /* 您的原始圆角 */
    /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 您的原始阴影 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    /* animation: fade 1s 1; -- 您可以保留动画，需要定义 @keyframes fade */
    background-color: transparent;
    backdrop-filter: blur(2px) saturate(180%);
    -webkit-backdrop-filter: blur(2px) saturate(180%);
    line-height: 1.8; /* 增加行间距，改善阅读舒适度 */
    letter-spacing: 0.5px; /* 增加字间距 */
    word-spacing: 1px; /* 增加词间距 (对中文影响较小，但对英文有帮助) */
    font-size: 16px; /* 可选：明确设置字体大小，确保一致性 */
}
.essay{
    content-visibility: auto;
    contain-intrinsic-size: 100px 1000px; /* 预估尺寸 */
}
.essay p {
    margin-bottom: 1.2em; /* 在段落之间增加更多空间 */
}

.essay h1 {
    margin-bottom: 0.8em; /* 在标题和第一个段落之间增加空间 */
}