.chart { display: block; width: 100%; max-width: 720px; height: auto; }
.chart text { font-family: var(--font-body, inherit); font-size: 16px; }
.ch-grid { stroke: var(--color-border-subtle); stroke-width: 1; }
.ch-axis { fill: var(--color-text-tertiary); }
.ch-title { fill: var(--color-text-secondary); font-weight: 600; }
.ch-band { fill: var(--color-bg-sunken); }
.ch-band-secondary, .ch-band-stabilized, .ch-band-bottled { fill: var(--color-accent-muted); opacity: 0.55; }
.ch-band-aging { fill: var(--color-bg-sunken); }
.ch-band-label { fill: var(--color-text-secondary); font-size: 15px; }
.ch-sg { fill: none; stroke: var(--color-ember); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--color-bg-surface); stroke: var(--color-ember); stroke-width: 2.5; }
.ch-temp { fill: none; stroke: var(--color-info); stroke-width: 1.75; stroke-linejoin: round; }
.ch-title-temp { fill: var(--color-info); }
.ch-title-sg { fill: var(--color-ember-bright); }
.spark { display: inline-block; vertical-align: middle; }
.ch-spark { fill: none; stroke: var(--color-ember); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.ch-spark-dot { fill: var(--color-ember); }