:root {
    color-scheme: light dark;

    --max-width: 900px;
    --padding-width: 80px;
    --padding-width-mobile: 20px;
    --nav-height: 60px;

    --en-font:  ui-monospace, 'Roboto Mono', sans-serif;
    --zh-font: '楷体-简-粗体', 'STKaiti', 'KaiTi', '楷体', serif, --apple-system;
}

/* 默认：白天模式变量 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --border-color: #eaeaea;
    --link-color: #2a6496;
    --link-hover-color: #16426d;
    --shadow-color: rgba(0, 0, 0, 0.05)
}

/* 自动检测：黑夜模式变量 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a; 
        --text-color: #e0e0e0;
        --border-color: #333333;
        --link-color: #79c0ff; 
        --link-hover-color: #a5d6ff;
        --shadow-color: rgba(255, 255, 255, 0.05)
    }
    /* MathJax 默认会继承文本颜色，但有时需要强制声明 */
    mjx-container {
      color: var(--text-color);
    }
}

html {
    scroll-behavior: smooth; /* 设置平滑滚动，并防止导航栏遮挡标题 */
    scroll-padding-top: calc(var(--nav-height) + 20px); /* 大于导航栏高度 */
}

header {
    padding-top: env(safe-area-inset-top);
    background-color: var(--bg-color); /* 你的 Header 背景色 */
}

/* 全局基础设置 */
body {
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    font-family: var(--en-font);
    line-height: 1.4;        /* 如果单行文字太长折行了，这是折行间距 */
    font-size: 16px;
}

/* 网站主容器 */
.main-card {
    width: 100%;
    max-width: var(--max-width);
    min-height: 100vh;
    padding: 20px var(--padding-width);
    margin-top: var(--nav-height);
    /* 修正：因为导航栏固定了，需要给主体内容加内边距，防止被遮挡 */

    color: var(--text-color);

    box-sizing: border-box;
    box-shadow: 0 0 15px var(--shadow-color);
}

.intro-row {
    display: flex;
    gap: 20px; /* 适当缩小间距以适应三列 */
    justify-content: space-between;
    align-items: center; /* 建议居中对齐，三等分时视觉更平衡 */
    margin-bottom: 3em;
}

/* 重点：让简介内部的三行纵向排列 */
.intro-words {
    flex: 1;                 /* 占据 1/3 宽度 */
    display: flex;
    /* 开启内部 Flex 布局 */
    flex-direction: column;  /* 内部元素上下排列 */
    gap: 8px;
    /* 这里就是你想要的“回车”间距 */
}
.intro-words p {
    margin: 0pt; /* 清除 p 标签自带的 margin */
}

/* 核心：为三个子部分设置等宽 */
.intro-words, 
.intro-ruby, 
.intro-avatar-container {
    flex: 1;          /* 强制平分剩余空间 */
    display: flex;    /* 开启内部 flex 以便控制内容位置 */
}

/* 中间的 Ruby 居中 */
.intro-ruby {
    justify-content: center;
    font-size: 32px;
}
ruby {
    font-family: var(--zh-font);
}
ruby > rt {
    font-family: var(--en-font);
    width: 100%;
    font-size: 0.4em;
}

/* 右侧的头像容器靠右 */
.intro-avatar-container {
    justify-content: flex-end;
}

/* 彻底锁死头像尺寸，解决“图片太大”的问题 */
.avatar-frame {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    /* 禁止滚动 */
    border: 1px solid #eee;
    flex-shrink: 0; /* 防止在窄屏下被挤压 */
}

.avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 统一应用到所有链接，特别是 arXiv 所在的 a 标签 */
a {
    color: var(--link-color);
    transition: color 0.2s ease;
    text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
}

@media screen and (max-width: 768px) {
    .intro-row {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .main-card {
        padding: 30px var(--padding-width-mobile);
    }
}