Chart Prompts

Restyle my chart in the "Obligation Calendar" 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 compliance calendar on a dark operations wall. Near-black, a strict grid of month columns, crisp stepped lines and one alarming red gap.

Colors (use these exact values):
- Page: #101010. Month header cells: #181818. Column rules and dotted gridlines: #2A2A2A. Baseline: #3A3A3A.
- Target series (due): #D9F99D (pale lime). Actual series (completed): #FFFFFF.
- Shortfall band between them: #7F1D1D at 70% opacity, 95% for the worst period.
- Shortfall numbers: #FCA5A5. Secondary text: #8A8A85.

Typography (Google Fonts):
- Tenor Sans 400: title 34px white, sentence case, stating the finding.
- Nunito Sans: subtitle 15px #8A8A85; legend 13px 600 white; month headers 12px 700 uppercase with 2px letter-spacing (#8A8A85, the worst month white); axis labels 12.5px; the worst gap number 17px 800 white; direct labels 12.5px 700; the bottom shortfall row 14px 600 (#FCA5A5, zero in gray) with an "Overdue" row label 11px 700; source 12px.

Layout:
- 48px margins. Title baseline y 70, subtitle y 100, legend y 132 with stepped-line samples and a red swatch.
- The plot is a calendar strip from x 88 to 872: equal columns, one per period, separated by 1px #2A2A2A vertical rules running from the header row down through the shortfall row (y 160 to 530). Each column has a 30px header cell (#181818) with the abbreviated month.
- Plot area y 214 to 470; the shortfall row sits at y 504 under the baseline, one number per column.

Axes and grid:
- Y labels right-aligned 12px left of the strip; dotted (2 4) #2A2A2A gridlines; a 1px #3A3A3A baseline. Tick values evenly spaced (e.g. 30, 40, 50 ... 80) so the baseline reads as one more step, never an irregular gap. The axis need not start at zero for stepped counts.

Marks:
- Line chart: stepped lines that are flat across each column and jump at the column rules, square joins. Target 2.8px lime, actual 1.6px white (the width difference is a second cue, since lime and white are both very light). Fill the gap between them in each column with the red band. At the worst period, a lime warning triangle (18px wide, with a dark exclamation mark) 16px above the target step, the gap number centered in the band, and direct labels "72 due" (lime, just right of the column) and "58 done" (white, under the actual step).
- Bar chart: in each column, a white actual bar 60% of the column wide with a lime 2.8px target tick across the full column width at the target value; the shortfall between bar top and tick filled with the red band.

Avoid: diagonal line segments, rounded corners, glows, gradients, bright red fills, and gridlines that compete with the column rules.

When you're done, render the chart and check that every step changes exactly on a column rule, the shortfall row numbers equal target minus actual, the warning triangle clears the header row, and the direct labels do not touch neighboring steps.