{
 "cover_html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Oslo's day swings by 13 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 (minutes, from Singapore's 21 June day to Oslo's), and the two polylines: x is the month\n  centre (76 to 920, 70.3 px per month), y is the day length on a 0 to 24 h axis (476 to 20, 19 px per hour).\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  :root {\n    --paper: #e8eef5; --ink: #1c1a17; --muted: #6b645a; --line: #cfd9e4; --bar: #d9cfbf; --accent: #e8590c; --second: #6f8196;\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  .big { display: flex; align-items: baseline; color: var(--accent); font-weight: 800; }\n  /* --t is the day length in minutes; integer rounding of (t - 30) / 60 gives whole hours. Both parts run the same count. */\n  .num { --h: calc((var(--t) - 30) / 60); --m: calc(var(--t) - var(--h) * 60); font-size: 190px; line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;\n    counter-reset: h var(--h) m var(--m); animation: count 1.6s var(--count) 0.15s both; }\n  .num.h::after { content: counter(h); }\n  .num.m::after { content: counter(m, decimal-leading-zero); }\n  @keyframes count { from { --t: 732; } to { --t: 1130; } }\n  .u { font-size: 76px; letter-spacing: -0.03em; margin: 0 26px 0 12px; }\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 4px 60px 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, .mo text { font-size: 22px; fill: var(--muted); }\n  .mo text { text-anchor: middle; }\n  .oslo, .sg { fill: none; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.4s var(--count) 0.25s both; }\n  .oslo { stroke: var(--accent); }\n  .sg { stroke: var(--second); stroke-width: 6; animation-delay: 0.35s; }\n  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n  .dot { fill: var(--paper); stroke: var(--accent); stroke-width: 5; animation: show 0.3s var(--enter) 1.5s both; }\n  .dot.s { stroke: var(--second); }\n  .lab { font-size: 25px; font-weight: 700; text-anchor: middle; animation: show 0.3s var(--enter) 1.55s both; }\n  .lab.o { fill: var(--accent); }\n  .lab.s { fill: var(--second); }\n  .lab.end { text-anchor: end; }\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\">Daylight</span><span class=\"chip\">Oslo vs Singapore</span></div>\n  <h1>Oslo's day swings by 13 hours; Singapore's barely moves</h1>\n  <p class=\"sub\">Hours from sunrise to sunset on the 21st of each month in 2026.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"big\" aria-label=\"18 h 50 min\"><span class=\"num h\"></span><span class=\"u\">h</span><span class=\"num m\"></span><span class=\"u\">min</span></div>\n      <p class=\"unit\">of daylight in Oslo on 21 June<span>Singapore got 12 h 12 min the same day</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=\"Line chart of day length on the 21st of each month in 2026: Oslo from 7 h 10 min in January up to 18 h 50 min in June and down to 5 h 54 min in December; Singapore between 12 h 03 min and 12 h 12 min all year\">\n    <g class=\"grid\"><line x1=\"76\" x2=\"920\" y1=\"20.0\" y2=\"20.0\"/><text x=\"0\" y=\"28.0\">24 h</text><line x1=\"76\" x2=\"920\" y1=\"134.0\" y2=\"134.0\"/><text x=\"0\" y=\"142.0\">18 h</text><line x1=\"76\" x2=\"920\" y1=\"248.0\" y2=\"248.0\"/><text x=\"0\" y=\"256.0\">12 h</text><line x1=\"76\" x2=\"920\" y1=\"362.0\" y2=\"362.0\"/><text x=\"0\" y=\"370.0\">6 h</text><line x1=\"76\" x2=\"920\" y1=\"476.0\" y2=\"476.0\"/><text x=\"0\" y=\"484.0\">0 h</text></g>\n    <polyline class=\"sg\" pathLength=\"1\" points=\"111.2,246.9 181.5,246.5 251.8,245.9 322.2,245.2 392.5,244.6 462.8,244.2 533.2,244.6 603.5,245.2 673.8,245.9 744.2,246.5 814.5,246.9 884.8,247.1\"/>\n    <polyline class=\"oslo\" pathLength=\"1\" points=\"111.2,340.0 181.5,290.6 251.8,242.3 322.2,189.1 392.5,142.0 462.8,118.2 533.2,140.8 603.5,188.7 673.8,241.2 744.2,292.1 814.5,340.7 884.8,363.9\"/>\n    <circle class=\"dot\" cx=\"462.8\" cy=\"118.2\" r=\"11\"/><circle class=\"dot\" cx=\"884.8\" cy=\"363.9\" r=\"11\"/><circle class=\"dot s\" cx=\"462.8\" cy=\"244.2\" r=\"9\"/>\n    <text class=\"lab o\" x=\"462.8\" y=\"90.2\">Oslo 18 h 50 min</text>\n    <text class=\"lab o end\" x=\"880.8\" y=\"413.9\">5 h 54 min</text>\n    <text class=\"lab s\" x=\"462.8\" y=\"294.2\">Singapore 12 h 12 min</text>\n    <g class=\"mo\"><text x=\"111.2\" y=\"520\">Jan</text><text x=\"181.5\" y=\"520\">Feb</text><text x=\"251.8\" y=\"520\">Mar</text><text x=\"322.2\" y=\"520\">Apr</text><text x=\"392.5\" y=\"520\">May</text><text x=\"462.8\" y=\"520\">Jun</text><text x=\"533.2\" y=\"520\">Jul</text><text x=\"603.5\" y=\"520\">Aug</text><text x=\"673.8\" y=\"520\">Sep</text><text x=\"744.2\" y=\"520\">Oct</text><text x=\"814.5\" y=\"520\">Nov</text><text x=\"884.8\" y=\"520\">Dec</text></g>\n  </svg>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> timeanddate.com, Sunrise and sunset times in Oslo and Singapore, monthly tables for 2026.</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>Oslo's day swings by 13 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 (minutes, from Singapore's 21 June day to Oslo's), and the two polylines: x is the month\n  centre (76 to 920, 70.3 px per month), y is the day length on a 0 to 24 h axis (476 to 20, 19 px per hour).\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  :root {\n    --paper: #e8eef5; --ink: #1c1a17; --muted: #6b645a; --line: #cfd9e4; --bar: #d9cfbf; --accent: #e8590c; --second: #6f8196;\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  .big { display: flex; align-items: baseline; color: var(--accent); font-weight: 800; }\n  /* --t is the day length in minutes; integer rounding of (t - 30) / 60 gives whole hours. Both parts run the same count. */\n  .num { --h: calc((var(--t) - 30) / 60); --m: calc(var(--t) - var(--h) * 60); font-size: 190px; line-height: 0.82; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;\n    counter-reset: h var(--h) m var(--m); animation: count 1.6s var(--count) 0.15s both; }\n  .num.h::after { content: counter(h); }\n  .num.m::after { content: counter(m, decimal-leading-zero); }\n  @keyframes count { from { --t: 732; } to { --t: 1130; } }\n  .u { font-size: 76px; letter-spacing: -0.03em; margin: 0 26px 0 12px; }\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 4px 60px 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, .mo text { font-size: 22px; fill: var(--muted); }\n  .mo text { text-anchor: middle; }\n  .oslo, .sg { fill: none; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.4s var(--count) 0.25s both; }\n  .oslo { stroke: var(--accent); }\n  .sg { stroke: var(--second); stroke-width: 6; animation-delay: 0.35s; }\n  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }\n  .dot { fill: var(--paper); stroke: var(--accent); stroke-width: 5; animation: show 0.3s var(--enter) 1.5s both; }\n  .dot.s { stroke: var(--second); }\n  .lab { font-size: 25px; font-weight: 700; text-anchor: middle; animation: show 0.3s var(--enter) 1.55s both; }\n  .lab.o { fill: var(--accent); }\n  .lab.s { fill: var(--second); }\n  .lab.end { text-anchor: end; }\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\">Daylight</span><span class=\"chip\">Oslo vs Singapore</span></div>\n  <h1>Oslo's day swings by 13 hours; Singapore's barely moves</h1>\n  <p class=\"sub\">Hours from sunrise to sunset on the 21st of each month in 2026.</p>\n  <div class=\"hero\">\n    <div>\n      <div class=\"big\" aria-label=\"18 h 50 min\"><span class=\"num h\"></span><span class=\"u\">h</span><span class=\"num m\"></span><span class=\"u\">min</span></div>\n      <p class=\"unit\">of daylight in Oslo on 21 June<span>Singapore got 12 h 12 min the same day</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=\"Line chart of day length on the 21st of each month in 2026: Oslo from 7 h 10 min in January up to 18 h 50 min in June and down to 5 h 54 min in December; Singapore between 12 h 03 min and 12 h 12 min all year\">\n    <g class=\"grid\"><line x1=\"76\" x2=\"920\" y1=\"20.0\" y2=\"20.0\"/><text x=\"0\" y=\"28.0\">24 h</text><line x1=\"76\" x2=\"920\" y1=\"134.0\" y2=\"134.0\"/><text x=\"0\" y=\"142.0\">18 h</text><line x1=\"76\" x2=\"920\" y1=\"248.0\" y2=\"248.0\"/><text x=\"0\" y=\"256.0\">12 h</text><line x1=\"76\" x2=\"920\" y1=\"362.0\" y2=\"362.0\"/><text x=\"0\" y=\"370.0\">6 h</text><line x1=\"76\" x2=\"920\" y1=\"476.0\" y2=\"476.0\"/><text x=\"0\" y=\"484.0\">0 h</text></g>\n    <polyline class=\"sg\" pathLength=\"1\" points=\"111.2,246.9 181.5,246.5 251.8,245.9 322.2,245.2 392.5,244.6 462.8,244.2 533.2,244.6 603.5,245.2 673.8,245.9 744.2,246.5 814.5,246.9 884.8,247.1\"/>\n    <polyline class=\"oslo\" pathLength=\"1\" points=\"111.2,340.0 181.5,290.6 251.8,242.3 322.2,189.1 392.5,142.0 462.8,118.2 533.2,140.8 603.5,188.7 673.8,241.2 744.2,292.1 814.5,340.7 884.8,363.9\"/>\n    <circle class=\"dot\" cx=\"462.8\" cy=\"118.2\" r=\"11\"/><circle class=\"dot\" cx=\"884.8\" cy=\"363.9\" r=\"11\"/><circle class=\"dot s\" cx=\"462.8\" cy=\"244.2\" r=\"9\"/>\n    <text class=\"lab o\" x=\"462.8\" y=\"90.2\">Oslo 18 h 50 min</text>\n    <text class=\"lab o end\" x=\"880.8\" y=\"413.9\">5 h 54 min</text>\n    <text class=\"lab s\" x=\"462.8\" y=\"294.2\">Singapore 12 h 12 min</text>\n    <g class=\"mo\"><text x=\"111.2\" y=\"520\">Jan</text><text x=\"181.5\" y=\"520\">Feb</text><text x=\"251.8\" y=\"520\">Mar</text><text x=\"322.2\" y=\"520\">Apr</text><text x=\"392.5\" y=\"520\">May</text><text x=\"462.8\" y=\"520\">Jun</text><text x=\"533.2\" y=\"520\">Jul</text><text x=\"603.5\" y=\"520\">Aug</text><text x=\"673.8\" y=\"520\">Sep</text><text x=\"744.2\" y=\"520\">Oct</text><text x=\"814.5\" y=\"520\">Nov</text><text x=\"884.8\" y=\"520\">Dec</text></g>\n  </svg>\n  <footer class=\"foot fade\" style=\"animation-delay:1.2s\">\n    <p><strong>Source:</strong> timeanddate.com, Sunrise and sunset times in Oslo and Singapore, monthly tables for 2026.</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
}
