:root {
    --accent: #2563eb;
    --accent-neg: #e05252;
    --accent-highlight: #f5a623;
}

body {
    font-family: sans-serif;
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1.5rem;
    color: #222;
}

h1 { margin-bottom: 0.25rem; }
.subtitle { color: #666; margin-top: 0; margin-bottom: 2rem; }
.caption { color: #888; font-size: 0.85rem; margin-top: 0.25rem; }

#status { color: #888; font-style: italic; }

/* Controls */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
    padding: 1.25rem;
    background: #f8f8f8;
    border-radius: 6px;
    margin-bottom: 2.5rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 140px;
}

.control-group label {
    font-size: 0.85rem;
    color: #555;
}

select, input[type="range"] { width: 100%; }

button {
    padding: 0.5rem 1.5rem;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    align-self: flex-end;
}

button:disabled { background: #aaa; cursor: not-allowed; }
button:hover:not(:disabled) { background: #444; }

/* Sections */
.viz-section {
    margin-bottom: 3rem;
}

.viz-section h2 {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.note {
    font-size: 0.82rem;
    color: #888;
    margin-top: -1rem;
    margin-bottom: 2rem;
}

/* D3 axis labels */
.axis-label {
    font-size: 0.78rem;
    fill: #555;
}

svg text {
    font-family: sans-serif;
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    .two-col { grid-template-columns: 1fr; }
}