{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>The marathon record fell below two hours</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 --t range in @keyframes count (seconds), and the step path: x is the record\n  date on a 2003 to 2027 axis (100 to 900), y is the time on a 2:05:00 to 1:59:00 axis (56 to 480, 1.178 px per second).\n-->\n<style>\n  @property --t { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --h { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --m { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --s { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #f4efe6; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #1971c2;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1); --count: cubic-bezier(0.45, 0, 0.25, 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: 880px; text-wrap: balance; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 840px; text-wrap: balance; }\n  .hero { margin-top: 44px; display: flex; align-items: flex-end; justify-content: space-between; }\n  /* --t is the time in seconds; integer rounding of the offsets below gives whole hours and minutes. */\n  .num { --h: calc((var(--t) - 1800) / 3600); --m: calc((var(--t) - var(--h) * 3600 - 30) / 60); --s: calc(var(--t) - var(--h) * 3600 - var(--m) * 60);\n    font-size: 180px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums;\n    counter-reset: h var(--h) m var(--m) s var(--s); animation: count 1.6s var(--count) 0.25s both; }\n  .num::after { content: counter(h) \":\" counter(m, decimal-leading-zero) \":\" counter(s, decimal-leading-zero); }\n  @keyframes count { from { --t: 7495; } to { --t: 7170; } }\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  .emoji { font-size: 200px; line-height: 1; margin: 0 4px 56px 0; animation: rise 0.6s var(--enter) 0.05s both; }\n  @keyframes rise { from { transform: translateY(60px) scale(0.85); opacity: 0; } }\n  .chart { display: block; margin-top: auto; width: 920px; height: 540px; overflow: visible; font-variant-numeric: tabular-nums; }\n  .grid line { stroke: var(--line); stroke-width: 2; }\n  .grid text, .yr { font-size: 22px; fill: var(--muted); }\n  .yr { text-anchor: middle; }\n  .two { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 8; }\n  .twol { font-size: 22px; font-weight: 700; fill: var(--accent); }\n  .step, .fin { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.2s var(--count) 0.25s both; }\n  .fin { stroke: var(--accent); animation: draw 0.4s var(--enter) 1.45s both; }\n  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n  .dots circle { fill: var(--paper); stroke: var(--ink); stroke-width: 4; animation: show 0.25s var(--enter) var(--d) both; }\n  .dots .now { fill: var(--accent); stroke: var(--accent); }\n  .lab { font-size: 23px; font-weight: 600; fill: var(--ink); animation: show 0.4s var(--enter) var(--d, 0.3s) both; }\n  .lab.end { text-anchor: end; }\n  .lab.now { fill: var(--accent); 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\">Athletics</span><span class=\"chip\">2003 to 2026</span></div>\n  <h1>The marathon world record finally fell below two hours</h1>\n  <p class=\"sub\">Men's marathon world record, each new mark from 2003 to 2026, in hours, minutes and seconds.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"1:59:30\"></div>\n      <p class=\"unit\">Sabastian Sawe, London, 26 Apr 2026<span>the first record under 2:00:00</span></p>\n    </div>\n    <div class=\"emoji\" aria-hidden=\"true\">⏱️</div>\n  </div>\n  <svg class=\"chart\" viewBox=\"0 0 920 540\" role=\"img\" aria-label=\"Step chart of the men's marathon world record: 2:04:55 in 2003 falling through nine records to 1:59:30 in 2026, the first under 2:00:00\">\n    <g class=\"grid\"><line x1=\"100\" x2=\"900\" y1=\"56.0\" y2=\"56.0\"/><text x=\"0\" y=\"64.0\">2:05</text><line x1=\"100\" x2=\"900\" y1=\"126.7\" y2=\"126.7\"/><text x=\"0\" y=\"134.7\">2:04</text><line x1=\"100\" x2=\"900\" y1=\"197.3\" y2=\"197.3\"/><text x=\"0\" y=\"205.3\">2:03</text><line x1=\"100\" x2=\"900\" y1=\"268.0\" y2=\"268.0\"/><text x=\"0\" y=\"276.0\">2:02</text><line x1=\"100\" x2=\"900\" y1=\"338.7\" y2=\"338.7\"/><text x=\"0\" y=\"346.7\">2:01</text><line x1=\"100\" x2=\"900\" y1=\"480.0\" y2=\"480.0\"/><text x=\"0\" y=\"488.0\">1:59</text></g>\n    <line class=\"two\" x1=\"100\" x2=\"900\" y1=\"409.3\" y2=\"409.3\"/><text class=\"twol\" x=\"0\" y=\"417.3\">2:00</text>\n    <path class=\"step\" pathLength=\"1\" d=\"M124.7 61.9 H258.2 V96.0 H291.4 V127.8 H391.1 V152.6 H458.1 V170.2 H491.3 V200.9 H623.6 V292.7 H757.7 V328.1 H792.2 V368.1\"/>\n    <path class=\"fin\" pathLength=\"1\" d=\"M792.2 368.1 H877.2 V444.7\"/>\n    <g class=\"dots\"><circle cx=\"124.7\" cy=\"61.9\" r=\"9\" style=\"--d:0.25s\"/><circle cx=\"258.2\" cy=\"96.0\" r=\"9\" style=\"--d:0.55s\"/><circle cx=\"291.4\" cy=\"127.8\" r=\"9\" style=\"--d:0.59s\"/><circle cx=\"391.1\" cy=\"152.6\" r=\"9\" style=\"--d:0.65s\"/><circle cx=\"458.1\" cy=\"170.2\" r=\"9\" style=\"--d:0.69s\"/><circle cx=\"491.3\" cy=\"200.9\" r=\"9\" style=\"--d:0.72s\"/><circle cx=\"623.6\" cy=\"292.7\" r=\"9\" style=\"--d:0.87s\"/><circle cx=\"757.7\" cy=\"328.1\" r=\"9\" style=\"--d:1.08s\"/><circle cx=\"792.2\" cy=\"368.1\" r=\"9\" style=\"--d:1.45s\"/><circle class=\"now\" cx=\"877.2\" cy=\"444.7\" r=\"13\" style=\"--d:1.65s\"/></g>\n    <text class=\"lab\" x=\"114.7\" y=\"35.9\">2:04:55 Tergat, 2003</text>\n    <text class=\"lab end\" x=\"603.6\" y=\"300.7\" style=\"--d:1.0s\">2:01:39 Kipchoge, 2018</text>\n    <text class=\"lab end\" x=\"772.2\" y=\"376.1\" style=\"--d:1.35s\">2:00:35 Kiptum, 2023</text>\n    <text class=\"lab end now\" x=\"853.2\" y=\"453.7\" style=\"--d:1.6s\">1:59:30 Sawe, 2026</text>\n    <g><text class=\"yr\" x=\"166.7\" y=\"524\">2005</text><text class=\"yr\" x=\"333.3\" y=\"524\">2010</text><text class=\"yr\" x=\"500.0\" y=\"524\">2015</text><text class=\"yr\" x=\"666.7\" y=\"524\">2020</text><text class=\"yr\" x=\"833.3\" y=\"524\">2025</text></g>\n  </svg>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> World Athletics, World Record Progression of Marathon (Men, Senior), 2026. Each dot is one new record.</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>The marathon record fell below two hours</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 --t range in @keyframes count (seconds), and the step path: x is the record\n  date on a 2003 to 2027 axis (100 to 900), y is the time on a 2:05:00 to 1:59:00 axis (56 to 480, 1.178 px per second).\n-->\n<style>\n  @property --t { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --h { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --m { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  @property --s { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #f4efe6; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #1971c2;\n    --enter: cubic-bezier(0.23, 1, 0.32, 1); --travel: cubic-bezier(0.77, 0, 0.175, 1); --count: cubic-bezier(0.45, 0, 0.25, 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: 880px; text-wrap: balance; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 840px; text-wrap: balance; }\n  .hero { margin-top: 44px; display: flex; align-items: flex-end; justify-content: space-between; }\n  /* --t is the time in seconds; integer rounding of the offsets below gives whole hours and minutes. */\n  .num { --h: calc((var(--t) - 1800) / 3600); --m: calc((var(--t) - var(--h) * 3600 - 30) / 60); --s: calc(var(--t) - var(--h) * 3600 - var(--m) * 60);\n    font-size: 180px; line-height: 0.82; font-weight: 800; letter-spacing: -0.05em; color: var(--accent); font-variant-numeric: tabular-nums;\n    counter-reset: h var(--h) m var(--m) s var(--s); animation: count 1.6s var(--count) 0.25s both; }\n  .num::after { content: counter(h) \":\" counter(m, decimal-leading-zero) \":\" counter(s, decimal-leading-zero); }\n  @keyframes count { from { --t: 7495; } to { --t: 7170; } }\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  .emoji { font-size: 200px; line-height: 1; margin: 0 4px 56px 0; animation: rise 0.6s var(--enter) 0.05s both; }\n  @keyframes rise { from { transform: translateY(60px) scale(0.85); opacity: 0; } }\n  .chart { display: block; margin-top: auto; width: 920px; height: 540px; overflow: visible; font-variant-numeric: tabular-nums; }\n  .grid line { stroke: var(--line); stroke-width: 2; }\n  .grid text, .yr { font-size: 22px; fill: var(--muted); }\n  .yr { text-anchor: middle; }\n  .two { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 8; }\n  .twol { font-size: 22px; font-weight: 700; fill: var(--accent); }\n  .step, .fin { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.2s var(--count) 0.25s both; }\n  .fin { stroke: var(--accent); animation: draw 0.4s var(--enter) 1.45s both; }\n  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n  .dots circle { fill: var(--paper); stroke: var(--ink); stroke-width: 4; animation: show 0.25s var(--enter) var(--d) both; }\n  .dots .now { fill: var(--accent); stroke: var(--accent); }\n  .lab { font-size: 23px; font-weight: 600; fill: var(--ink); animation: show 0.4s var(--enter) var(--d, 0.3s) both; }\n  .lab.end { text-anchor: end; }\n  .lab.now { fill: var(--accent); 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\">Athletics</span><span class=\"chip\">2003 to 2026</span></div>\n  <h1>The marathon world record finally fell below two hours</h1>\n  <p class=\"sub\">Men's marathon world record, each new mark from 2003 to 2026, in hours, minutes and seconds.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"1:59:30\"></div>\n      <p class=\"unit\">Sabastian Sawe, London, 26 Apr 2026<span>the first record under 2:00:00</span></p>\n    </div>\n    <div class=\"emoji\" aria-hidden=\"true\">⏱️</div>\n  </div>\n  <svg class=\"chart\" viewBox=\"0 0 920 540\" role=\"img\" aria-label=\"Step chart of the men's marathon world record: 2:04:55 in 2003 falling through nine records to 1:59:30 in 2026, the first under 2:00:00\">\n    <g class=\"grid\"><line x1=\"100\" x2=\"900\" y1=\"56.0\" y2=\"56.0\"/><text x=\"0\" y=\"64.0\">2:05</text><line x1=\"100\" x2=\"900\" y1=\"126.7\" y2=\"126.7\"/><text x=\"0\" y=\"134.7\">2:04</text><line x1=\"100\" x2=\"900\" y1=\"197.3\" y2=\"197.3\"/><text x=\"0\" y=\"205.3\">2:03</text><line x1=\"100\" x2=\"900\" y1=\"268.0\" y2=\"268.0\"/><text x=\"0\" y=\"276.0\">2:02</text><line x1=\"100\" x2=\"900\" y1=\"338.7\" y2=\"338.7\"/><text x=\"0\" y=\"346.7\">2:01</text><line x1=\"100\" x2=\"900\" y1=\"480.0\" y2=\"480.0\"/><text x=\"0\" y=\"488.0\">1:59</text></g>\n    <line class=\"two\" x1=\"100\" x2=\"900\" y1=\"409.3\" y2=\"409.3\"/><text class=\"twol\" x=\"0\" y=\"417.3\">2:00</text>\n    <path class=\"step\" pathLength=\"1\" d=\"M124.7 61.9 H258.2 V96.0 H291.4 V127.8 H391.1 V152.6 H458.1 V170.2 H491.3 V200.9 H623.6 V292.7 H757.7 V328.1 H792.2 V368.1\"/>\n    <path class=\"fin\" pathLength=\"1\" d=\"M792.2 368.1 H877.2 V444.7\"/>\n    <g class=\"dots\"><circle cx=\"124.7\" cy=\"61.9\" r=\"9\" style=\"--d:0.25s\"/><circle cx=\"258.2\" cy=\"96.0\" r=\"9\" style=\"--d:0.55s\"/><circle cx=\"291.4\" cy=\"127.8\" r=\"9\" style=\"--d:0.59s\"/><circle cx=\"391.1\" cy=\"152.6\" r=\"9\" style=\"--d:0.65s\"/><circle cx=\"458.1\" cy=\"170.2\" r=\"9\" style=\"--d:0.69s\"/><circle cx=\"491.3\" cy=\"200.9\" r=\"9\" style=\"--d:0.72s\"/><circle cx=\"623.6\" cy=\"292.7\" r=\"9\" style=\"--d:0.87s\"/><circle cx=\"757.7\" cy=\"328.1\" r=\"9\" style=\"--d:1.08s\"/><circle cx=\"792.2\" cy=\"368.1\" r=\"9\" style=\"--d:1.45s\"/><circle class=\"now\" cx=\"877.2\" cy=\"444.7\" r=\"13\" style=\"--d:1.65s\"/></g>\n    <text class=\"lab\" x=\"114.7\" y=\"35.9\">2:04:55 Tergat, 2003</text>\n    <text class=\"lab end\" x=\"603.6\" y=\"300.7\" style=\"--d:1.0s\">2:01:39 Kipchoge, 2018</text>\n    <text class=\"lab end\" x=\"772.2\" y=\"376.1\" style=\"--d:1.35s\">2:00:35 Kiptum, 2023</text>\n    <text class=\"lab end now\" x=\"853.2\" y=\"453.7\" style=\"--d:1.6s\">1:59:30 Sawe, 2026</text>\n    <g><text class=\"yr\" x=\"166.7\" y=\"524\">2005</text><text class=\"yr\" x=\"333.3\" y=\"524\">2010</text><text class=\"yr\" x=\"500.0\" y=\"524\">2015</text><text class=\"yr\" x=\"666.7\" y=\"524\">2020</text><text class=\"yr\" x=\"833.3\" y=\"524\">2025</text></g>\n  </svg>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> World Athletics, World Record Progression of Marathon (Men, Senior), 2026. Each dot is one new record.</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
}
