{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>One in four new cars sold in 2025 was electric</title>\n<!--\n  Live Card template: one file is both the still and the motion. Render it with render_live_card at 1080 x 1440,\n  3000 ms, 30 fps, cover_ms 2900. Every move ends by 2.0 s, so the last second (and the still) is the full card.\n  To reuse it, change the words, the --n count in @keyframes count, which cars get the \"on\" fill (the first 25 here:\n  rows 1 and 2 and 5 cars of row 3), and each bar's --v (its share of the tallest bar).\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #f4efe6; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #2f9e44;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1); --step: 0.05s;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  body { width: 1080px; height: 1440px; overflow: hidden; background: var(--paper); color: var(--ink); font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; }\n  .card { position: relative; height: 100%; padding: 84px 80px 72px; display: flex; flex-direction: column; }\n  .top { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }\n  .kicker { color: var(--accent); }\n  .chip { color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; letter-spacing: 0.08em; }\n  h1 { margin-top: 44px; font-size: 64px; line-height: 1.04; font-weight: 750; letter-spacing: -0.035em; max-width: 860px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 820px; }\n  .hero { margin-top: 44px; display: flex; align-items: flex-end; justify-content: space-between; }\n  .num { font-size: 210px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; counter-reset: n var(--n); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  .num::after { content: counter(n) \"%\"; }\n  @keyframes count { from { --n: 0; } to { --n: 25; } }\n  .unit { margin-top: 18px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .plug { font-size: 220px; line-height: 1; margin: 0 6px 40px 0; animation: drop 1.2s var(--travel) 0.05s both; }\n  @keyframes drop { from { transform: translateY(-90px) rotate(-12deg); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }\n  .viz { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }\n  .g { display: grid; gap: 14px; }\n  .r { display: grid; grid-template-columns: repeat(10, 52px); gap: 8px; }\n  .r i { position: relative; display: block; width: 52px; height: 34px; color: var(--bar); }\n  .r i::before { content: \"\"; position: absolute; left: 12px; top: 0; width: 26px; height: 15px; border-radius: 10px 12px 0 0; background: currentColor; }\n  .r i::after { content: \"\"; position: absolute; left: 0; top: 12px; width: 52px; height: 14px; border-radius: 6px 9px 4px 4px; background: currentColor; }\n  .r b, .r b::after { position: absolute; z-index: 1; box-sizing: border-box; bottom: 0; width: 17px; height: 17px; border-radius: 50%; background: currentColor; border: 3px solid var(--paper); }\n  .r b { left: 6px; }\n  .r b::after { content: \"\"; left: 20px; bottom: -3px; }\n  .r i:nth-child(2) { --c: 1; } .r i:nth-child(3) { --c: 2; } .r i:nth-child(4) { --c: 3; } .r i:nth-child(5) { --c: 4; }\n  .r i:nth-child(6) { --c: 5; } .r i:nth-child(7) { --c: 6; } .r i:nth-child(8) { --c: 7; } .r i:nth-child(9) { --c: 8; } .r i:nth-child(10) { --c: 9; }\n  .r:nth-child(-n+2) i, .r:nth-child(3) i:nth-child(-n+5) { animation: on 0.4s var(--enter) both; animation-delay: calc(0.25s + (var(--r) * 10 + var(--c, 0)) * var(--step)); }\n  @keyframes on { from { color: var(--bar); transform: translateX(-14px); } to { color: var(--accent); transform: none; } }\n  .side { width: 300px; }\n  .key { font-size: 21px; line-height: 1.4; color: var(--muted); padding-bottom: 20px; border-bottom: 2px solid var(--line); }\n  .key strong { color: var(--ink); font-weight: 600; }\n  .chart { margin-top: 52px; height: 240px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; border-bottom: 3px solid var(--ink); }\n  .bar { position: relative; height: calc(var(--v) * 100%); background: var(--bar); border-radius: 6px 6px 0 0; animation: grow 0.8s var(--enter) both; animation-delay: calc(0.3s + var(--i) * 0.08s); }\n  .bar.now { background: var(--accent); }\n  .bar b { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; animation: show 0.4s var(--enter) both; animation-delay: calc(0.9s + var(--i) * 0.08s); }\n  .bar.now b { color: var(--accent); }\n  @keyframes grow { from { height: 0; } }\n  .years { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 10px; font-size: 19px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }\n  .years .now { color: var(--ink); font-weight: 700; }\n  .foot { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; gap: 32px; font-size: 19px; line-height: 1.45; color: var(--muted); }\n  .foot strong { color: var(--ink); font-weight: 600; }\n  .made { white-space: nowrap; }\n  .fade { animation: fade 0.5s var(--enter) both; }\n  @keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }\n  @keyframes show { from { opacity: 0; } }\n</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Electric cars</span><span class=\"chip\">2019 to 2025</span></div>\n  <h1>One in four new cars sold in 2025 was electric</h1>\n  <p class=\"sub\">Electric share of new car sales worldwide, battery and plug-in hybrid. About 21 million were sold in 2025.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"25%\"></div>\n      <p class=\"unit\">of new cars were electric<span>up from 2.7% in 2019</span></p>\n    </div>\n    <div class=\"plug\" aria-hidden=\"true\">🔋</div>\n  </div>\n  <div class=\"viz\">\n    <div class=\"g\" role=\"img\" aria-label=\"100 car icons, 25 filled: 25% of new cars sold in 2025 were electric\">\n      <div class=\"r\" style=\"--r:0\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:1\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:2\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:3\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:4\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:5\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:6\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:7\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:8\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:9\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n    </div>\n    <div class=\"side\">\n      <p class=\"key\"><strong>1 car = 1% of new cars sold.</strong> Green is electric. Bars show the share each year, in %.</p>\n      <div class=\"chart\" role=\"img\" aria-label=\"Electric share of new car sales: 2.7% in 2019, 4.4, 9.3, 15, 18, 21 and 25% in 2025\">\n        <div class=\"bar\" style=\"--v:0.108;--i:0\"><b>2.7</b></div>\n        <div class=\"bar\" style=\"--v:0.176;--i:1\"></div>\n        <div class=\"bar\" style=\"--v:0.372;--i:2\"></div>\n        <div class=\"bar\" style=\"--v:0.600;--i:3\"><b>15</b></div>\n        <div class=\"bar\" style=\"--v:0.720;--i:4\"></div>\n        <div class=\"bar\" style=\"--v:0.840;--i:5\"></div>\n        <div class=\"bar now\" style=\"--v:1;--i:6\"><b>25</b></div>\n      </div>\n      <div class=\"years\"><span>'19</span><span>'20</span><span>'21</span><span>'22</span><span>'23</span><span>'24</span><span class=\"now\">'25</span></div>\n    </div>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> IEA, Global EV Outlook 2026, Trends in electric cars, 20 May 2026. Passenger cars only.</p>\n    <p class=\"made\">Made with Live Card</p>\n  </footer>\n</main>\n</body>\n</html>\n",
 "motion_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>One in four new cars sold in 2025 was electric</title>\n<!--\n  Live Card template: one file is both the still and the motion. Render it with render_live_card at 1080 x 1440,\n  3000 ms, 30 fps, cover_ms 2900. Every move ends by 2.0 s, so the last second (and the still) is the full card.\n  To reuse it, change the words, the --n count in @keyframes count, which cars get the \"on\" fill (the first 25 here:\n  rows 1 and 2 and 5 cars of row 3), and each bar's --v (its share of the tallest bar).\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #f4efe6; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #2f9e44;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1); --step: 0.05s;\n  }\n  * { box-sizing: border-box; margin: 0; }\n  body { width: 1080px; height: 1440px; overflow: hidden; background: var(--paper); color: var(--ink); font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; }\n  .card { position: relative; height: 100%; padding: 84px 80px 72px; display: flex; flex-direction: column; }\n  .top { display: flex; justify-content: space-between; align-items: center; font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }\n  .kicker { color: var(--accent); }\n  .chip { color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 8px 18px; letter-spacing: 0.08em; }\n  h1 { margin-top: 44px; font-size: 64px; line-height: 1.04; font-weight: 750; letter-spacing: -0.035em; max-width: 860px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 820px; }\n  .hero { margin-top: 44px; display: flex; align-items: flex-end; justify-content: space-between; }\n  .num { font-size: 210px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; counter-reset: n var(--n); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  .num::after { content: counter(n) \"%\"; }\n  @keyframes count { from { --n: 0; } to { --n: 25; } }\n  .unit { margin-top: 18px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .plug { font-size: 220px; line-height: 1; margin: 0 6px 40px 0; animation: drop 1.2s var(--travel) 0.05s both; }\n  @keyframes drop { from { transform: translateY(-90px) rotate(-12deg); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }\n  .viz { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }\n  .g { display: grid; gap: 14px; }\n  .r { display: grid; grid-template-columns: repeat(10, 52px); gap: 8px; }\n  .r i { position: relative; display: block; width: 52px; height: 34px; color: var(--bar); }\n  .r i::before { content: \"\"; position: absolute; left: 12px; top: 0; width: 26px; height: 15px; border-radius: 10px 12px 0 0; background: currentColor; }\n  .r i::after { content: \"\"; position: absolute; left: 0; top: 12px; width: 52px; height: 14px; border-radius: 6px 9px 4px 4px; background: currentColor; }\n  .r b, .r b::after { position: absolute; z-index: 1; box-sizing: border-box; bottom: 0; width: 17px; height: 17px; border-radius: 50%; background: currentColor; border: 3px solid var(--paper); }\n  .r b { left: 6px; }\n  .r b::after { content: \"\"; left: 20px; bottom: -3px; }\n  .r i:nth-child(2) { --c: 1; } .r i:nth-child(3) { --c: 2; } .r i:nth-child(4) { --c: 3; } .r i:nth-child(5) { --c: 4; }\n  .r i:nth-child(6) { --c: 5; } .r i:nth-child(7) { --c: 6; } .r i:nth-child(8) { --c: 7; } .r i:nth-child(9) { --c: 8; } .r i:nth-child(10) { --c: 9; }\n  .r:nth-child(-n+2) i, .r:nth-child(3) i:nth-child(-n+5) { animation: on 0.4s var(--enter) both; animation-delay: calc(0.25s + (var(--r) * 10 + var(--c, 0)) * var(--step)); }\n  @keyframes on { from { color: var(--bar); transform: translateX(-14px); } to { color: var(--accent); transform: none; } }\n  .side { width: 300px; }\n  .key { font-size: 21px; line-height: 1.4; color: var(--muted); padding-bottom: 20px; border-bottom: 2px solid var(--line); }\n  .key strong { color: var(--ink); font-weight: 600; }\n  .chart { margin-top: 52px; height: 240px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; border-bottom: 3px solid var(--ink); }\n  .bar { position: relative; height: calc(var(--v) * 100%); background: var(--bar); border-radius: 6px 6px 0 0; animation: grow 0.8s var(--enter) both; animation-delay: calc(0.3s + var(--i) * 0.08s); }\n  .bar.now { background: var(--accent); }\n  .bar b { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; animation: show 0.4s var(--enter) both; animation-delay: calc(0.9s + var(--i) * 0.08s); }\n  .bar.now b { color: var(--accent); }\n  @keyframes grow { from { height: 0; } }\n  .years { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 10px; font-size: 19px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }\n  .years .now { color: var(--ink); font-weight: 700; }\n  .foot { margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--line); display: flex; justify-content: space-between; gap: 32px; font-size: 19px; line-height: 1.45; color: var(--muted); }\n  .foot strong { color: var(--ink); font-weight: 600; }\n  .made { white-space: nowrap; }\n  .fade { animation: fade 0.5s var(--enter) both; }\n  @keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }\n  @keyframes show { from { opacity: 0; } }\n</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Electric cars</span><span class=\"chip\">2019 to 2025</span></div>\n  <h1>One in four new cars sold in 2025 was electric</h1>\n  <p class=\"sub\">Electric share of new car sales worldwide, battery and plug-in hybrid. About 21 million were sold in 2025.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"25%\"></div>\n      <p class=\"unit\">of new cars were electric<span>up from 2.7% in 2019</span></p>\n    </div>\n    <div class=\"plug\" aria-hidden=\"true\">🔋</div>\n  </div>\n  <div class=\"viz\">\n    <div class=\"g\" role=\"img\" aria-label=\"100 car icons, 25 filled: 25% of new cars sold in 2025 were electric\">\n      <div class=\"r\" style=\"--r:0\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:1\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:2\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:3\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:4\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:5\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:6\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:7\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:8\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n      <div class=\"r\" style=\"--r:9\"><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i><i><b></b></i></div>\n    </div>\n    <div class=\"side\">\n      <p class=\"key\"><strong>1 car = 1% of new cars sold.</strong> Green is electric. Bars show the share each year, in %.</p>\n      <div class=\"chart\" role=\"img\" aria-label=\"Electric share of new car sales: 2.7% in 2019, 4.4, 9.3, 15, 18, 21 and 25% in 2025\">\n        <div class=\"bar\" style=\"--v:0.108;--i:0\"><b>2.7</b></div>\n        <div class=\"bar\" style=\"--v:0.176;--i:1\"></div>\n        <div class=\"bar\" style=\"--v:0.372;--i:2\"></div>\n        <div class=\"bar\" style=\"--v:0.600;--i:3\"><b>15</b></div>\n        <div class=\"bar\" style=\"--v:0.720;--i:4\"></div>\n        <div class=\"bar\" style=\"--v:0.840;--i:5\"></div>\n        <div class=\"bar now\" style=\"--v:1;--i:6\"><b>25</b></div>\n      </div>\n      <div class=\"years\"><span>'19</span><span>'20</span><span>'21</span><span>'22</span><span>'23</span><span>'24</span><span class=\"now\">'25</span></div>\n    </div>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> IEA, Global EV Outlook 2026, Trends in electric cars, 20 May 2026. Passenger cars only.</p>\n    <p class=\"made\">Made with Live Card</p>\n  </footer>\n</main>\n</body>\n</html>\n",
 "width": 1080,
 "height": 1440,
 "duration_ms": 3000,
 "fps": 30,
 "cover_ms": 2900
}
