Chart Prompts

Restyle my chart in the "Store Rank" 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 app-store analytics console. Clean, friendly and product-grade: a listing card for the subject up top, then a crisp rank chart where climbing means going up.

Colors (use these exact values):
- Page background: #FCFCFD (soft white). Cards: #FFFFFF with a 1px #ECEDF1 border and a soft shadow (0 2px 6px of #1E2230 at 6%).
- Primary series and highlights: #F43F5E (coral). App icon gradient from #F43F5E at top-left to #FDBA8C (peach) at bottom-right.
- Comparison or rival series: #C3C7D0 (pale gray), never colored.
- Medals and rating stars: #F2A93B (gold) with a #D98E1F 1px ring; empty stars #E4E6EB.
- Ink #1E2230 for titles and big numbers; secondary text #6B7080; axis labels and captions #9CA1AE; gridlines #ECEDF1.

Typography (Google Fonts):
- Nunito Sans for the title (800, 26px, -0.4px letter-spacing, stating the finding), the app name (800, 19px), KPI values (800, 24px) and series end labels (800, 13.5px).
- Rubik for everything else: subtitle 14px 400 #6B7080; category line and rating text 12.5px; KPI captions 10.5px 500 uppercase with 1px letter-spacing in #9CA1AE; axis labels 12px #9CA1AE; source 11.5px.

Layout:
- 40px side margins. Title at y 56, subtitle below naming measure, unit and period.
- An app-listing card (880 x 84, 16px radius) under the subtitle: a 56px rounded-square icon (14px radius) with the coral-to-peach gradient and a simple white glyph, the app name, a category line, and a row of five 13px stars (partially filled to the rating) with "4.7 · 38.2K ratings". The card's right half holds 3 to 4 KPI stats separated by 1px vertical rules; the first KPI value is coral.
- The chart fills the rest, plot from x 72 to 840, leaving room at the right for direct end labels.

Axes and grid:
- Line chart (rank): the y axis is inverted, rank 1 at the top. Labels "#1", "#10", "#20" ... right-aligned 12px left of the plot. Gridlines 1px #ECEDF1, except the rank-10 line, which is 1px dashed (3 3) #F9C2CC.
- Shade the top-ten zone (rank 0.5 to 10.5) with a vertical coral gradient from 9% to 2% opacity, labeled "TOP 10" in Rubik 10.5px 600 coral with 1.4px letter-spacing at its top-left.
- No axis lines. Three to four date labels under the plot, first left-aligned and last right-aligned.

Marks:
- Line chart: the primary series is a 3px coral monotone-smoothed line with a 7px #FCFCFD halo stroke underneath so it cuts cleanly over the rival. The rival is a 2.25px #C3C7D0 line. Whole-number ranks: smooth daily chatter with a 3-day centered average before rounding.
- Medal markers: wherever the primary series enters the top ten, draw a gold medal (r 8, r 10 for the best rank) with a white 2.5px ring, the rank number in white Rubik 700 inside, and a small coral ribbon (a 12px-wide trapezoid) above it. Label the best rank "Best: #5" in 12px 600 ink above its medal.
- End labels: a coral dot (r 5, white 2px ring) at the last point, then the series name and "#6" to the right in coral; the rival gets a gray dot and gray label.
- Bar chart: vertical bars in coral with 6px top radius, comparison bars in #C3C7D0, value labels in Nunito Sans 800 above each bar, and gold medal markers on bars that reach a milestone. For ranks, use horizontal bars sorted with rank 1 at the top.

Avoid: a regular (non-inverted) rank axis, colored rival lines, heavy axis lines, more than one accent color besides the gold medals, and emoji stars (draw stars as vector shapes).

When you're done, render the chart and check that rank 1 sits at the top, the title's start and end ranks match the data, medals only appear at top-ten entries and the best rank, and end labels do not collide.