Targeting the immediately preceding response — the top auto manufacturer groups table (2010–2024). Rendering it inline now.The prettifier skill specifies its own fixed template with an embedded <style> block and CSS-only theme toggle — that's the authoritative spec here, so I'll use it directly rather than the visualizer's design system. Rendering the table as a self-contained HTML widget with the skill's template.<style> :root { --bg: #0f1320; --bg-soft: #171c2e; --card: #1c2238; --text: #e8ecf8; --muted: #9aa6c8; --border: #2a3252; --accent: #7c8cff; --accent-2: #56d4c4; --code-bg: #0b0f1c; --code-text: #d6e0ff; --quote: #b8c2e6; --link: #8ab4ff; --info: #5b8cff; --success: #3fce9a; --warning: #f2b34b; --danger: #f2657a; --row-alt: #20273f; --chart-grid: #2a3252; } #theme:checked ~ * { --bg: #f7f8fc; --bg-soft: #eef1fb; --card: #ffffff; --text: #1b2138; --muted: #5a6488; --border: #e2e6f4; --accent: #5b6bff; --accent-2: #1eb8a6; --code-bg: #0d1117; --code-text: #e6edf3; --quote: #4a5478; --link: #2563eb; --info: #2563eb; --success: #0f9d6b; --warning: #b9760c; --danger: #d23b54; --row-alt: #f3f5fd; --chart-grid: #e2e6f4; } #theme { display: none; } * { box-sizing: border-box; } body { margin: 0; padding: 2.5rem 1rem; min-height: 100vh; font: 16px/1.7 -apple-system, system-ui, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(900px 500px at 12% -8%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), radial-gradient(800px 520px at 100% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%), var(--bg); transition: background .35s ease, color .35s ease; } main { max-width: 820px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 2.25rem 2.5rem; box-shadow: 0 24px 60px -28px rgba(0,0,0,.55); } h1, h2, h3 { line-height: 1.25; letter-spacing: -.01em; margin-top: 1.8rem; scroll-margin-top: 1rem; } h1 { font-size: 1.9rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } h2 { color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: .35rem; } h3 { color: var(--accent); } a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 40%, transparent); } a:hover { border-bottom-color: var(--link); } pre { background: var(--code-bg); color: var(--code-text); padding: 1.1rem 1.25rem; border-radius: 12px; overflow-x: auto; border: 1px solid var(--border); } code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; } p code, li code, td code { background: var(--bg-soft); padding: .12em .4em; border-radius: 6px; color: var(--accent-2); } blockquote { border-left: 3px solid var(--accent); margin: 1.2rem 0; padding: .4rem 1rem; color: var(--quote); background: var(--bg-soft); border-radius: 0 10px 10px 0; } ul, ol { padding-left: 1.3rem; } li::marker { color: var(--accent); } details { border: 1px solid var(--border); border-radius: 12px; padding: .6rem 1.1rem; margin: 1.1rem 0; background: var(--bg-soft); } summary { cursor: pointer; font-weight: 600; color: var(--accent); } .t-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin: 1.3rem 0; } table.t { width: 100%; border-collapse: collapse; font-size: .94rem; } table.t thead th { position: sticky; top: 0; background: var(--bg-soft); color: var(--text); text-align: left; padding: .7rem .9rem; border-bottom: 2px solid var(--border); } table.t td { padding: .65rem .9rem; border-bottom: 1px solid var(--border); } table.t tbody tr:nth-child(even) { background: var(--row-alt); } table.t tbody tr:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .callout { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: .8rem 1rem; margin: 1.2rem 0; background: var(--bg-soft); } .callout .ic { font-size: 1.1rem; line-height: 1.5; } .callout-info { border-left-color: var(--info); } .callout-success { border-left-color: var(--success); } .callout-warning { border-left-color: var(--warning); } .callout-danger { border-left-color: var(--danger); } .badge { display: inline-block; font-size: .76rem; font-weight: 600; padding: .15em .6em; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--muted); } .badge-info { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); } .badge-success { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); } .badge-warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent); } .badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin: 1.3rem 0; } .kpi { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; } .kpi .label { font-size: .8rem; color: var(--muted); } .kpi .value { font-size: 1.7rem; font-weight: 700; margin-top: .2rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kpi-delta { font-size: .8rem; font-weight: 600; } .kpi-delta.up { color: var(--success); } .kpi-delta.down { color: var(--danger); } figure.chart { margin: 1.4rem 0; } figure.chart svg { width: 100%; height: auto; } figure.chart figcaption { font-size: .82rem; color: var(--muted); margin-top: .4rem; text-align: center; } nav.toc { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.2rem; margin: 1.5rem 0; } nav.toc strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .5rem; } nav.toc ol { margin: 0; } ol.footnotes { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); } .theme-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-size: .85rem; color: var(--muted); margin: 0 auto 1.5rem; padding: .4rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); width: max-content; } .theme-switch .track { width: 38px; height: 20px; border-radius: 999px; position: relative; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .theme-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s ease; } #theme:checked ~ main .theme-switch .track::after { transform: translateX(18px); } .switch-row { display: flex; justify-content: center; } </style> <input type="checkbox" id="theme"> <main> <div class="switch-row"> <label class="theme-switch" for="theme"> <span class="track"></span>Dark / Light </label> </div> <h1>Top auto manufacturer groups, 2010&ndash;2024</h1> <p>Vehicles in thousands. Two different bases are spliced together here &mdash; read the caveats before comparing across the 2017/2018 boundary.</p> <nav class="toc"> <strong>Contents</strong> <ol> <li><a href="#caveats">Methodology caveats</a></li> <li><a href="#table">Full table</a></li> <li><a href="#leaders">Leaders at a glance</a></li> <li><a href="#shifts">Notable shifts</a></li> </ol> </nav> <h2 id="caveats">Methodology caveats</h2> <div class="callout callout-warning"> <span class="ic">&#9888;</span> <div>The 2018&rarr; columns switch from <strong>production</strong> to <strong>sales</strong> basis. Treat that jump as a change in measurement, not a real trend.</div> </div> <ul> <li><span class="badge badge-success">2010, 2012&ndash;2017</span> &nbsp;OICA <strong>production</strong> figures (vehicles produced).</li> <li><span class="badge badge-info">2018&ndash;2024</span> &nbsp;<strong>Sales by group</strong> (F&amp;I Tools, per Wikipedia), because OICA stopped publishing production-by-manufacturer data after 2017.</li> <li><span class="badge badge-danger">Omitted</span> &nbsp;2011 OICA per-manufacturer figures and 2025 full-year figures (2011 not cleanly available; 2025 incomplete &mdash; the year isn't over).</li> </ul> <p>Group definitions also shift over time: Fiat + Chrysler &rarr; FCA &rarr; Stellantis; PSA folded into Stellantis in 2021; GM totals vary with the inclusion of SAIC-GM-Wuling. Cross-year comparisons for those groups are rough.</p> <h2 id="table">Full table</h2> <div class="t-scroll"> <table class="t"> <thead> <tr> <th>Group</th><th>2010</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th><th>2017</th><th>2018&#7506;</th><th>2019&#7506;</th><th>2020&#7506;</th><th>2021&#7506;</th><th>2022&#7506;</th><th>2023&#7506;</th><th>2024&#7506;</th> </tr> </thead> <tbody> <tr><td>Toyota</td><td>8,557</td><td>10,104</td><td>10,325</td><td>10,475</td><td>10,084</td><td>10,213</td><td>10,466</td><td>10,521</td><td>10,742</td><td>9,529</td><td>9,562</td><td>9,567</td><td>10,307</td><td>11,011</td></tr> <tr><td>Volkswagen</td><td>7,341</td><td>9,255</td><td>9,379</td><td>9,895</td><td>9,872</td><td>10,126</td><td>10,382</td><td>10,831</td><td>10,975</td><td>9,305</td><td>8,882</td><td>8,263</td><td>9,240</td><td>9,037</td></tr> <tr><td>GM</td><td>8,476</td><td>9,285</td><td>9,629</td><td>9,609</td><td>7,486</td><td>7,793</td><td>6,857</td><td>8,787</td><td>7,