:root {
    --bg-color: #030304; /* 更深的纯黑底色，凸显科技感 */
    --grid-color: rgba(255, 255, 255, 0.03);
    --line-color: rgba(255, 255, 255, 0.18);
    --text-primary: #ffffff;
    --text-secondary: #666666;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    /* 默认中文字体 (跨平台安全字体栈) */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Heiti SC", "Segoe UI", Roboto, sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mono {
    /* 科技感等宽字体 */
    font-family: 'JetBrains Mono', monospace;
}

.cn {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Heiti SC", "Segoe UI", Roboto, sans-serif;
}

/* 极其隐蔽的参数化网格背景 */
.grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
    z-index: 0;
    pointer-events: none;
}

#canvas-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85; /* 提高画布透明度以凸显粒子 */
}

/* 极简构图辅助线 (参考顶尖AI/量化机构的切割排版) */
.frame {
    position: absolute;
    background-color: var(--line-color);
    z-index: 2;
    pointer-events: none;
}

/* 线条向内收缩，围成内容区矩形框 */
.line-top { top: 15vh; left: 0; width: 100%; height: 1.5px; }
.line-bottom { bottom: 15vh; left: 0; width: 100%; height: 1.5px; }
.line-left { top: 0; left: 10.5vw; width: 1.5px; height: 100%; }
.line-right { top: 0; right: 10.5vw; width: 1.5px; height: 100%; }

/* 十字准星细节缀饰 */
.crosshair {
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 3;
    pointer-events: none;
}
.crosshair::before, .crosshair::after {
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.4);
}
.crosshair::before { top: 7px; left: 0; width: 15px; height: 1px; }
.crosshair::after { top: 0; left: 7px; width: 1px; height: 15px; }

/* 准星始终跟随 grid line 交汇处 */
.crosshair.tl { top: calc(15vh - 7px); left: calc(10.5vw - 7px); }
.crosshair.tr { top: calc(15vh - 7px); right: calc(10.5vw - 7px); }
.crosshair.bl { bottom: calc(15vh - 7px); left: calc(10.5vw - 7px); }
.crosshair.br { bottom: calc(15vh - 7px); right: calc(10.5vw - 7px); }

.content {
    position: absolute;
    z-index: 10;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 黄金分割：准星框（左10.5vw, 上15vh, 宽79vw, 高70vh）内的黄金分割点 */
    /* 水平：左边界内侧 */
    /* 垂直：15vh + 70vh × 0.382 ≈ 41.7vh */
    left: calc(10.5vw + 5vw);
    top: 41.7vh;
    transform: translateY(-50%);
    animation: fadeIn 2s ease-out;
}

/* 更有棱角的公司名称 (采用宋体衬线字，增加传统与权威感) */
.logo {
    font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
    font-weight: 400;
    font-size: 4.2rem;
    letter-spacing: 10px;
    margin-right: 0; /* 左对齐无需补偿 */
    margin-bottom: 2rem;
    color: var(--text-primary);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.info {
    margin-top: 1.5rem;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.info:hover {
    opacity: 1;
}

/* 纯文字极简招聘信息，去除边框 */
.email {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    cursor: pointer;
}

.email .cn {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.email .mono {
    font-size: 0.8rem;
    font-weight: 300;
    letter-spacing: 1px;
    color: var(--text-primary);
    position: relative;
}

.email:hover .cn {
    color: var(--text-primary);
}

/* 增加细腻的下划线展开动画 */
.email .mono::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--text-primary);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.email:hover .mono::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

footer {
    position: absolute;
    bottom: 3vh; /* 紧贴底部辅助线下方 */
    z-index: 10;
    color: var(--text-secondary);
    font-size: 0.65rem;
    letter-spacing: 1px;
    opacity: 0.7;
    font-weight: 300;
    animation: fadeIn 3s ease-out;
}

footer .mono {
    font-size: 0.6rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .logo {
        font-size: 3rem;
        letter-spacing: 8px;
        margin-right: 0;
    }
    .line-left { left: 7vw; }
    .line-right { right: 7vw; }
    .line-top { top: 15vh; }
    .line-bottom { bottom: 15vh; }
    .crosshair.tl { top: calc(15vh - 7px); left: calc(7vw - 7px); }
    .crosshair.tr { top: calc(15vh - 7px); right: calc(7vw - 7px); }
    .crosshair.bl { bottom: calc(15vh - 7px); left: calc(7vw - 7px); }
    .crosshair.br { bottom: calc(15vh - 7px); right: calc(7vw - 7px); }
    .content {
        left: calc(7vw + 2vw);
        top: 41.7vh;
    }
    .email {
        flex-direction: column;
        gap: 6px;
    }
    footer {
        bottom: calc(15vh - 3.5vh); /* 贴在下方 grid line 上方，保持对称 */
        font-size: 0.55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 86vw;
        text-align: center;
    }
}