/* Global Reset & Base Styles */
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #1f1f1f;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    overflow: hidden; /* Prevent body scroll */
    color: #ccc;
}

/* Container */
:root { /* Define CSS variables */
     --expanded-width: 100%;
     --card-margin-percent: 1;
     --el-width: 19%; /* Default, calculated by JS */
     --el-translate-x: 0%;
     --el-origin-x: 50%;
     --el-inner-delay: 0s;
     --el-bg-translate-x: 0%;
     --el-bg-image: none;
}
.cont {
    position: relative;
    overflow: hidden;
    height: 100vh;
    padding: 80px 70px; /* 恢复原始padding */
}
.cont__inner {
    position: relative;
    height: 100%;
}


/* Element Base */
.el {
    position: absolute;
    top: 0;
    height: 100%;
    background: #252525;
    box-shadow: 0 10px 35px rgba(0,0,0,0.4);
    border-radius: 8px;
    overflow: visible; /* Allow index to overflow visually */
    will-change: left, transform, width, opacity;

    /* CSS Variable Driven */
    left: var(--el-translate-x, 0%);
    width: var(--el-width, 19%);
    transform: translate3d(0, 0, 0);
    transform-origin: var(--el-origin-x, 50%) 50%;

    /* Transitions (Returning to inactive state) */
    transition: left 0.6s 0.7s,
                width 0.7s,
                opacity 0.6s 0.7s,
                transform 0.6s 0.7s,
                z-index 0s 1.3s;
}
/* Add cursor only when card is interactable */
.el:not(.s--active) {
    cursor: pointer;
}


/* Element Inner structure */
.el__overflow {
    overflow: hidden;
    position: relative;
    height: 100%;
    border-radius: 8px; /* Clip inner content to card bounds */
}
.el__inner {
    overflow: hidden;
    position: relative;
    height: 100%;
    background: #252525;
    /* Initial slide-up animation */
    transition: transform 1s var(--el-inner-delay, 0s);
}
.cont.s--inactive .el__inner {
     transform: translate3d(0, 100%, 0); /* Start below viewport */
}

/* Background Image & Overlay */
.el__bg {
    position: relative; /* For counter-transform */
    width: 100vw; /* Use viewport width for seamless background pan */
    height: 100%;
    will-change: transform;
    /* Initial position set by variable */
    transform: translate3d(var(--el-bg-translate-x, 0%), 0, 0);
    /* Transition for returning FROM active state */
    transition: transform 0.6s 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.el__bg:before { /* The image itself */
    content: "";
    position: absolute;
    left: 0;
    top: -5%; /* Slightly larger to avoid edge gaps on scale */
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center center;
    background-image: var(--el-bg-image, none);
    z-index: 0;
    /* Transition for initial slide-up */
    transition: transform 1s var(--el-inner-delay, 0s);
    transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
     transform: translate3d(0, -100%, 0) scale(1.2); /* Start above and scaled */
}
.el.s--active .el__bg:before {
    /* Scale up when active, delayed */
    transform: scale(1.1);
    transition: transform 0.8s 0.6s ease; /* Match animation timing */
    will-change: transform;
}
.el__bg:after { /* Dimming overlay on hover (inactive cards) */
    content: "";
    z-index: 1;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: opacity;
}
/* Show overlay on inactive cards when hovering container, hide on the hovered card */
.cont__inner:hover .el:not(.s--active) .el__bg:after {
    opacity: 1;
}
.cont__inner:hover .el:not(.s--active):hover .el__bg:after {
    opacity: 0;
}
/* Ensure overlay is hidden on active card */
.el.s--active .el__bg:after {
    opacity: 0 !important;
    transition: none;
}


/* Preview Content (Heading) */
.el__preview-cont {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transition: opacity 0.5s, transform 0.5s;
    text-align: center;
    padding: 15px;
    will-change: opacity, transform;
    pointer-events: none; /* Doesn't block clicks on card */
}
/* Initial slide-up state */
.cont.s--inactive .el__preview-cont {
    opacity: 0;
    transform: translateY(10px);
}
/* Fade out when a card is active or hovering over another card */
.cont.s--el-active .el__preview-cont,
.cont__inner:hover .el:not(:hover):not(.s--active) .el__preview-cont {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.el__heading {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    word-break: break-word;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}


/* Detail Content Area (el__content) */
.el__content {
    z-index: -1; /* Below preview initially */
    position: absolute; /* Needed for absolute positioning of page-nav */
    left: 0; top: 0; width: 100%; height: 100%;
    /* Padding: top left/right bottom(for nav) */
    padding: 40px 60px 80px 60px; /* Ensure bottom padding accommodates fixed nav */
    opacity: 0;
    pointer-events: none; /* Initially not interactive */
    transition: opacity 0.5s; /* Fade out transition when closing */

    /* Enable scrolling for the entire content area */
    overflow-y: auto;
    overflow-x: hidden;

    color: #eee;
    background: rgba(30, 30, 30, 0.92); /* Semi-transparent background */
    backdrop-filter: blur(10px) saturate(120%); /* Glass effect */
    will-change: opacity;

    /* --- HIDE SCROLLBAR for el__content --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge (Older) */
}
/* Webkit scrollbar hiding */
.el__content::-webkit-scrollbar {
    display: none;
}
/* Make content visible and interactive when card is active */
.el.s--active .el__content {
    z-index: 4; /* Above index/preview */
    opacity: 1;
    pointer-events: auto;
    /* 延迟淡入以匹配动画 - 在卡片展开后开始300ms淡入 */
    transition: opacity 0.2s 0.1s;
}



/* Page Display Area within el__content */
.page-display-area {
    /* Holds the blocks for the *current* page */
    min-height: 100px; /* Minimum height */
    /* Removed height: 100% as .el__content is the main scroll container */
    overflow-y: visible; /* Content flows naturally; scrolling handled by parent .el__content */
    overflow-x: hidden;
    /* Add padding at the bottom of the content itself, before the nav */
    padding-bottom: 20px; /* Space between last block and potential nav area start */

    /* --- SCROLLBAR hiding rules (might be redundant if parent handles it) --- */
    /* scrollbar-width: none; */
    /* -ms-overflow-style: none; */
}
/* .page-display-area::-webkit-scrollbar {
    display: none;
} */


/* --- FIXED PAGINATION STYLES --- */
.page-nav {
    position: absolute;   /* 关键：绝对定位 */
    bottom: 15px;         /* 距离父元素底部距离 */
    left: 0;
    width: 100%;
    padding: 10px 60px; /* 调整内边距以匹配内容区域 */
    z-index: 10;
    background: linear-gradient(to top, rgba(30, 30, 30, 0.95) 10%, rgba(30, 30, 30, 0.8) 60%, transparent); /* 背景渐变 */
    pointer-events: none; /* 容器穿透 */
    opacity: 1; /* 默认隐藏 */
    transition: opacity 0.3s ease-in-out; /* 添加渐变效果 */
    display: flex;              /* 启用 Flexbox 布局 */
    justify-content: space-between; /* 水平分布：两端对齐，中间元素均分空间 */
    align-items: center;         /* 垂直居中对齐 */
}



.page-button {
    pointer-events: auto; /* Buttons are clickable */
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: relative; /* Needed for potential pseudo-elements or effects */
    overflow: hidden;    /* Clip potential effects */
    z-index: 1;          /* Above background gradient */
}
.page-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.2);
}
.page-button:active:not(:disabled) {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.page-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.1);
}
.page-info {
    color: #ddd;
    font-size: 0.95em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none; /* Text not clickable */
    z-index: 1;           /* Above background gradient */
}
/* --- End Pagination Styles --- */


/* --- Styles for CONTENT BLOCKS within .page-display-area --- */
.content-block {
    margin-bottom: 2.2em; /* Consistent spacing between blocks */
    /* 添加与其他内容块一致的动画 */
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards;
}
.content-block:last-child {
    margin-bottom: 0; /* No extra space at the very end */
}

/* 渐进动画定义 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同的内容块设置不同的动画延迟 */
.content-block:nth-child(1) { animation-delay: 0ms; }
.content-block:nth-child(2) { animation-delay: 100ms; }
.content-block:nth-child(3) { animation-delay: 200ms; }
.content-block:nth-child(4) { animation-delay: 300ms; }
.content-block:nth-child(5) { animation-delay: 400ms; }
.content-block:nth-child(6) { animation-delay: 500ms; }

/* Basic Typography 调整字体-调整基础font-size,然后调整h1-4的大小*/  
.page-display-area p, .page-display-area ul, .page-display-area ol {
    line-height: 1.85;
    font-size: 1.25em;
    color: #e0e0e0;
}
.page-display-area h1, .page-display-area h2, .page-display-area h3, .page-display-area h4 {
    color: #ffffff;
    font-weight: bold;
    margin-top: 1.6em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    border-bottom: 1px solid #555;
    padding-bottom: 0.4em;
}
.page-display-area h1 { font-size: 2.1em; }
.page-display-area h2 { font-size: 1.7em; }
.page-display-area h3 { font-size: 1.4em; }
.page-display-area h4 { font-size: 1.15em; }
/* Remove top margin if heading is the very first block element */
.content-block:first-child > h1,
.content-block:first-child > h2,
.content-block:first-child > h3,
.content-block:first-child > h4 {
    margin-top: 0;
 }

/* Lists */
.page-display-area ul, .page-display-area ol {
    margin-left: 25px;
    padding-left: 5px;
}
.page-display-area ul li, .page-display-area ol li {
    margin-bottom: 0.6em;
}

/* Blockquotes */
.page-display-area blockquote {
    border-left: 4px solid #00bcd4; /* Cyan */
    margin-left: 0px;
    margin-right: 0px;
    padding: 15px 25px;
    background-color: rgba(0, 188, 212, 0.08); /* Light cyan bg */
    color: #b2ebf2; /* Lighter cyan text */
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
.page-display-area blockquote p:last-child { margin-bottom: 0; }

.page-display-area blockquote {
    border-left: 4px solid #00bcd4; /* Cyan */
    margin-left: 0px;
    margin-right: 0px;
    padding: 15px 25px;
    background-color: rgba(0, 188, 212, 0.08); /* Light cyan bg */
    color: #b2ebf2; /* Lighter cyan text */
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
.page-display-area blockquote p:last-child { margin-bottom: 0; }
/* === 新增：居中 Markdown 表格 === */
.markdown-content table {
  margin-left: auto;  /* 关键 */
  margin-right: auto; /* 关键 */
  /* 可选：给表格添加一些上下外边距，使其与其他块分开 */
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  /* 可选：给表格添加边框或其他样式 */
  border-collapse: collapse; /* 推荐，让单元格边框合并 */
  border: 1px solid #555; /* 示例边框 */
  /* 可选：设置一个最大宽度，防止表格在宽屏上过宽 */
  /* max-width: 90%; */
}
/* 可选：为表头和单元格添加一些内边距和边框 */
.markdown-content th,
.markdown-content td {
  border: 1px solid #444;
  padding: 8px 12px;
  text-align: left; /* 默认左对齐，Markdown表头语法 (|:---| / |:--:| / |---:|) 可覆盖 */
}
.markdown-content th {
  background-color: rgba(255, 255, 255, 0.1); /* 给表头加点背景色 */
  font-weight: bold;
}
.markdown-content p {
  text-align: inherit;
}
/* 专门为 text-right 的情况强制设置 p 为 right */
.markdown-content.text-right p {
  text-align: right; /* 直接指定 right，不再用 inherit */
}

/* Links */
.page-display-area a {
    color: #80deea; /* Light cyan */
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.page-display-area a:hover {
    color: #00bcd4; /* Darker cyan */
    text-decoration: underline;
}

/* Inline Code */
.page-display-area :not(pre) > code {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f06292; /* Pinkish */
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.92em;
}

/* Code Blocks (Prism.js styling applies here) */
.code-container { /* Optional container adjustments */
    /* No specific styles needed unless overriding Prism */
}
.page-display-area pre[class*="language-"] {
    padding: 1.5em;
    margin: 0; /* Remove default margin */
    overflow: auto; /* Enable horizontal scroll WITHIN code block */
    border-radius: 8px;
    background: #2d2d2d; /* Default Prism background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-size: 0.95em;
    line-height: 1.6;
}
.page-display-area code[class*="language-"],
.page-display-area pre[class*="language-"] {
    color: #ccc; /* Base code color */
    text-shadow: none;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    /* Allow line wrapping within code blocks if desired */
    /* white-space: pre-wrap; */
    /* word-break: break-all; */
}



.figure-container {
    /* margin: 0; */  /* 替换为上下外边距，并允许左右自动以支持居中类 */
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto; /* 允许通过 align 类或 auto 居中 */
    margin-right: auto;/* 允许通过 align 类或 auto 居中 */
    background-color: rgba(0, 0, 0, 0.05); /* 保持: 浅灰背景 */
    border-radius: 8px;                  /* 保持: 圆角 */
    overflow: hidden;                    /* 保持: 裁剪溢出 (对圆角有用) */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 保持: 阴影 */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* 改进过渡 */
    max-width: 100%; /* 确保容器本身不会超出父元素 */
    /* text-align: center; */ /* 移除 - 图片居中由 .figure-image 的 margin:auto 实现 */
    clear: both; /* 清除可能存在的浮动 */
}

.figure-container:hover {
    transform: translateY(-4px);             /* 保持: 悬浮效果 - 轻微上移 */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); /* 保持: 悬浮效果 - 阴影加深 */
}

/* 图片本身 <img> */
.figure-image {
    display: block;       /* 保持: 消除底部空隙，使其成为块级 */
    max-width: 100%;    /* 保持: 图片宽度不超过容器 */
    height: auto;       /* 保持: 保持图片纵横比 */
    margin-left: auto;  /* 保持: 若容器比图片宽，则图片水平居中 */
    margin-right: auto; /* 保持: 若容器比图片宽，则图片水平居中 */
    /* border-radius: 8px 8px 0 0; */ /* 可选: 只给图片上半部分加圆角，如果需要的话 */
}

/* 图片标题 <figcaption> */
.caption {
    font-size: 0.9em;   /* 保持: 字号 */
    color: #aaa;       /* 保持: 颜色 */
    font-style: italic; /* 保持: 斜体 */
    padding: 10px 15px 12px 15px; /* 保持: 内边距 */
    background-color: rgba(0,0,0,0.1); /* 保持: 标题背景色 */
    text-align: center; /* 确保标题文字居中 */
    line-height: 1.4;
}

.image-align-default {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
} 

/* 居中对齐 (容器宽度 70%) */
.image-align-center {
    width: 70%;         /* 可以比默认宽一些 */
    margin-left: auto;    /* 水平居中 */
    margin-right: auto;   /* 水平居中 */
}

/* 全宽对齐 */
.image-align-full {
    width: 100%;        /* 容器宽度 100% */
    max-width: 100vw;   /* 可选: 如果希望它突破内容宽度限制 */
    border-radius: 0;     /* 全宽时通常不需要圆角 */
}
.image-align-full .figure-image {
    border-radius: 0;     /* 全宽时通常不需要圆角 */
}


/* 左浮动 (容器宽度 45%) */
.image-align-left {
    float: left;
    width: 45%;
    margin-right: 1.5em; /* 与右侧元素的间距 */
    margin-left: 0;      /* 靠左 */
    margin-bottom: 0.5em;/* 减少下方间距 */
}

/* 右浮动 (容器宽度 45%) */
.image-align-right {
    float: right;
    width: 45%;
    margin-left: 1.5em; /* 与左侧元素的间距 */
    margin-right: 0;     /* 靠右 */
    margin-bottom: 0.5em;/* 减少下方间距 */
}

/* 清除浮动 - 确保浮动容器正确计算高度 */
.figure-container.image-align-left::after,
.figure-container.image-align-right::after {
    content: "";
    display: table;
    clear: both;
}

/* == 响应式调整 (新增/整合) == */
@media (max-width: 768px) {
    /* 在小屏幕上，取消浮动，让所有图片堆叠 */
    .image-align-left,
    .image-align-right {
        float: none;
        width: 100%; /* 默认占满宽度 */
        max-width: 500px; /* 但可以设置一个最大宽度，避免在小屏上过大 */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em; /* 恢复标准下边距 */
    }

    /* 小屏幕上，默认和居中图片可以适当加宽 */
    .image-align-default,
    .image-align-center {
        width: 90%; /* 比如改为 90% */
        max-width: 500px; /* 同样设置最大宽度 */
        margin-left: auto;
        margin-right: auto;
    }

    /* 全宽在小屏上保持全宽 */
    .image-align-full {
        width: 100%;
        max-width: 100%; /* 确保不超过屏幕 */
    }
}

/* Bilibili Video Container */
.bilibili-container {
    margin: 1.5em auto; /* 示例：上下边距，左右自动居中 */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* --- 在这里控制宽度 --- */
    /* 示例 1: 设置固定宽度 */
    /* width: 800px; */
    /* 示例 2: 设置相对于父元素的百分比宽度 */
    width: 70%; /* 例如，占其父容器宽度的 90% */
    /* 示例 3: 设置最大宽度 (常用，避免在宽屏上过大) */
    max-width: 853px; /* 例如，B站默认16:9分享尺寸之一 */
    /* 示例 4: 结合使用，比如默认占满，但最大不超过某个值 */
    /* width: 100%; */
    /* max-width: 960px; */
}
.bilibili-iframe-wrapper { /* Aspect ratio wrapper */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Black background while loading */
}
.bilibili-iframe { /* The iframe itself */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-title { /* Optional title below video */
    font-size: 0.9em;
    color: #aaa;
    text-align: center;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.1);
}

/* Helper classes */
.error-message {
    color: #ff8a80; /* Light red */
    background-color: rgba(255, 138, 128, 0.1);
    border: 1px dashed #ff8a80;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
}
.empty-chapter-message, .empty-page-message {
    text-align: center;
    color: #aaa;
    padding: 60px 20px;
    font-style: italic;
}
/* --- End of Content Block Styles --- */


/* Close Button */
.el__close-btn {
    z-index: -1; /* Initially hidden */
    position: absolute;
    right: 15px; top: 15px;
    width: 40px; height: 40px;
    opacity: 0; pointer-events: none;
    transition: all 0s 0.45s; /* Delay hiding/showing */
    cursor: pointer;
}
.el.s--active .el__close-btn {
    z-index: 15; /* Above fixed nav and content */
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s 1.4s; /* Delayed fade-in */
}
.el__close-btn:before, .el__close-btn:after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background: #fff;
    opacity: 0; /* Hidden initially */
    transition: transform 0.3s;
}
/* Show lines when active */
.el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
    opacity: 1;
}
/* Animate lines into X shape */
.el__close-btn:before {
    transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
    transition: all 0.3s 1.4s cubic-bezier(.72, .09, .32, 1.57); /* Springy animation */
    transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
    transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
    transition: all 0.3s calc(1.4s + 0.15s) cubic-bezier(.72, .09, .32, 1.57); /* Slightly delayed springy */
    transform: rotate(-45deg) translateX(0);
}


/* Index Number */
.el__index {
    position: absolute;
    left: 0; bottom: -20px; /* Position below the card */
    width: 100%; height: 100%; min-height: 250px; /* Ensure height */
    text-align: center;
    /* Responsive font size */
    font-size: clamp(60px, 18vw, 200px);
    line-height: 0.85;
    font-weight: bold;
    /* Transition for hiding/showing and hover effect */
    transition: transform 0.5s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Slightly offset initially */
    transform: translate3d(0, 1vw, 0);
    pointer-events: none; /* Doesn't block hover on card */
    z-index: 3; /* Above card bg, below active content */
}
/* Allow hover interaction on the index number itself when card is inactive */
.el:not(.s--active) .el__index {
    pointer-events: auto;
}
/* Lift index number on hover */
.el:not(.s--active):hover .el__index {
    transform: translate3d(0, 0, 0);
}
/* Hide index when a card is active or hovering another inactive card */
.cont.s--el-active .el__index,
.cont__inner:hover .el:not(:hover):not(.s--active) .el__index {
    opacity: 0;
    transition: transform 0.5s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.el__index-back, .el__index-front {
    position: absolute;
    left: 0; bottom: 0; width: 100%;
}
.el__index-back { /* Faded number revealed on hover */
    color: #2f3840;
    opacity: 0;
    transition: opacity 0.25s 0.25s; /* Delayed fade in */
}
.el:not(.s--active):hover .el__index-back {
    transition: opacity 0.25s; /* Quick fade in on hover */
    opacity: 1;
}
.el__index-front { /* Container for the overlay effect */
    /* No specific styles needed here */
}
.el__index-overlay { /* Clipping mask for the reveal effect */
    overflow: hidden;
    position: relative;
    /* Starts slid down, hiding the white text */
    transform: translate3d(0, 100%, 0);
    transition: transform 0.5s 0.1s cubic-bezier(0.6, 0.01, 0, 1); /* Smooth ease-out */
    color: transparent; /* Hide original text */
    user-select: none;
}
.el__index-overlay:before { /* The white text to be revealed */
    content: attr(data-index); /* Get number from data attribute */
    position: absolute;
    left: 0; bottom: 0; width: 100%; height: 100%;
    color: #fff;
    /* Starts slid down (relative to parent) */
    transform: translate3d(0, -100%, 0);
    transition: inherit; /* Use the same transition as the parent overlay */
}
/* Reveal effect on hover */
.el:not(.s--active):hover .el__index-overlay {
    transform: translate3d(0, 0, 0); /* Slide overlay (mask) up */
}
.el:not(.s--active):hover .el__index-overlay:before {
    transform: translate3d(0, 0, 0); /* Slide inner text up simultaneously */
}
/* --- End of Index Number Styles --- */


/* === Dynamic Positioning and Active State === */
/* Fade and scale down inactive cards when one is active */
.cont.s--el-active .el:not(.s--active) {
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
    will-change: transform, opacity;
    pointer-events: none; /* Disable interaction */
}
/* Expand the active card */
.el.s--active {
    z-index: 1; /* Bring active card slightly forward (can adjust) */
    left: 0% !important; /* Override inline style */
    width: var(--expanded-width, 100%) !important; /* Override inline style */
    transform: translate3d(0, 0, 0);
    /* Animate IN transitions */
    transition: left 0.6s cubic-bezier(0.645, 0.045, 0.355, 1),
                width 0.7s 0.7s cubic-bezier(0.645, 0.045, 0.355, 1), /* Width animates after left */
                transform 0.6s, /* Transform animates with left */
                z-index 0s; /* Z-index changes instantly */
    will-change: left, width;
    pointer-events: auto; /* Enable interaction */
}
/* Counter-transform background when card expands */
.el.s--active .el__bg {
    transform: translate3d(0%, 0, 0); /* Move background to origin */
    /* Animate IN transition */
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* ======================== */
/* Chart Container Styles   */
/* ======================== */
.chart-container {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.chart-description {
    color: #ccc;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    font-style: italic;
}

.chart-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
}

.chart-error {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
    padding: 15px;
    border-radius: 6px;
    margin: 10px 0;
}

.chart-error h4 {
    color: #ff4757;
    margin-bottom: 8px;
}

.chart-error details {
    margin-top: 10px;
}

.chart-error summary {
    cursor: pointer;
    color: #ff6b6b;
    font-weight: 500;
}

.chart-error pre {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 5px;
    overflow-x: auto;
}

/* ======================== */
/* Interactive HTML Styles  */
/* ======================== */
.interactive-html-container {
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.interactive-error {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 15px;
    border-radius: 6px;
    margin: 10px 0;
}

.interactive-error h4 {
    color: #ffb300;
    margin-bottom: 8px;
}

.interactive-error details {
    margin-top: 10px;
}

.interactive-error summary {
    cursor: pointer;
    color: #ffc107;
    font-weight: 500;
}

.interactive-error pre {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-top: 5px;
    overflow-x: auto;
}

/* Interactive component common styles */
.interactive-html-container button {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin: 4px;
    transition: background-color 0.2s;
}

.interactive-html-container button:hover {
    background: #0056b3;
}

.interactive-html-container button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.interactive-html-container input,
.interactive-html-container select,
.interactive-html-container textarea {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    color: #333;
    margin: 4px;
}

.interactive-html-container input:focus,
.interactive-html-container select:focus,
.interactive-html-container textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Dashboard-like layouts */
.dashboard {
    display: grid;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

/* ======================== */
/* Error Message Styles     */
/* ======================== */
.error-message {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
    padding: 12px;
    border-radius: 6px;
    margin: 10px 0;
    font-size: 14px;
}

/* Error Boundary Fallback Styles */
.error-boundary-fallback {
    background: rgba(255, 193, 7, 0.1);
    border: 2px solid rgba(255, 193, 7, 0.4);
    border-radius: 8px;
    margin: 15px 0;
    padding: 0;
    overflow: hidden;
}

.error-content {
    padding: 20px;
    text-align: center;
}

.error-icon {
    font-size: 2em;
    margin-bottom: 10px;
}

.error-content h4 {
    color: #ff8f00;
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.error-content p {
    color: #ccc;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.error-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.retry-button, .hide-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.retry-button {
    background: #28a745;
    color: white;
}

.retry-button:hover {
    background: #218838;
}

.hide-button {
    background: #6c757d;
    color: white;
}

.hide-button:hover {
    background: #545b62;
}

.error-details {
    margin-top: 15px;
    text-align: left;
}

.error-details summary {
    cursor: pointer;
    color: #ffc107;
    font-weight: bold;
    padding: 5px 0;
}

.error-details summary:hover {
    color: #ffca2c;
}

.error-info {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 4px;
    margin-top: 5px;
    font-family: monospace;
    font-size: 12px;
}

.error-info p {
    margin: 5px 0;
    color: #ddd;
}

.error-info strong {
    color: #ffc107;
}

.safe-content-block {
    position: relative;
}

.critical-error {
    background: rgba(220, 53, 69, 0.2);
    border: 2px solid rgba(220, 53, 69, 0.5);
}

.empty-page-message {
    color: #999;
    text-align: center;
    font-style: italic;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* ======================== */
/* Responsive Adjustments   */
/* ======================== */
@media (max-width: 768px) {
    .chart-container,
    .interactive-html-container {
        margin: 15px 0;
        padding: 12px;
    }
    
    .chart-title {
        font-size: 16px;
    }
    
    .controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .controls button {
        width: 100%;
        margin: 2px 0;
    }
}



/* Responsive Adjustments */
@media (max-width: 1200px) {
    .cont { padding: 60px 50px; }
}
@media (max-width: 992px) {
    .cont { padding: 50px 40px; }
    .el__content { padding: 30px 40px 70px 40px; }
}
@media (max-width: 768px) {
    .cont { padding: 40px 30px; }
    .el__content { padding: 25px 30px 60px 30px; }
    .page-nav { padding: 8px 30px; }
    .page-button { padding: 8px 15px; font-size: 0.9em; }
    .page-display-area p, .page-display-area ul, .page-display-area ol { font-size: 1.1em; }
    .page-display-area h1 { font-size: 1.8em; }
    .page-display-area h2 { font-size: 1.5em; }
}
@media (max-width: 576px) {
    .cont { padding: 30px 20px; }
    .el__content { padding: 20px 20px 50px 20px; }
    .page-nav { padding: 5px 20px; }
    .page-button { padding: 6px 10px; font-size: 0.8em; }
    .page-info { font-size: 0.8em; }
    .el__close-btn { right: 10px; top: 10px; width: 35px; height: 35px; }
}
/* --- KaTeX Font Size Fix --- */
.katex {
    font-size: 1.21em !important; /* 调整这个值来匹配周围文本 */
}

/* --- KaTeX Display Mode Alignment --- */
.katex-display {
    display: block;
    margin: 1em 0;
    text-align: center;
}

/* --- KaTeX Display Mode Scrollbar (if needed) --- */
.katex-display > .katex {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: initial;
}
/* --- KaTeX Text Color Fix --- */
.katex .base, .katex .strut {
    color: #e0e0e0; /* 匹配你的正文颜色 */
}

/* --- KaTeX Operator/Function Color --- */
.katex .mop {
    color: #80deea; /* 匹配你的链接或函数颜色 (例如: 浅青色) */
}

/* --- KaTeX Number Color --- */
.katex .mord {
    /* 你可以为数字设置特定颜色，但通常保持与正文一致即可 */
    /* color: #f06292; */ /* 示例: 粉色 */
}

/* --- KaTeX Delimiter Color --- */
.katex .mopen, .katex .mclose {
    color: #ccc; /* 括号等定界符的颜色 */
}
/* --- Text Alignment Helper Classes --- */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* --- 强制子元素继承对齐方式 --- */
.text-center > *,
.text-right > * {
    text-align: inherit;
}

/* --- 特殊情况：如果子元素是容器，则让其内部也继承 --- */
.text-center div, .text-center p, .text-center h1, .text-center h2, .text-center h3, .text-center h4,
.text-right div, .text-right p, .text-right h1, .text-right h2, .text-right h3, .text-right h4 {
    text-align: inherit;
}

/* --- 修正列表在居中/右对齐容器中的对齐问题 --- */
.text-center ul, .text-center ol,
.text-right ul, .text-right ol {
    display: inline-block; /* 让列表块化但适应内容宽度 */
    text-align: left;      /* 列表项本身还是左对齐好看 */
    margin-left: 0;        /* 清除默认的左外边距 */
    padding-left: 25px;    /* 用内边距代替 */
}

/* --- 修正图片在居中/右对齐容器中的对齐问题 --- */
.text-center .figure-container,
.text-right .figure-container {
    margin-left: auto;
    margin-right: auto;
}

.text-right .figure-container {
    /* 如果希望右对齐容器内的图片也靠右，可以这样设置，但这通常不符合视觉习惯 */
    /* margin-left: auto; */
    /* margin-right: 0; */
}

/* ================================ */
/* Error Boundary Styles           */
/* ================================ */

.error-boundary-fallback {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    border-radius: 12px;
    padding: 24px;
    margin: 16px 0;
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.error-content {
    text-align: center;
    color: white;
}

.error-icon {
    font-size: 3em;
    margin-bottom: 16px;
    opacity: 0.9;
}

.error-content h4 {
    font-size: 1.4em;
    margin-bottom: 12px;
    font-weight: 600;
    color: #fff;
}

.error-content p {
    font-size: 1em;
    margin-bottom: 20px;
    opacity: 0.9;
    line-height: 1.5;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.retry-button, .hide-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.retry-button:hover, .hide-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.retry-button:active, .hide-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.error-details {
    margin-top: 16px;
    text-align: left;
}

.error-details summary {
    cursor: pointer;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 12px;
    outline: none;
}

.error-details summary:hover {
    opacity: 0.8;
}

.error-info {
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    line-height: 1.4;
}

.error-info p {
    margin-bottom: 8px;
    word-break: break-word;
}

.error-info strong {
    color: #fff;
    font-weight: 600;
}

.safe-content-block {
    position: relative;
    min-height: 40px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .error-boundary-fallback {
        padding: 20px 16px;
        margin: 12px 0;
    }
    
    .error-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .retry-button, .hide-button {
        width: 100%;
        max-width: 200px;
    }
    
    .error-info {
        font-size: 0.8em;
        padding: 12px;
    }
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
    .error-boundary-fallback {
        background: linear-gradient(135deg, #dc3545, #c82333);
    }
    
    .error-info {
        background: rgba(0, 0, 0, 0.4);
    }
}

/* ======================== */
/* Enhanced Interactive HTML Styles */
/* ======================== */

/* Interactive HTML Container */
.interactive-html-container {
    /* 与其他content-block保持一致的样式 */
    margin: 20px 0;
    background: transparent; /* 移除背景，与其他内容块一致 */
    border-radius: 0; /* 移除圆角，保持简洁 */
    overflow: visible;
    box-shadow: none; /* 移除容器阴影，让iframe的阴影更突出 */
    border: none; /* 移除容器边框 */
    position: relative;
    z-index: 1;
    isolation: isolate;
}

/* 在演示环境中的特殊处理 */
.page-display-area .interactive-html-container {
    background: transparent; /* 与其他内容块保持一致 */
    border: none; /* 移除容器边框 */
    padding: 0; /* 移除容器内边距 */
    margin: 2.2em 0; /* 与content-block保持一致的间距 */
    overflow: visible;
}

/* Iframe Styles */
.interactive-html-container iframe {
    display: block;
    width: 100%;
    min-height: 300px;
    max-width: 100%;
    border: 2px solid rgba(255, 255, 255, 0.15); /* 轻微的边框 */
    border-radius: 8px;
    background: #ffffff;
    /* 移除transition，避免与演示动画冲突 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); /* 适中的阴影 */
    margin: 0; /* 移除外边距 */
    overflow: visible;
}

/* 确保 iframe 在深色背景下突出 */
.page-display-area .interactive-html-container iframe {
    border: 2px solid rgba(255, 255, 255, 0.2); /* 统一边框样式 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* 统一阴影效果 */
}

/* iframe 加载状态优化 */
.interactive-html-container iframe:not([src]):not([srcdoc]) {
    background: linear-gradient(45deg, #f8f9fa 25%, #e9ecef 25%, #e9ecef 50%, #f8f9fa 50%, #f8f9fa 75%, #e9ecef 75%, #e9ecef);
    background-size: 28px 28px;
    animation: loading-stripes 1.5s linear infinite;
}

/* Shadow DOM Host Styles */
.interactive-html-container > div {
    border-radius: 8px;
}

/* Interactive Error Styles */
.interactive-error {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.2);
}

.interactive-error h4 {
    color: white;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: 600;
}

.interactive-error p {
    margin-bottom: 8px;
    opacity: 0.9;
    line-height: 1.4;
}

.interactive-error details {
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px;
    border-radius: 6px;
}

.interactive-error summary {
    cursor: pointer;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    outline: none;
}

.interactive-error pre {
    font-family: 'Courier New', monospace;
    font-size: 0.8em;
    line-height: 1.3;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Loading State for Iframes */
.interactive-html-container iframe:not([src]) {
    background: linear-gradient(45deg, #f5f5f5 25%, #e0e0e0 25%, #e0e0e0 50%, #f5f5f5 50%, #f5f5f5 75%, #e0e0e0 75%, #e0e0e0);
    background-size: 20px 20px;
    animation: loading-stripes 1s linear infinite;
}

@keyframes loading-stripes {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .interactive-html-container {
        margin: 15px 0;
    }
    
    .interactive-html-container iframe {
        min-height: 250px;
    }
    
    .interactive-error {
        padding: 15px;
        font-size: 0.9em;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .interactive-html-container {
        border: 2px solid #000;
    }
    
    .interactive-error {
        border: 2px solid #000;
        background: #ff6600;
    }
}