{
  "id": "late-edition-live",
  "name": "Live Blog",
  "theme": "late-edition",
  "category": "App Shell",
  "description": "A live coverage frame where the only animated element in the entire system — the update counter — is the one thing that is genuinely live.",
  "layout": "A fixed live header strip over a 1fr/280px split of reverse-chronological entries and a key-points rail that stays put.",
  "modules": [
    {
      "key": "strip",
      "name": "Live strip",
      "html": "\n<header class=\"ls\"><span class=\"tag\"><i></i>Live</span><h1>Ferry Contract Committee Hearing</h1><span class=\"cnt\"><b>41</b> updates · latest 2 min ago</span><button type=\"button\">Pause updates</button></header>"
    },
    {
      "key": "entries",
      "name": "Update entries",
      "html": "\n<main class=\"en\">\n  <article class=\"new\"><time>14:41</time><span class=\"k\">Key moment</span><h2>Permanent Secretary Confirms She Saw Both Warnings</h2><p>Asked directly whether she had read the January and February notes before the contract was signed, the permanent secretary said she had. She added that she considered them \"properly registered concerns rather than objections\".</p></article>\n  <article><time>14:32</time><h2>Committee Turns To The Withheld Documents</h2><p>The chair asked why eleven documents remain withheld when twenty-three have been released. The department's response was that the eleven contain live commercial terms.</p></article>\n  <article><time>14:18</time><h2>Yard's Previous Contract Raised</h2><p>A member read the eleven-month overrun figure into the record. It was not disputed.</p></article>\n  <article><time>14:04</time><h2>Hearing Opens</h2><p>Three officials sworn in. The session is scheduled for two hours and is being broadcast.</p></article>\n</main>"
    },
    {
      "key": "points",
      "name": "Key points rail",
      "html": "\n<aside class=\"kp\"><span class=\"k\">Key points</span>\n<ol>\n  <li><a href=\"#\">Permanent secretary confirms she read both warnings</a><time>14:41</time></li>\n  <li><a href=\"#\">Eleven documents remain withheld</a><time>14:32</time></li>\n  <li><a href=\"#\">Overrun figure entered into the record</a><time>14:18</time></li>\n</ol>\n<div class=\"wh\"><span class=\"k\">Who is speaking</span><ul><li><b>Dame Rosalind Achebe</b><span>Permanent Secretary</span></li><li><b>Marcus Oyelowo</b><span>Director, Procurement</span></li><li><b>Kirsten Halvorsen</b><span>Committee Chair</span></li></ul></div></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "late-edition-live",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:43:21+09:00",
    "updatedAt": "2026-09-01T23:43:21+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/late-edition-live.json",
  "structure": "A fixed live header strip over a 1fr/280px split of reverse-chronological entries and a key-points rail that stays put.",
  "html": "<div class=\"dz dz-late-edition-live\" data-design=\"late-edition-live\" data-theme=\"late-edition\">\n<section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Live strip\">\n<header class=\"ls\"><span class=\"tag\"><i></i>Live</span><h1>Ferry Contract Committee Hearing</h1><span class=\"cnt\"><b>41</b> updates · latest 2 min ago</span><button type=\"button\">Pause updates</button></header></section><div class=\"split\"><section class=\"dz-mod\" data-mod=\"entries\" aria-label=\"Update entries\">\n<main class=\"en\">\n  <article class=\"new\"><time>14:41</time><span class=\"k\">Key moment</span><h2>Permanent Secretary Confirms She Saw Both Warnings</h2><p>Asked directly whether she had read the January and February notes before the contract was signed, the permanent secretary said she had. She added that she considered them \"properly registered concerns rather than objections\".</p></article>\n  <article><time>14:32</time><h2>Committee Turns To The Withheld Documents</h2><p>The chair asked why eleven documents remain withheld when twenty-three have been released. The department's response was that the eleven contain live commercial terms.</p></article>\n  <article><time>14:18</time><h2>Yard's Previous Contract Raised</h2><p>A member read the eleven-month overrun figure into the record. It was not disputed.</p></article>\n  <article><time>14:04</time><h2>Hearing Opens</h2><p>Three officials sworn in. The session is scheduled for two hours and is being broadcast.</p></article>\n</main></section><section class=\"dz-mod\" data-mod=\"points\" aria-label=\"Key points rail\">\n<aside class=\"kp\"><span class=\"k\">Key points</span>\n<ol>\n  <li><a href=\"#\">Permanent secretary confirms she read both warnings</a><time>14:41</time></li>\n  <li><a href=\"#\">Eleven documents remain withheld</a><time>14:32</time></li>\n  <li><a href=\"#\">Overrun figure entered into the record</a><time>14:18</time></li>\n</ol>\n<div class=\"wh\"><span class=\"k\">Who is speaking</span><ul><li><b>Dame Rosalind Achebe</b><span>Permanent Secretary</span></li><li><b>Marcus Oyelowo</b><span>Director, Procurement</span></li><li><b>Kirsten Halvorsen</b><span>Committee Chair</span></li></ul></div></aside></section></div>\n</div>",
  "css": "\n.dz-late-edition-live { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 26px 30px; }\n.dz-late-edition-live .ls { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 2px solid var(--border); }\n.dz-late-edition-live .tag { display: flex; align-items: center; gap: 7px; background: var(--primary); color: var(--primary-foreground); padding: 5px 12px; font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; color: var(--primary); color: var(--primary-foreground); }\n.dz-late-edition-live .tag i { width: 7px; height: 7px; background: currentColor; animation: dz-le-pulse 1.6s steps(1, end) infinite; }\n.dz-late-edition-live @keyframes dz-le-pulse { 0%, 50% { opacity: 1 } 51%, 100% { opacity: .2 } }\n.dz-late-edition-live .ls h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: -.01em; font-size: 26px; margin: 0; }\n.dz-late-edition-live .cnt { font-family: var(--pv-mono); font-size: 12px; text-transform: uppercase; color: var(--muted-foreground); margin-left: auto; }\n.dz-late-edition-live .cnt b { font-size: 15px; color: var(--foreground); }\n.dz-late-edition-live .ls button { font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; padding: 7px 14px; background: transparent; border: 1px solid var(--border); color: var(--foreground); cursor: pointer; }\n.dz-late-edition-live .split { display: grid; grid-template-columns: 1fr 280px; gap: 30px; padding-top: 20px; }\n.dz-late-edition-live .en article { display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--border); }\n.dz-late-edition-live .en time { font-family: var(--pv-mono); font-size: 12px; text-transform: uppercase; color: var(--muted-foreground); font-size: 13px; }\n.dz-late-edition-live .en h2 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 400; letter-spacing: -.01em; font-size: 24px; line-height: 1.1; margin: 4px 0 8px; grid-column: 2; }\n.dz-late-edition-live .en p { margin: 0; grid-column: 2; font-size: 15.5px; line-height: 1.56; max-width: 38ch; }\n.dz-late-edition-live .k { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .16em; font-size: 10.5px; font-weight: 700; color: var(--primary); }\n.dz-late-edition-live .en .k { grid-column: 2; }\n.dz-late-edition-live .en .new { border-left: 3px solid var(--accent); padding-left: 14px; }\n.dz-late-edition-live .kp { border-left: 1px solid var(--border); padding-left: 20px; }\n.dz-late-edition-live .kp ol { list-style: none; margin: 12px 0 26px; padding: 0; counter-reset: p; }\n.dz-late-edition-live .kp li { counter-increment: p; padding: 10px 0; border-top: 1px solid var(--border); }\n.dz-late-edition-live .kp a { display: block; color: var(--foreground); text-decoration: none; font-size: 14px; line-height: 1.4; font-weight: 600; }\n.dz-late-edition-live .kp time { font-family: var(--pv-mono); font-size: 12px; text-transform: uppercase; color: var(--muted-foreground); display: block; margin-top: 4px; }\n.dz-late-edition-live .wh ul { list-style: none; margin: 12px 0 0; padding: 0; }\n.dz-late-edition-live .wh li { padding: 8px 0; border-top: 1px solid var(--border); }\n.dz-late-edition-live .wh b { display: block; font-size: 14px; }\n.dz-late-edition-live .wh span { font-family: var(--pv-mono); font-size: 12px; text-transform: uppercase; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-late-edition-live *, .dz-late-edition-live *::before, .dz-late-edition-live *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/late-edition.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Fjalla+One:wght@400;500;600;700&family=Zilla+Slab:wght@400;500;600;700&family=Anonymous+Pro:wght@400;500;600;700&display=swap"
}