body {
    font-family: 'Inter', sans-serif;
    background-color: #fdfbf7; /* Warm neutral background */
    color: #1f2937;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
}
.chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    max-height: 400px;
}
@media (min-width: 768px) {
    .chart-container {
        height: 350px;
    }
}
.code-block {
    background-color: #2d2d2d;
    color: #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: monospace;
    overflow-x: auto;
}
.step-card {
    transition: all 0.3s ease;
    cursor: pointer;
}
.step-card.active {
    border-left: 4px solid #d97706; /* Amber-600 */
    background-color: #fffbeb; /* Amber-50 */
}
.flow-arrow::after {
    content: '↓';
    display: block;
    text-align: center;
    font-size: 1.5rem;
    color: #9ca3af;
    margin: 0.5rem 0;
}
@media (min-width: 1024px) {
    .flow-arrow::after {
        content: '→';
        display: inline-block;
        margin: 0 1rem;
    }
}