Chart Prompts

Restyle my chart in the "Allocation Bars" 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: the allocation screen of a calm, trustworthy investing app. A warm light page, one white card, a thick segmented bar in muted earthy colors and a tidy holdings list. Quiet, legible and reassuring.

Colors (use these exact values):
- Page: #F5F3EF (warm gray). Card: #FFFFFF with 20px radius and a soft two-layer shadow (0 1px 2px and 0 10px 32px, both #3B3326 at 6%).
- Categories, in this order: #0F5C63 (deep teal), #6283C6 (slate blue), #D9AE66 (sand), #A0588A (muted plum), #4FAE8C (sea green). Keep this order so similar hues never sit side by side.
- Text: #1F2328 (headings, names, current values), #6B6862 (subtitle, secondary values), #9A968E (column heads, ticks, source). Row rules: #ECE8E1.
- Drift badges: positive #1E7A52 on #E4F3EA; negative #B4413A on #FBE9E6.

Typography (Google Fonts): Figtree only, tabular figures everywhere (font-variant-numeric: tabular-nums).
- Title 24px 700, -0.4px letter-spacing, stating the finding. Subtitle 14px 500. Headline total on the right 24px 700 with a 14px 500 caption. Bar captions ("CURRENT", "TARGET") 11.5px 700 uppercase, 1.4px letter-spacing. In-bar percentages 14px 700. Column heads 12px 600. Row names 16px 600; row values 15px (700 for current, 500 for the rest). Badge text 13px 700. Source 11.5px 500.

Layout:
- Card inset 32px from the page; 32px padding inside it. Title and subtitle top left, the total value and its caption right-aligned opposite.
- The current mix as one 48px-tall 100% stacked horizontal bar across the full card width with fully rounded outer ends (24px radius, clip the segments to the rounded shape). Separate segments with 3px white gaps. Put the percentage centered inside each segment wider than 44px, white text on dark segments and #3A2C12 on the sand one.
- 30px below, a thin 14px target bar with 7px rounded ends in the same colors at 55% opacity. Small 1.5px #9A968E ticks under the current bar mark the target boundaries so the drift is visible.
- Below, a holdings list with columns Asset class, Value, Current, Target, Drift (numbers right-aligned). Each row is 46px: a 7px-radius colored dot, the class name, the dollar value, current and target percent, and a 76 x 26px fully rounded drift badge ("+2.1 pts", "−1.4 pts" with a true minus). 1px #ECE8E1 rules between rows.

Axes and grid:
- No axes or gridlines. The percentages inside segments and the list replace them.

Marks:
- Bar chart: as above for shares of a whole. For ordinary categorical bars, use horizontal bars 28px tall with fully rounded right ends, each in its category color, value labels right after the bar end, category names left-aligned in a column with the colored dot, and the same drift badges for changes.
- Line chart: 2.5px lines in the category colors with round joins, a 5px dot at each line end, direct labels (colored dot + name in 13px 600) at the right end instead of a legend, faint #ECE8E1 horizontal gridlines only, and the latest values repeated in the holdings list below.

Avoid: saturated or neon colors, pie charts, 3D, borders on segments, legends that repeat what the list already shows, and badges that say "%" when the drift is in percentage points.

When you're done, render the chart and check that each bar sums to exactly 100, the drift badges equal current minus target, the listed dollar values add up to the total shown, and every in-bar label is readable against its segment.