{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Burj Khalifa still tallest at 828 m</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, and the towers. Towers are to scale:\n  the ground is at y 420 and a tower's height in px is metres * 360 / 828 (its share of the tallest, times 360).\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #f3ead8; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #0c8599;\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: 880px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 860px; }\n  .hero { margin-top: 40px; 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; }\n  .num b { font-weight: 800; counter-reset: n var(--n); animation: count 1.5s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both; }\n  .num b::after { content: counter(n); }\n  .num small { font-size: 96px; letter-spacing: -0.03em; margin-left: 16px; }\n  @keyframes count { from { --n: 0; } to { --n: 828; } }\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: 190px; line-height: 1; margin: 0 6px 24px 0; animation: settle 0.6s var(--enter) 0.05s both; }\n  @keyframes settle { from { transform: translateY(30px) scale(0.9); opacity: 0; } }\n  .chart { margin-top: auto; }\n  .chart svg { display: block; }\n  .tw { fill: var(--bar); transform-box: fill-box; animation: rise 0.9s var(--travel) both; animation-delay: calc(0.25s + var(--i) * 0.12s); }\n  .tw.now { fill: var(--accent); }\n  .tw circle { fill: var(--paper); }\n  @keyframes rise { from { transform: translateY(100%); } }\n  .ground { stroke: var(--ink); stroke-width: 3; }\n  text { font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; text-anchor: middle; }\n  .lab { animation: show 0.4s var(--enter) both; animation-delay: calc(0.95s + var(--i) * 0.12s); }\n  .m { font-size: 24px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }\n  .now .m, .m.now { fill: var(--accent); }\n  .nm { font-size: 19px; font-weight: 650; fill: var(--ink); }\n  .city { font-size: 18px; fill: var(--muted); }\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\">Skyscrapers</span><span class=\"chip\">2026</span></div>\n  <h1>Burj Khalifa is still the world's tallest building</h1>\n  <p class=\"sub\">The six tallest completed buildings, in metres to the architectural top, drawn to scale.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"828 m\"><b></b><small>m</small></div>\n      <p class=\"unit\">Burj Khalifa, Dubai, completed 2010<span>149 m taller than Merdeka 118, the next</span></p>\n    </div>\n    <div class=\"emoji\" aria-hidden=\"true\">🏢</div>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Heights to scale: Burj Khalifa 828 m, Merdeka 118 679 m, Shanghai Tower 632 m, Makkah Royal Clock Tower 601 m, Ping An Finance Center 599 m, Lotte World Tower 555 m\">\n    <svg width=\"920\" height=\"512\" viewBox=\"0 0 920 512\">\n      <clipPath id=\"sky\"><rect width=\"920\" height=\"420\"/></clipPath>\n      <g clip-path=\"url(#sky)\">\n        <!-- heights as a share of 828 m: 1.000, 0.820, 0.763, 0.726, 0.723, 0.670 -->\n        <path class=\"tw now\" style=\"--i:0\" d=\"M113 420 113 341 106 341 106 276 100 276 100 222 94 222 94 179 89 179 89 146 84 146 84 121 80 121 78 60 75 60 74 121 70 121 70 146 65 146 65 179 60 179 60 222 54 222 54 276 48 276 48 341 41 341 41 420Z\"/>\n        <path class=\"tw\" style=\"--i:1\" d=\"M260 420 256 317 250 237 244 207 233 184 232 125 228 125 227 184 216 207 210 237 204 317 200 420Z\"/>\n        <path class=\"tw\" style=\"--i:2\" d=\"M351 420 C353 283 361 200 366 159 L400 145 C405 200 413 283 415 420Z\"/>\n        <g class=\"tw\" style=\"--i:3\"><path d=\"M587 420 587 378 559 378 559 268 562 268 562 232 555 232 547 206 540 195 538 159 535 159 534 195 527 206 519 232 512 232 512 268 515 268 515 378 487 378 487 420Z\"/><circle cx=\"537\" cy=\"250\" r=\"10\"/></g>\n        <path class=\"tw\" style=\"--i:4\" d=\"M721 420 716 277 710 196 700 178 691 160 688 160 680 178 670 196 664 277 659 420Z\"/>\n        <path class=\"tw\" style=\"--i:5\" d=\"M813 420 C815 311 829 215 839 179 L847 179 C857 215 871 311 873 420Z\"/>\n      </g>\n      <line class=\"ground\" x1=\"0\" y1=\"421\" x2=\"920\" y2=\"421\"/>\n      <g class=\"lab now\" style=\"--i:0\"><text class=\"m\" x=\"77\" y=\"44\">828 m</text><text class=\"nm\" x=\"77\" y=\"452\">Burj</text><text class=\"nm\" x=\"77\" y=\"475\">Khalifa</text><text class=\"city\" x=\"77\" y=\"500\">Dubai</text></g>\n      <g class=\"lab\" style=\"--i:1\"><text class=\"m\" x=\"230\" y=\"109\">679 m</text><text class=\"nm\" x=\"230\" y=\"452\">Merdeka</text><text class=\"nm\" x=\"230\" y=\"475\">118</text><text class=\"city\" x=\"230\" y=\"500\">Kuala Lumpur</text></g>\n      <g class=\"lab\" style=\"--i:2\"><text class=\"m\" x=\"383\" y=\"129\">632 m</text><text class=\"nm\" x=\"383\" y=\"452\">Shanghai</text><text class=\"nm\" x=\"383\" y=\"475\">Tower</text><text class=\"city\" x=\"383\" y=\"500\">Shanghai</text></g>\n      <g class=\"lab\" style=\"--i:3\"><text class=\"m\" x=\"537\" y=\"143\">601 m</text><text class=\"nm\" x=\"537\" y=\"452\">Makkah Royal</text><text class=\"nm\" x=\"537\" y=\"475\">Clock Tower</text><text class=\"city\" x=\"537\" y=\"500\">Mecca</text></g>\n      <g class=\"lab\" style=\"--i:4\"><text class=\"m\" x=\"690\" y=\"144\">599 m</text><text class=\"nm\" x=\"690\" y=\"452\">Ping An</text><text class=\"nm\" x=\"690\" y=\"475\">Finance Center</text><text class=\"city\" x=\"690\" y=\"500\">Shenzhen</text></g>\n      <g class=\"lab\" style=\"--i:5\"><text class=\"m\" x=\"843\" y=\"163\">555 m</text><text class=\"nm\" x=\"843\" y=\"452\">Lotte World</text><text class=\"nm\" x=\"843\" y=\"475\">Tower</text><text class=\"city\" x=\"843\" y=\"500\">Seoul</text></g>\n    </svg>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> The Skyscraper Center (CTBUH), 100 tallest completed buildings, 2026. Merdeka 118 is listed there as Menara Merdeka Maybank.</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>Burj Khalifa still tallest at 828 m</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, and the towers. Towers are to scale:\n  the ground is at y 420 and a tower's height in px is metres * 360 / 828 (its share of the tallest, times 360).\n-->\n<style>\n  @property --n { syntax: \"<integer>\"; inherits: false; initial-value: 0; }\n  :root {\n    --paper: #f3ead8; --ink: #1c1a17; --muted: #6b645a; --line: #ddd5c7; --bar: #d9cfbf; --accent: #0c8599;\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: 880px; }\n  .sub { margin-top: 22px; font-size: 28px; line-height: 1.4; color: var(--muted); max-width: 860px; }\n  .hero { margin-top: 40px; 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; }\n  .num b { font-weight: 800; counter-reset: n var(--n); animation: count 1.5s cubic-bezier(0.45, 0, 0.25, 1) 0.2s both; }\n  .num b::after { content: counter(n); }\n  .num small { font-size: 96px; letter-spacing: -0.03em; margin-left: 16px; }\n  @keyframes count { from { --n: 0; } to { --n: 828; } }\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: 190px; line-height: 1; margin: 0 6px 24px 0; animation: settle 0.6s var(--enter) 0.05s both; }\n  @keyframes settle { from { transform: translateY(30px) scale(0.9); opacity: 0; } }\n  .chart { margin-top: auto; }\n  .chart svg { display: block; }\n  .tw { fill: var(--bar); transform-box: fill-box; animation: rise 0.9s var(--travel) both; animation-delay: calc(0.25s + var(--i) * 0.12s); }\n  .tw.now { fill: var(--accent); }\n  .tw circle { fill: var(--paper); }\n  @keyframes rise { from { transform: translateY(100%); } }\n  .ground { stroke: var(--ink); stroke-width: 3; }\n  text { font-family: Inter, \"Noto Color Emoji\", system-ui, sans-serif; text-anchor: middle; }\n  .lab { animation: show 0.4s var(--enter) both; animation-delay: calc(0.95s + var(--i) * 0.12s); }\n  .m { font-size: 24px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }\n  .now .m, .m.now { fill: var(--accent); }\n  .nm { font-size: 19px; font-weight: 650; fill: var(--ink); }\n  .city { font-size: 18px; fill: var(--muted); }\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\">Skyscrapers</span><span class=\"chip\">2026</span></div>\n  <h1>Burj Khalifa is still the world's tallest building</h1>\n  <p class=\"sub\">The six tallest completed buildings, in metres to the architectural top, drawn to scale.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"num\" aria-label=\"828 m\"><b></b><small>m</small></div>\n      <p class=\"unit\">Burj Khalifa, Dubai, completed 2010<span>149 m taller than Merdeka 118, the next</span></p>\n    </div>\n    <div class=\"emoji\" aria-hidden=\"true\">🏢</div>\n  </div>\n  <div class=\"chart\" role=\"img\" aria-label=\"Heights to scale: Burj Khalifa 828 m, Merdeka 118 679 m, Shanghai Tower 632 m, Makkah Royal Clock Tower 601 m, Ping An Finance Center 599 m, Lotte World Tower 555 m\">\n    <svg width=\"920\" height=\"512\" viewBox=\"0 0 920 512\">\n      <clipPath id=\"sky\"><rect width=\"920\" height=\"420\"/></clipPath>\n      <g clip-path=\"url(#sky)\">\n        <!-- heights as a share of 828 m: 1.000, 0.820, 0.763, 0.726, 0.723, 0.670 -->\n        <path class=\"tw now\" style=\"--i:0\" d=\"M113 420 113 341 106 341 106 276 100 276 100 222 94 222 94 179 89 179 89 146 84 146 84 121 80 121 78 60 75 60 74 121 70 121 70 146 65 146 65 179 60 179 60 222 54 222 54 276 48 276 48 341 41 341 41 420Z\"/>\n        <path class=\"tw\" style=\"--i:1\" d=\"M260 420 256 317 250 237 244 207 233 184 232 125 228 125 227 184 216 207 210 237 204 317 200 420Z\"/>\n        <path class=\"tw\" style=\"--i:2\" d=\"M351 420 C353 283 361 200 366 159 L400 145 C405 200 413 283 415 420Z\"/>\n        <g class=\"tw\" style=\"--i:3\"><path d=\"M587 420 587 378 559 378 559 268 562 268 562 232 555 232 547 206 540 195 538 159 535 159 534 195 527 206 519 232 512 232 512 268 515 268 515 378 487 378 487 420Z\"/><circle cx=\"537\" cy=\"250\" r=\"10\"/></g>\n        <path class=\"tw\" style=\"--i:4\" d=\"M721 420 716 277 710 196 700 178 691 160 688 160 680 178 670 196 664 277 659 420Z\"/>\n        <path class=\"tw\" style=\"--i:5\" d=\"M813 420 C815 311 829 215 839 179 L847 179 C857 215 871 311 873 420Z\"/>\n      </g>\n      <line class=\"ground\" x1=\"0\" y1=\"421\" x2=\"920\" y2=\"421\"/>\n      <g class=\"lab now\" style=\"--i:0\"><text class=\"m\" x=\"77\" y=\"44\">828 m</text><text class=\"nm\" x=\"77\" y=\"452\">Burj</text><text class=\"nm\" x=\"77\" y=\"475\">Khalifa</text><text class=\"city\" x=\"77\" y=\"500\">Dubai</text></g>\n      <g class=\"lab\" style=\"--i:1\"><text class=\"m\" x=\"230\" y=\"109\">679 m</text><text class=\"nm\" x=\"230\" y=\"452\">Merdeka</text><text class=\"nm\" x=\"230\" y=\"475\">118</text><text class=\"city\" x=\"230\" y=\"500\">Kuala Lumpur</text></g>\n      <g class=\"lab\" style=\"--i:2\"><text class=\"m\" x=\"383\" y=\"129\">632 m</text><text class=\"nm\" x=\"383\" y=\"452\">Shanghai</text><text class=\"nm\" x=\"383\" y=\"475\">Tower</text><text class=\"city\" x=\"383\" y=\"500\">Shanghai</text></g>\n      <g class=\"lab\" style=\"--i:3\"><text class=\"m\" x=\"537\" y=\"143\">601 m</text><text class=\"nm\" x=\"537\" y=\"452\">Makkah Royal</text><text class=\"nm\" x=\"537\" y=\"475\">Clock Tower</text><text class=\"city\" x=\"537\" y=\"500\">Mecca</text></g>\n      <g class=\"lab\" style=\"--i:4\"><text class=\"m\" x=\"690\" y=\"144\">599 m</text><text class=\"nm\" x=\"690\" y=\"452\">Ping An</text><text class=\"nm\" x=\"690\" y=\"475\">Finance Center</text><text class=\"city\" x=\"690\" y=\"500\">Shenzhen</text></g>\n      <g class=\"lab\" style=\"--i:5\"><text class=\"m\" x=\"843\" y=\"163\">555 m</text><text class=\"nm\" x=\"843\" y=\"452\">Lotte World</text><text class=\"nm\" x=\"843\" y=\"475\">Tower</text><text class=\"city\" x=\"843\" y=\"500\">Seoul</text></g>\n    </svg>\n  </div>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> The Skyscraper Center (CTBUH), 100 tallest completed buildings, 2026. Merdeka 118 is listed there as Menara Merdeka Maybank.</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
}
