body { background-color: #ffffff; color: #333; overflow-x: hidden; }

.article-text {
    font-family: 'Noto Serif', serif;
    font-size: 1.125rem; line-height: 1.8; margin-bottom: 1.5rem; color: #2c2c2c;
}
@media (min-width: 768px) { .article-text { font-size: 1.25rem; } }

.drop-cap::first-letter {
    float: left; font-size: 4rem; line-height: 0.8; padding-top: 0.15em; padding-right: 0.1em; padding-left: 0;
    color: #006837; font-family: 'Noto Sans', sans-serif; font-weight: 800;
}

#progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: #C5A059; width: 0%; z-index: 50; transition: width 0.1s ease; }

.tabular-nums { font-variant-numeric: tabular-nums; }

.timeline-node-content { transition: opacity 0.8s ease; }
.timeline-node.inactive .timeline-node-content { opacity: 0.3; }

.timeline-dot { transition: all 0.5s ease; }
.timeline-node.active .timeline-dot { transform: scale(1.3); box-shadow: 0 0 20px currentColor; }

.milestone-content {
    max-height: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease; opacity: 0;
}
.milestone-content.expanded { max-height: 250px; opacity: 1; }
.expand-icon { transition: transform 0.4s ease; }
.expanded-trigger .expand-icon { transform: rotate(180deg); }

#timeline-nav li { transition: all 0.3s ease; opacity: 0.4; cursor: pointer; }
#timeline-nav li.active { opacity: 1; font-weight: 700; color: #C5A059; transform: translateX(-5px); }

.echarts-tooltip { font-family: 'Noto Sans', sans-serif !important; }

.tree-path { stroke-linecap: round; stroke-linejoin: round; }