body {
    font-family: 'SimSun', serif;
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}
@keyframes fadeIn {
    to { opacity: 1; }
}
@font-face {
    font-family: '汉仪飞檐隶';
    src: url('../material/汉仪飞檐隶.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* 水墨风格备选方案 */
@font-face {
    font-family: '汉仪松雪体';
    src: url('../material/汉仪松雪体.ttf') format('truetype'); /* 思源宋体 */
    font-weight: normal;
    font-style: normal;
}
.navbar {
    position: absolute;
    top: 1%;
    right: 2.5%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    z-index: 3;
}

.navbar a:hover {
    transform: scale(1.1);
    color: #FFD700;
}

.navbar a {
    color: #264758;
    text-decoration: none;
    font-size: 25px;
    margin-right: 35px;

    font-family: '汉仪飞檐隶', sans-serif;

}

.navbar a:last-child {
    margin-right: 7px;
}

.main-header {
    height: 20vh;
    position: relative;
    background: 
       
        url('../material/9801.jpg');
    background-size: 100% 100%;  /* 或使用 contain 确保完整显示 */
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.tle {
    position: relative;
    color: #7A9EAD; /* 天缥色（《营造法式》官方水色标准） */
    font-family: '汉仪松雪体', cursive;
    font-size: 4rem;
    text-shadow: 
        2px 2px 6px rgba(190,210,220,0.4), /* 水痕反光 */
        0 0 2px rgba(255,255,255,0.8); /* 笔锋提亮 */
    animation: inkSpread 1.2s ease-out;
    background: linear-gradient(
        92deg,
        #8CB3C0 20%,  /* 霁青（雨后天晴色） */
        #E8F2EB 60%,  /* 玉髓白（碾玉色阶） */
        #8CB3C0 90%    /* 色阶呼应 */
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    isolation: isolate; /* 防止背景渗透 */
    margin-top: 75px;
}

@keyframes inkSpread {
    from {
        opacity: 0;
        background-size: 50% 100%;
    }
    to {
        opacity: 1;
        background-size: 100% 100%;
    }
}





.scroll-indicator {
    position: absolute;
    bottom: 20px;
    color: white;
    font-size: 2.5rem;
    animation: bounce 2s infinite;
}


/* 父容器设置为 Flex 布局 */
#main {
    display: flex;           /* 启用 Flex 布局 */
    height: 80vh;           /* 父容器高度占满视口 */
}
/* iframe 容器 */
.viz-iframe {
    flex: 1;                 /* 等分剩余空间 */
    width: 50%;              /* 初始宽度占比 */
    height: 100%;            /* 继承父容器高度 */
    border: none;            /* 移除默认边框 */
}