Chart Prompts

Restyle my chart in the "Cycle Retention" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a figure from a battery lab's technical report. Warm paper, a serif headline, sober earth-toned series and scientific furniture: error whiskers, a threshold line and a boxed key of test conditions.

Colors (use these exact values):
- Page: #FDFCF9 (warm white).
- Series in order: #22375A (navy), #B86B35 (copper), #86A383 (sage).
- Threshold line and label: #A33A2B.
- Ink, whiskers and baseline: #2A2622. Secondary text: #6E665D. Rules and gridlines: #DCD5CA.

Typography (Google Fonts):
- Libre Baskerville: title 700, 24px, #2A2622, stating the finding in sentence case; the "Test conditions" box heading in 400 italic 13px.
- Karla for everything else: "FIGURE 3" eyebrow 700, 11px, 2.4px letter-spacing, copper; subtitle 400, 15px, #6E665D (measure, unit, what the whiskers mean); y labels 12px; category labels 700, 14px; axis title 400 italic 13px; value labels 500, 11px; legend 500, 14px; box rows 12px (keys #6E665D, values 700 #2A2622, right-aligned); footer 12px, the right-hand method note in italic.

Layout:
- 56px margins. Eyebrow at y 56, title at y 92, subtitle at y 120, then a full-width 1px #DCD5CA rule at y 140.
- Plot from x 104 to 660, y 178 to 470. A right column from x 704 holds a "CHEMISTRY" legend (16px square swatches, 28px row pitch), a whisker key ("One standard deviation"), then the test conditions box: 200 x 106 px, 0.8px #2A2622 stroke, no fill, 14px inner padding, 17px row pitch.
- A footer rule at y 546 with the source on the left and a method note on the right.

Axes and grid:
- Y axis from 0 to 100 (always from zero for bars), 0.8px #DCD5CA gridlines every 20, labels right-aligned 10px left of the plot, the unit "%" above them. No y-axis line.
- A 1.2px #2A2622 baseline; bold category labels 24px below it and an italic axis title below those.
- The threshold: a 1.5px dashed line (7 on, 4 off) in #A33A2B at the limit (80%), extending 8px past the plot, labeled "80% end of life" in 700 12px just to its right.

Marks:
- Bar chart: grouped square-cornered bars, 32px wide with 4px gaps, series in the order above. Each bar has a 1.1px #2A2622 error whisker (10px caps) for plus and minus one standard deviation, and its mean as a value label 7px above the upper cap.
- Line chart: one 2px line per series in the same colors with 4px filled markers, the same whiskers at each point, and series names as direct labels at the right end instead of the legend. Keep the threshold line and the box.

Avoid: gradients, shadows, rounded corners, a truncated y axis for bars, bright or saturated colors, and a legend inside the plot area.

When you're done, render the chart and check that the whiskers sit centered on each bar, the value labels do not touch the whisker caps, the threshold label clears the legend, and the title's claim is true for the plotted means.