:root {
    --animation-duration: 0.5s;
}

/* The main styling is now handled by Bootstrap classes in the HTML. */
/* This file is for animations and SVG-specific styles. */

#calculation-steps .list-group-item {
    cursor: pointer;
    opacity: 0;
    transform: translateX(-20px);
    /* The transition is defined in the .visible class to only apply on reveal */
}

#calculation-steps .list-group-item.visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
}

/* Bootstrap's .active class will now handle the highlighting of the selected step */

#diagram-container svg {
    width: 100%;
    height: auto;
}