Chart Prompts

Restyle my chart in the "Tier Map" 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 supply chain mapping scorecard in a sustainability or risk report. Clean, white and systematic: a three-step teal ramp says how deep in the supply chain each row sits, and a gray ghost bar shows how much is still unknown.

Colors (use these exact values):
- Page: #FFFFFF.
- Groups by depth: #0E5E5A (tier 1, dark teal), #2A9D8F (tier 2, mid teal), #9ED8CF (tier 3, pale teal).
- Ghost bars for the estimated total: #E6E9EB.
- Ink #16252A, secondary text #65737A, rules and grid #D9DEE1.

Typography (Google Fonts):
- Albert Sans throughout. Title 25px 800 with -0.4px letter-spacing, stating the finding; subtitle 15px 400 gray; group headings 13px 800 uppercase with 1.4px letter-spacing plus a 13px 500 gray descriptor; row labels 13.5px 500; bar-end counts ("64 / 88") 11.5px 600 gray; percent column 13.5px 600 ink, group totals 13px 800.

Layout:
- 56px side margins. Title, subtitle, then a legend row (three small tier swatches for "Mapped suppliers" and a wide gray swatch for "Estimated total") with a right-aligned "MAPPED" column header.
- Label column from x 56 to about 285, bars from x 292 to 790, and a right-aligned percent column ending at x 904.
- Each group starts with a 36px heading row: a small branching glyph (a filled root dot with 1, 2 or 3 curved branches to hollow dots, matching the tier number, in the tier color), the tier name and descriptor, and the group total ("45 of 48 · 94%") in the percent column. Groups are separated by 1px #D9DEE1 rules. Rows are 24px tall.
- Footer rule at y 552 with a 12px source line.

Axes and grid:
- Axis values across the top of the bar area in 11px gray; dashed vertical gridlines (0.8px, 2 on 3 off) in #D9DEE1; a 1px ink zero line drawn only through each group's rows, not through the headings.

Marks:
- Bar chart: 13px horizontal bars with 3px rounded right ends. The gray ghost bar for the estimated total is drawn first and the tier-colored mapped bar on top from the same zero line; the count label sits 7px past the end of the ghost bar.
- Line chart: one line per tier in the three teal steps (2.5px, round joins) with a light #E6E9EB band from zero to the estimated total behind each, the same branching glyph next to each line's end label, and the percent printed at the line end.

Avoid: colors outside the teal ramp for data, bars that do not start at zero, 3D, heavy borders, and labeling pale tier 3 bars with pale text (all text stays ink or gray).

When you're done, render the chart and check that headings never collide with the zero line, the pale tier 3 bars are still distinguishable from the ghost bars, the group totals equal the sum of their rows, and every percentage is mapped divided by estimated total.