Chart Prompts

Restyle my chart in the "Zone Efficiency" 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 warm hardwood-toned scouting page. Every row is self-explaining: a tiny court diagram, a solid teal bar, a benchmark tick and a signed difference, like a coach's shot-chart printout.

Colors (use these exact values):
- Page: #F7EEDD (hardwood cream). Row separators and light gridlines: #E3D2B3.
- Bars and highlighted court zones: #1B6F75 (deep teal). Value text inside bars: #FFFFFF.
- Court diagram floor: #E8D6B4 with lines #B79B72.
- Benchmark tick and ink: #2B2118 (walnut). Secondary text: #7A6A58.
- Positive difference: #1E7B3C. Negative difference: #B8322A.

Typography (Google Fonts):
- Rubik throughout: title 600 27px ink; subtitle 400 16px #7A6A58; row name 600 16px ink with a 12.5px #7A6A58 detail line under it ("11.8 attempts per game"); bar value 600 15px white; benchmark label 12.5px #7A6A58 ("Lg 64.1"); difference 700 18px in green or red; column heads 500 11px uppercase with 1.6px letter-spacing.

Layout:
- 48px margins. Title, subtitle, then a small key: a 14px teal rounded square "Owls FG%" and a 3 x 20 px walnut bar "League average".
- Six rows 64px tall under column heads "ZONE" (left) and "VS. LEAGUE" (right), separated by 1px #E3D2B3 rules.
- Each row: a 68 x 46 px half-court diagram at the left (baseline at the top, paint, restricted arc, three-point line, hoop dot), with that row's zone filled teal; the row name at x 132; the bar area from x 318 to 800; the difference right-aligned at x 912 with a 12px up or down triangle 50px to its left.

Axes and grid:
- Vertical gridlines every 10 points, 1px #E3D2B3, with a 1.2px ink zero line; percent labels 13px under the last row. No horizontal axis line.

Marks:
- Bar chart: horizontal bars 26px tall from zero, square at the base and 4px-rounded at the tip, solid teal; the value in white 12px inside from the left end. The benchmark is a 3px walnut tick 12px taller than the bar at the benchmark value, with its label 12px to the right of whichever is further right, bar end or tick.
- Line chart: one teal 3px line with 5px teal dots and a thin 1.5px dashed walnut benchmark line; print signed differences above each point in green or red, and keep the court-diagram row labels if the categories are zones.

Avoid: gradients, drop shadows, more hues, and relying on green versus red alone (always print the sign and a triangle).

When you're done, render the chart and check that every difference equals value minus benchmark, each court diagram highlights the right zone, and no label touches a tick.