Chart Prompts

Restyle my chart in the "Pattern Fill" 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: an accessible public survey report. Friendly and orderly, built from a colorblind-safe palette in which every color also carries its own texture, so the chart still works printed in grayscale.

Colors (use these exact values):
- Page: #FAFAF7 (soft paper white).
- Series, in this order: #0072B2 (blue), #E69F00 (orange), #009E73 (bluish green), #CC79A7 (reddish purple).
- Text: #1F2328. Secondary text: #5B616B. Rules and guides: #D8D8D2. Value label pills: #FFFFFF at 94% opacity.

Typography (Google Fonts):
- Title: Lexend 600, 28px, #1F2328, stating the finding.
- Everything else: Source Sans 3. Subtitle 18px 400 #5B616B (measure, unit, period). Legend labels 17px 600. Category labels 18px 600 right-aligned. Value labels 15px 700. Axis labels 14px. Footer 15px, the grayscale note in italic.

Texture (one per series, drawn over the tint as a repeating user-space pattern):
- Blue: diagonal hatching at 45 degrees, 3px white stripes at 42% opacity every 9px.
- Orange: offset dots, r 1.9 in #5A3A00 at 60% opacity on a 10px tile (two dots per tile, staggered).
- Green: crosshatch rotated 45 degrees, 1.8px white lines at 50% opacity on a 10px tile.
- Purple: horizontal lines, 2.4px #5E1F46 at 45% opacity every 7px.
- A fifth series would use vertical lines; never reuse a texture.

Layout:
- 56px side margins. Title, subtitle, then a legend row 24px below the subtitle.
- Legend: for each series a 34 x 22 px swatch (3px radius) filled with the textured tint and a 1px outline in the series color, the label 10px after it, 36px between items. The swatch must show both color and pattern.
- A 1px #D8D8D2 rule above the footer; the grayscale note ("Reads correctly in grayscale: every mode carries its own texture.") on the left and "Source: ..." on the right.

Axes and grid:
- Thin 1px #D8D8D2 vertical guides at 0, 25, 50, 75 and 100%, labeled in 14px #5B616B under the last bar. No other gridlines.

Marks:
- Bar chart: horizontal 100% stacked bars, 36px tall on a 54px row pitch, sorted by the first segment. Segments are separated by 2px gaps showing the page. Every segment of 7% or more carries its percentage in a white pill (22px tall, fully rounded) centered in the segment, 15px 700 #1F2328. For ordinary stacked or grouped bars use the same textured fills and pills.
- Line chart: 3px lines in the four colors, each with its own dash (solid, long dash, dotted, dash-dot) to mirror the textures, with a matching textured area band 14px tall under the last point or a textured end swatch next to each direct label, so series are identifiable in grayscale.

Avoid: color as the only encoding, red-green pairs, gradients, shadows, rounded bar ends, text placed directly on texture without a pill, and patterns so dense they turn to mush at thumbnail size.

When you're done, render the chart, convert it to grayscale, and check that every series is still identifiable from texture alone, that the legend swatches match the bar fills exactly, and that each bar's segments sum to 100%.