:root {
    --bg: #ffffff;
    --text: #000000;
    --accent: #00ff41; 
    --blue: #2563eb;
    --dim: #777;
    --neon-pink: #ff0080;
    --neon-cyan: #00f2ff;
    --neon-yellow: #ccff00;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; overflow-x: hidden; scroll-behavior: smooth; }

/* Ticker */
.ticker-wrap { background: #000; color: var(--accent); padding: 8px 0; font-family: 'JetBrains Mono'; font-size: 11px; position: fixed; top: 0; width: 100%; z-index: 1000; }
.ticker { display: flex; white-space: nowrap; animation: ticker 40s linear infinite; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.container { max-width: 1400px; margin: 0 auto; padding: 0 60px; }
.navbar { display: flex; justify-content: space-between; padding: 100px 0 40px 0; font-weight: 900; }
.logo { font-size: 1.5rem; letter-spacing: -1px; }
.nav-links a { text-decoration: none; color: var(--text); margin-left: 30px; font-size: 0.9rem; font-weight: 400; }

/* Hero */
.hero { padding: 40px 0 120px 0; }
.name-wrapper { position: relative; height: 16vw; min-height: 140px; }
.name-en, .name-zh { font-weight: 900; letter-spacing: -3px; line-height: 0.9; transition: all 0.7s; position: absolute; top: 0; left: 0; }
.name-en { font-size: clamp(3rem, 10vw, 7.5rem); opacity: 1; }
.name-zh { font-size: clamp(2.5rem, 8vw, 6rem); opacity: 0; transform: translateY(30px); }
.switched .name-en { opacity: 0; transform: translateY(-30px); }
.switched .name-zh { opacity: 1; transform: translateY(0); }
.contact-header { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 30px; }
.contact-chip { background: #f9f9f9; padding: 8px 16px; border-radius: 50px; font-size: 0.8rem; font-family: 'JetBrains Mono'; border: 1px solid #eee; text-decoration: none; color: #333; }
.hero-details { max-width: 800px; margin-top: 50px; }
.tagline { font-family: 'JetBrains Mono'; font-size: 0.85rem; color: var(--blue); margin-bottom: 20px; font-weight: 700; }
.bio { font-size: 1.5rem; margin-bottom: 15px; font-weight: 500; }
.bio-sub { font-size: 1.1rem; color: var(--dim); }

/* Project Nodes */
.section { padding: 100px 0; border-top: 1px solid #eee; }
.section-title-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; }
.section-title { font-size: 1rem; color: #999; font-family: 'JetBrains Mono'; }
.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.repo-card { border: 1px solid #eee; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; transition: 0.3s; cursor: pointer; background: #fff; }
.repo-card:hover { background: #000; color: #fff; border-color: #000; }
.repo-name { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; line-height: 1.3; margin-bottom: 15px; word-break: break-word; }
.repo-desc { font-size: 0.9rem; color: #666; line-height: 1.6; margin-bottom: 20px; }
.repo-card:hover .repo-desc { color: #888; }
.repo-footer { display: flex; justify-content: space-between; font-family: 'JetBrains Mono'; font-size: 11px; border-top: 1px solid #eee; padding-top: 15px; }
.repo-card:hover .repo-footer { border-color: #333; }
.repo-lang { color: var(--accent); }

/* Timeline */
.timeline-container { position: relative; width: 100%; padding: 40px 0; }
.timeline-container::after { content: ''; position: absolute; width: 2px; background: #eee; top: 0; bottom: 0; left: 50%; margin-left: -1px; }
.timeline-item { padding: 10px 50px; position: relative; width: 50%; }
.timeline-item:nth-child(odd) { left: 0; text-align: right; }
.timeline-item:nth-child(even) { left: 50%; text-align: left; }
.timeline-dot { position: absolute; width: 14px; height: 14px; right: -7px; background: #fff; border: 3px solid var(--blue); border-radius: 50%; top: 25px; z-index: 10; }
.timeline-item:nth-child(even) .timeline-dot { left: -7px; }
.timeline-card { padding: 30px; background: #fff; border-radius: 12px; border: 1px solid #f0f0f0; box-shadow: 0 4px 20px rgba(0,0,0,0.02); }
.timeline-date { font-family: 'JetBrains Mono'; color: var(--blue); font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; }
.job-info h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 5px; }
.company { color: var(--dim); font-size: 0.9rem; }
.status-tag { display: inline-block; background: #eff6ff; color: var(--blue); font-size: 10px; padding: 4px 8px; border-radius: 4px; margin-top: 10px; }

/* 兴趣墙 */
.interest-section { background: #000; color: #fff; padding: 100px 0; overflow: hidden; }
.interest-wall-container { display: flex; flex-direction: column; gap: 20px; }
.interest-track { display: flex; white-space: nowrap; font-size: 3.5rem; font-weight: 900; font-family: 'JetBrains Mono'; letter-spacing: -2px; }
.t-pink { color: var(--neon-pink); animation: scrollLeft 60s linear infinite; }
.t-cyan { color: var(--neon-cyan); animation: scrollRight 55s linear infinite; opacity: 0.8; }
.t-yellow { color: var(--neon-yellow); animation: scrollLeft 70s linear infinite; }
@keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* 动态地图可视化 */
.migration-visual { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: center; }
.m-step { padding-left: 20px; border-left: 2px solid var(--blue); margin-bottom: 40px; }
.m-step span { font-family: 'JetBrains Mono'; color: var(--blue); font-size: 0.8rem; font-weight: bold; }
.m-step h4 { font-size: 1.5rem; margin: 5px 0; font-weight: 900; }
.m-step p { color: #666; }

/* 真实地图容器 */
.map-container {
    height: 400px;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 1; /* 确保在下层 */
}

/* 覆盖 Leaflet 默认样式，实现暗黑风路径动画 */
.leaflet-overlay-pane path {
    stroke-dasharray: 20;
    animation: dash 30s linear infinite;
}

@keyframes dash {
    to { stroke-dashoffset: -1000; }
}

@media (max-width: 900px) {
    .container { padding: 0 30px; }
    .repo-grid { grid-template-columns: 1fr; }
    .timeline-item { width: 100%; padding-left: 70px; text-align: left !important; }
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-dot { left: 24px !important; }
    .migration-visual { grid-template-columns: 1fr; }
    .interest-track { font-size: 2rem; }
}

.footer { padding: 80px 0; text-align: center; color: #ccc; font-family: 'JetBrains Mono'; font-size: 0.75rem; }