body { 
    font-family: 'Noto Sans', sans-serif; 
    background-color: #FDFBF7; 
    color: #4A4A4A; 
}

h1, h2, h3, .serif { 
    font-family: 'Merriweather', serif; 
}

.chart-container { 
    position: relative; 
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
    height: 350px; 
    max-height: 400px; 
}

.card-shadow { 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
}

.active-tab { 
    border-bottom: 2px solid #8C7B75; 
    color: #5D524D; 
    font-weight: 600; 
}

.inactive-tab { 
    color: #9CA3AF; 
}

.step-line { 
    position: absolute; 
    left: 15px; 
    top: 24px; 
    bottom: -24px; 
    width: 2px; 
    background-color: #E5E7EB; 
    z-index: 0; 
}

.step-item:last-child .step-line { 
    display: none; 
}

.animate-fade-in { 
    animation: fadeIn 0.5s ease-out; 
}

.animate-fade-in-down { 
    animation: fadeInDown 0.3s ease-out; 
}

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

@keyframes fadeInDown { 
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}