{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>2,778 TWh of solar power in 2025</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 start and end in @keyframes count, and each bar's --v (its share of the tallest bar).\n  The hero prints --n with a thousands separator, for any number up to 999,999: --k is the thousands part and --r the\n  rest. Once --n reaches 1,000 the comma shows and --r prints with 3 digits; below that --k and the comma print nothing.\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --k { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --r { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --c { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --rp { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --rq { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @counter-style blank { system: cyclic; symbols: \"\"; }\n  @counter-style above0 { system: extends decimal; range: 1 infinite; fallback: blank; }\n  @counter-style from0 { system: extends decimal; range: 0 infinite; fallback: blank; }\n  @counter-style pad3 { system: extends decimal; pad: 3 \"0\"; range: 0 infinite; fallback: blank; }\n  @counter-style comma { system: fixed 0; symbols: \"\" \",\"; }\n  :root {\n    --paper: #f3ead8; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #ddcfb4; --accent: #d9480f;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1);\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: 200px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; --k: calc(var(--n) / 1000 - 0.5); --r: calc(var(--n) - var(--k) * 1000); --c: min(var(--k), 1); --rp: calc(var(--r) * var(--c) + var(--c) - 1); --rq: calc(var(--r) * (1 - var(--c)) - var(--c)); counter-reset: k var(--k) c var(--c) rp var(--rp) rq var(--rq); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  /* --rp is the rest once there is a comma and --rq the rest before; the one not in use is -1 and prints nothing. */\n  .num::after { content: counter(k, above0) counter(c, comma) counter(rp, pad3) counter(rq, from0); }\n  @keyframes count { from { --n: 256; } to { --n: 2778; } }\n  .unit { margin-top: 40px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .sun { font-size: 220px; line-height: 1; margin: 0 6px 64px 0; animation: rise 1.4s var(--enter) 0.1s both; }\n  @keyframes rise { from { transform: translateY(90px) rotate(-40deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }\n  .chart { position: relative; margin-top: auto; height: 480px; display: grid; grid-template-columns: repeat(11, 1fr); gap: 18px; align-items: end; border-bottom: 3px solid var(--ink); }\n  .bar { position: relative; height: calc(var(--v) * 100%); background: var(--bar); border-radius: 10px 10px 0 0; animation: grow 0.9s var(--enter) both; animation-delay: calc(0.25s + var(--i) * 0.07s); }\n  .bar.now { background: var(--accent); }\n  .bar b { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }\n  .bar.now b { color: var(--accent); left: auto; right: 0; transform: none; }\n  @keyframes grow { from { height: 0; } }\n  .bar b { animation: show 0.4s var(--enter) both; animation-delay: calc(0.9s + var(--i) * 0.07s); }\n  .years { display: grid; grid-template-columns: repeat(11, 1fr); gap: 18px; margin-top: 14px; font-size: 21px; 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\">Solar power</span><span class=\"chip\">2015 to 2025</span></div>\n  <h1>Solar power grew more than tenfold in ten years</h1>\n  <p class=\"sub\">World solar generation per year, in TWh. 2025 added a record 636&nbsp;TWh, up 30% on 2024.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"2,778\"></div>\n      <p class=\"unit\">TWh of solar power in 2025<span>up from 256 TWh in 2015</span></p>\n    </div>\n    <div class=\"sun\" aria-hidden=\"true\">☀️</div>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Bar chart in TWh: 256 in 2015, 328, 445, 575, 698, 853, 1,054, 1,333, 1,664, 2,143 and 2,778 in 2025\">\n    <div class=\"bar\" style=\"--v:0.092;--i:0\"><b>256</b></div>\n    <div class=\"bar\" style=\"--v:0.118;--i:1\"></div>\n    <div class=\"bar\" style=\"--v:0.160;--i:2\"></div>\n    <div class=\"bar\" style=\"--v:0.207;--i:3\"></div>\n    <div class=\"bar\" style=\"--v:0.251;--i:4\"></div>\n    <div class=\"bar\" style=\"--v:0.307;--i:5\"></div>\n    <div class=\"bar\" style=\"--v:0.379;--i:6\"></div>\n    <div class=\"bar\" style=\"--v:0.480;--i:7\"></div>\n    <div class=\"bar\" style=\"--v:0.599;--i:8\"></div>\n    <div class=\"bar\" style=\"--v:0.771;--i:9\"><b>2,143</b></div>\n    <div class=\"bar now\" style=\"--v:1;--i:10\"><b>2,778</b></div>\n  </div>\n  <div class=\"years\"><span>'15</span><span>'16</span><span>'17</span><span>'18</span><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  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> Ember, Global Electricity Review 2026, 21 Apr 2026, and its yearly electricity data. 2025 includes estimated country data.</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>2,778 TWh of solar power in 2025</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 start and end in @keyframes count, and each bar's --v (its share of the tallest bar).\n  The hero prints --n with a thousands separator, for any number up to 999,999: --k is the thousands part and --r the\n  rest. Once --n reaches 1,000 the comma shows and --r prints with 3 digits; below that --k and the comma print nothing.\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --k { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --r { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --c { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --rp { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --rq { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @counter-style blank { system: cyclic; symbols: \"\"; }\n  @counter-style above0 { system: extends decimal; range: 1 infinite; fallback: blank; }\n  @counter-style from0 { system: extends decimal; range: 0 infinite; fallback: blank; }\n  @counter-style pad3 { system: extends decimal; pad: 3 \"0\"; range: 0 infinite; fallback: blank; }\n  @counter-style comma { system: fixed 0; symbols: \"\" \",\"; }\n  :root {\n    --paper: #f3ead8; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #ddcfb4; --accent: #d9480f;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1);\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: 200px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums; --k: calc(var(--n) / 1000 - 0.5); --r: calc(var(--n) - var(--k) * 1000); --c: min(var(--k), 1); --rp: calc(var(--r) * var(--c) + var(--c) - 1); --rq: calc(var(--r) * (1 - var(--c)) - var(--c)); counter-reset: k var(--k) c var(--c) rp var(--rp) rq var(--rq); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  /* --rp is the rest once there is a comma and --rq the rest before; the one not in use is -1 and prints nothing. */\n  .num::after { content: counter(k, above0) counter(c, comma) counter(rp, pad3) counter(rq, from0); }\n  @keyframes count { from { --n: 256; } to { --n: 2778; } }\n  .unit { margin-top: 40px; font-size: 30px; font-weight: 600; }\n  .unit span { display: block; color: var(--muted); font-weight: 500; font-size: 26px; margin-top: 6px; }\n  .sun { font-size: 220px; line-height: 1; margin: 0 6px 64px 0; animation: rise 1.4s var(--enter) 0.1s both; }\n  @keyframes rise { from { transform: translateY(90px) rotate(-40deg); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }\n  .chart { position: relative; margin-top: auto; height: 480px; display: grid; grid-template-columns: repeat(11, 1fr); gap: 18px; align-items: end; border-bottom: 3px solid var(--ink); }\n  .bar { position: relative; height: calc(var(--v) * 100%); background: var(--bar); border-radius: 10px 10px 0 0; animation: grow 0.9s var(--enter) both; animation-delay: calc(0.25s + var(--i) * 0.07s); }\n  .bar.now { background: var(--accent); }\n  .bar b { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }\n  .bar.now b { color: var(--accent); left: auto; right: 0; transform: none; }\n  @keyframes grow { from { height: 0; } }\n  .bar b { animation: show 0.4s var(--enter) both; animation-delay: calc(0.9s + var(--i) * 0.07s); }\n  .years { display: grid; grid-template-columns: repeat(11, 1fr); gap: 18px; margin-top: 14px; font-size: 21px; 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\">Solar power</span><span class=\"chip\">2015 to 2025</span></div>\n  <h1>Solar power grew more than tenfold in ten years</h1>\n  <p class=\"sub\">World solar generation per year, in TWh. 2025 added a record 636&nbsp;TWh, up 30% on 2024.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"2,778\"></div>\n      <p class=\"unit\">TWh of solar power in 2025<span>up from 256 TWh in 2015</span></p>\n    </div>\n    <div class=\"sun\" aria-hidden=\"true\">☀️</div>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Bar chart in TWh: 256 in 2015, 328, 445, 575, 698, 853, 1,054, 1,333, 1,664, 2,143 and 2,778 in 2025\">\n    <div class=\"bar\" style=\"--v:0.092;--i:0\"><b>256</b></div>\n    <div class=\"bar\" style=\"--v:0.118;--i:1\"></div>\n    <div class=\"bar\" style=\"--v:0.160;--i:2\"></div>\n    <div class=\"bar\" style=\"--v:0.207;--i:3\"></div>\n    <div class=\"bar\" style=\"--v:0.251;--i:4\"></div>\n    <div class=\"bar\" style=\"--v:0.307;--i:5\"></div>\n    <div class=\"bar\" style=\"--v:0.379;--i:6\"></div>\n    <div class=\"bar\" style=\"--v:0.480;--i:7\"></div>\n    <div class=\"bar\" style=\"--v:0.599;--i:8\"></div>\n    <div class=\"bar\" style=\"--v:0.771;--i:9\"><b>2,143</b></div>\n    <div class=\"bar now\" style=\"--v:1;--i:10\"><b>2,778</b></div>\n  </div>\n  <div class=\"years\"><span>'15</span><span>'16</span><span>'17</span><span>'18</span><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  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> Ember, Global Electricity Review 2026, 21 Apr 2026, and its yearly electricity data. 2025 includes estimated country data.</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
}
