{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Atlanta, 106.3 million passengers 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 end in @keyframes count (tenths: 1063 is 106.3), and each bar's --v\n  (its share of the longest bar, measured from zero). The plane flies with the end of the first bar (same timing).\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --a { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --d { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #e8eef5; --ink: #1c1a17; --muted: #5d6570; --line: #cdd7e2; --bar: #cbd6e2; --accent: #1971c2;\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; --a: calc(var(--n) / 10 - 0.5); --d: calc(var(--n) - var(--a) * 10); counter-reset: a var(--a) d var(--d); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  .num::after { content: counter(a) \".\" counter(d); }\n  @keyframes count { from { --n: 0; } to { --n: 1063; } }\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  .bag { font-size: 210px; line-height: 1; margin: 0 6px 40px 0; animation: drop 0.6s var(--enter) 0.1s both; }\n  @keyframes drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }\n  .chart { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 28px; }\n  .row { display: flex; align-items: center; gap: 22px; }\n  .code { flex: none; width: 104px; text-align: center; font: 600 24px \"JetBrains Mono\", monospace; letter-spacing: 0.04em; color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 6px 0; }\n  .track { position: relative; flex: none; width: 690px; height: 70px; margin-right: 104px; }\n  .bar { position: relative; height: 100%; width: calc(var(--v) * 100%); background: var(--bar); border-radius: 0 12px 12px 0; overflow: hidden; animation: grow 1.3s var(--travel) both; animation-delay: calc(0.3s + var(--i) * 0.08s); }\n  .bar p { width: calc(var(--v) * 690px); height: 100%; white-space: nowrap; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 28px; font-weight: 600; }\n  .bar b { font-weight: 750; font-variant-numeric: tabular-nums; }\n  .top1 .code, .top1 .bar { color: #fff; background: var(--accent); border-color: var(--accent); }\n  @keyframes grow { from { width: 0; } }\n  .plane { position: absolute; left: 100%; top: 50%; margin: -42px 0 0 10px; font-size: 76px; line-height: 1; transform: rotate(45deg); animation: fly 1.3s var(--travel) 0.3s both; }\n  @keyframes fly { from { left: 0; } }\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</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Air travel</span><span class=\"chip\">2025</span></div>\n  <h1>Atlanta is still the world's busiest airport</h1>\n  <p class=\"sub\">Passengers at the five busiest airports in 2025, in millions. Each bar is to scale from zero.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"106.3\"></div>\n      <p class=\"unit\">million passengers at Atlanta<span>11.1 million more than Dubai, in second place</span></p>\n    </div>\n    <div class=\"bag\" aria-hidden=\"true\">🧳</div>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Bar chart in millions of passengers: Atlanta 106.3, Dubai 95.2, Tokyo Haneda 91.7, Dallas/Fort Worth 85.7, Shanghai Pudong 85.0\">\n    <div class=\"row top1\"><span class=\"code\">ATL</span><div class=\"track\"><div class=\"bar\" style=\"--v:1;--i:0\"><p>Atlanta<b>106.3 million</b></p></div><span class=\"plane\" aria-hidden=\"true\">✈️</span></div></div>\n    <div class=\"row\"><span class=\"code\">DXB</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.895;--i:1\"><p>Dubai<b>95.2</b></p></div></div></div>\n    <div class=\"row\"><span class=\"code\">HND</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.862;--i:2\"><p>Tokyo Haneda<b>91.7</b></p></div></div></div>\n    <div class=\"row\"><span class=\"code\">DFW</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.806;--i:3\"><p>Dallas/Fort Worth<b>85.7</b></p></div></div></div>\n    <div class=\"row\"><span class=\"code\">PVG</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.800;--i:4\"><p>Shanghai Pudong<b>85.0</b></p></div></div></div>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> ACI World, World's Busiest Airports, final 2025 rankings, 15 Jul 2026. Arriving plus departing passengers, transit counted once.</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>Atlanta, 106.3 million passengers 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 end in @keyframes count (tenths: 1063 is 106.3), and each bar's --v\n  (its share of the longest bar, measured from zero). The plane flies with the end of the first bar (same timing).\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --a { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --d { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #e8eef5; --ink: #1c1a17; --muted: #5d6570; --line: #cdd7e2; --bar: #cbd6e2; --accent: #1971c2;\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; --a: calc(var(--n) / 10 - 0.5); --d: calc(var(--n) - var(--a) * 10); counter-reset: a var(--a) d var(--d); animation: count 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }\n  .num::after { content: counter(a) \".\" counter(d); }\n  @keyframes count { from { --n: 0; } to { --n: 1063; } }\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  .bag { font-size: 210px; line-height: 1; margin: 0 6px 40px 0; animation: drop 0.6s var(--enter) 0.1s both; }\n  @keyframes drop { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }\n  .chart { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 28px; }\n  .row { display: flex; align-items: center; gap: 22px; }\n  .code { flex: none; width: 104px; text-align: center; font: 600 24px \"JetBrains Mono\", monospace; letter-spacing: 0.04em; color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 6px 0; }\n  .track { position: relative; flex: none; width: 690px; height: 70px; margin-right: 104px; }\n  .bar { position: relative; height: 100%; width: calc(var(--v) * 100%); background: var(--bar); border-radius: 0 12px 12px 0; overflow: hidden; animation: grow 1.3s var(--travel) both; animation-delay: calc(0.3s + var(--i) * 0.08s); }\n  .bar p { width: calc(var(--v) * 690px); height: 100%; white-space: nowrap; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-size: 28px; font-weight: 600; }\n  .bar b { font-weight: 750; font-variant-numeric: tabular-nums; }\n  .top1 .code, .top1 .bar { color: #fff; background: var(--accent); border-color: var(--accent); }\n  @keyframes grow { from { width: 0; } }\n  .plane { position: absolute; left: 100%; top: 50%; margin: -42px 0 0 10px; font-size: 76px; line-height: 1; transform: rotate(45deg); animation: fly 1.3s var(--travel) 0.3s both; }\n  @keyframes fly { from { left: 0; } }\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</style>\n</head>\n<body>\n<main class=\"card\">\n  <div class=\"top\"><span class=\"kicker\">Air travel</span><span class=\"chip\">2025</span></div>\n  <h1>Atlanta is still the world's busiest airport</h1>\n  <p class=\"sub\">Passengers at the five busiest airports in 2025, in millions. Each bar is to scale from zero.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"106.3\"></div>\n      <p class=\"unit\">million passengers at Atlanta<span>11.1 million more than Dubai, in second place</span></p>\n    </div>\n    <div class=\"bag\" aria-hidden=\"true\">🧳</div>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Bar chart in millions of passengers: Atlanta 106.3, Dubai 95.2, Tokyo Haneda 91.7, Dallas/Fort Worth 85.7, Shanghai Pudong 85.0\">\n    <div class=\"row top1\"><span class=\"code\">ATL</span><div class=\"track\"><div class=\"bar\" style=\"--v:1;--i:0\"><p>Atlanta<b>106.3 million</b></p></div><span class=\"plane\" aria-hidden=\"true\">✈️</span></div></div>\n    <div class=\"row\"><span class=\"code\">DXB</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.895;--i:1\"><p>Dubai<b>95.2</b></p></div></div></div>\n    <div class=\"row\"><span class=\"code\">HND</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.862;--i:2\"><p>Tokyo Haneda<b>91.7</b></p></div></div></div>\n    <div class=\"row\"><span class=\"code\">DFW</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.806;--i:3\"><p>Dallas/Fort Worth<b>85.7</b></p></div></div></div>\n    <div class=\"row\"><span class=\"code\">PVG</span><div class=\"track\"><div class=\"bar\" style=\"--v:0.800;--i:4\"><p>Shanghai Pudong<b>85.0</b></p></div></div></div>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> ACI World, World's Busiest Airports, final 2025 rankings, 15 Jul 2026. Arriving plus departing passengers, transit counted once.</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
}
