{
  "id": "slate-brief-reader",
  "name": "Note Reader",
  "theme": "slate-brief",
  "category": "App Shell",
  "description": "A reading shell whose only chrome is a contents list and a bronze progress rule, with the annotation panel appearing in the margin instead of over the text.",
  "layout": "A 240px contents rail, a centred 68ch reading column, and a 240px annotation margin, with a 2px bronze progress rule welded to the very top of the viewport.",
  "modules": [
    {
      "key": "progress",
      "name": "Progress rule",
      "html": "\n<div class=\"pg\"><i style=\"--p:41%\"></i></div>"
    },
    {
      "key": "contents",
      "name": "Contents rail",
      "html": "\n<nav class=\"ct\"><span class=\"k\">Contents</span>\n<ol>\n  <li><span class=\"n\">1</span>The claim</li>\n  <li class=\"on\"><span class=\"n\">2</span>What the data says</li>\n  <li><span class=\"n\">3</span>The three assumptions</li>\n  <li><span class=\"n\">4</span>What would fix it</li>\n  <li><span class=\"n\">A</span>Method</li>\n  <li><span class=\"n\">B</span>Data sources</li>\n</ol>\n<div class=\"mt\"><span class=\"k\">Reading time</span><b>11 min</b><span class=\"m\">4 min remaining</span></div></nav>"
    },
    {
      "key": "read",
      "name": "Reading column",
      "html": "\n<article class=\"rd\">\n  <h2>2 · What the data says</h2>\n  <p>In the four most recent winters, the hours in which the domestic system was tightest were also the hours in which the continental system was tightest.<sup>4</sup></p>\n  <p>The correlation is not incidental. Both are driven by the same anticyclonic conditions, which suppress wind across the whole north-western European basin simultaneously and raise heating demand at the same time.</p>\n  <p>The consequence is that interconnector capacity is least useful precisely when it is most needed. On the eleven tightest evenings of the last four winters, Great Britain was exporting on six.<sup>5</sup></p>\n  <p>This is not an argument against interconnection in general, which has clear value in ordinary conditions. It is an argument against counting interconnector capacity toward a security-of-supply standard that is defined by the tightest hours.</p>\n</article>"
    },
    {
      "key": "notes",
      "name": "Margin notes",
      "html": "\n<aside class=\"an\">\n  <div class=\"nt\"><span class=\"n\">4</span><p>Defined as the settlement period with the lowest de-rated margin in each winter, using operational transparency data.</p></div>\n  <div class=\"nt\"><span class=\"n\">5</span><p>Exhibit 4. Net flow across all interconnectors, evening peak half-hour.</p></div>\n  <div class=\"hl\"><span class=\"k\">Your note</span><p>Check whether NSL changes this once it is fully commissioned — the correlation with Norway should be weaker.</p></div>\n</aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "slate-brief-reader",
    "model": "Claude Fable 5.1",
    "author": "Claude Code",
    "createdAt": "2026-09-02T16:49:24+09:00",
    "updatedAt": "2026-09-02T16:58:37+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/slate-brief-reader.json",
  "structure": "A 240px contents rail, a centred 68ch reading column, and a 240px annotation margin, with a 2px bronze progress rule welded to the very top of the viewport.",
  "html": "<div class=\"dz dz-slate-brief-reader\" data-design=\"slate-brief-reader\" data-theme=\"slate-brief\">\n<section class=\"dz-mod\" data-mod=\"progress\" aria-label=\"Progress rule\">\n<div class=\"pg\"><i style=\"--p:41%\"></i></div></section><section class=\"dz-mod\" data-mod=\"contents\" aria-label=\"Contents rail\">\n<nav class=\"ct\"><span class=\"k\">Contents</span>\n<ol>\n  <li><span class=\"n\">1</span>The claim</li>\n  <li class=\"on\"><span class=\"n\">2</span>What the data says</li>\n  <li><span class=\"n\">3</span>The three assumptions</li>\n  <li><span class=\"n\">4</span>What would fix it</li>\n  <li><span class=\"n\">A</span>Method</li>\n  <li><span class=\"n\">B</span>Data sources</li>\n</ol>\n<div class=\"mt\"><span class=\"k\">Reading time</span><b>11 min</b><span class=\"m\">4 min remaining</span></div></nav></section><section class=\"dz-mod\" data-mod=\"read\" aria-label=\"Reading column\">\n<article class=\"rd\">\n  <h2>2 · What the data says</h2>\n  <p>In the four most recent winters, the hours in which the domestic system was tightest were also the hours in which the continental system was tightest.<sup>4</sup></p>\n  <p>The correlation is not incidental. Both are driven by the same anticyclonic conditions, which suppress wind across the whole north-western European basin simultaneously and raise heating demand at the same time.</p>\n  <p>The consequence is that interconnector capacity is least useful precisely when it is most needed. On the eleven tightest evenings of the last four winters, Great Britain was exporting on six.<sup>5</sup></p>\n  <p>This is not an argument against interconnection in general, which has clear value in ordinary conditions. It is an argument against counting interconnector capacity toward a security-of-supply standard that is defined by the tightest hours.</p>\n</article></section><section class=\"dz-mod\" data-mod=\"notes\" aria-label=\"Margin notes\">\n<aside class=\"an\">\n  <div class=\"nt\"><span class=\"n\">4</span><p>Defined as the settlement period with the lowest de-rated margin in each winter, using operational transparency data.</p></div>\n  <div class=\"nt\"><span class=\"n\">5</span><p>Exhibit 4. Net flow across all interconnectors, evening peak half-hour.</p></div>\n  <div class=\"hl\"><span class=\"k\">Your note</span><p>Check whether NSL changes this once it is fully commissioned — the correlation with Norway should be weaker.</p></div>\n</aside></section>\n</div>",
  "css": "\n.dz-slate-brief-reader { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 240px minmax(0, 68ch) 240px; justify-content: center; column-gap: 40px; padding: 0 30px 40px; align-content: start; }\n.dz-slate-brief-reader .pg { grid-column: 1 / -1; height: 2px; background: var(--border); margin-bottom: 30px; }\n.dz-slate-brief-reader .pg i { display: block; height: 2px; width: var(--p); background: var(--primary); }\n.dz-slate-brief-reader .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); display: block; }\n.dz-slate-brief-reader .ct { position: sticky; top: 16px; align-self: start; }\n.dz-slate-brief-reader .ct ol { list-style: none; margin: 12px 0 22px; padding: 0; }\n.dz-slate-brief-reader .ct li { display: flex; gap: 12px; font-size: 14.5px; padding: 8px 0; color: var(--muted-foreground); cursor: pointer; }\n.dz-slate-brief-reader .ct li:hover { color: var(--foreground); }\n.dz-slate-brief-reader .ct .on { color: var(--foreground); }\n.dz-slate-brief-reader .n { font-family: var(--pv-mono); font-size: 11.5px; color: var(--primary); padding-top: 3px; }\n.dz-slate-brief-reader .mt { border-top: var(--pv-bw) solid var(--border); padding-top: 14px; }\n.dz-slate-brief-reader .mt b { display: block; font-family: var(--pv-mono); font-size: 22px; margin: 4px 0 2px; }\n.dz-slate-brief-reader .m { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-slate-brief-reader .rd h2 { font-family: var(--pv-display); font-size: 26px; font-weight: 600; margin: 0 0 16px; padding-bottom: 6px; border-bottom: 2px solid var(--primary); display: inline-block; }\n.dz-slate-brief-reader .rd p { font-size: 17px; line-height: 1.72; color: var(--muted-foreground); margin: 0 0 16px; }\n.dz-slate-brief-reader sup { font-family: var(--pv-mono); font-size: 10px; color: var(--accent); vertical-align: super; }\n.dz-slate-brief-reader .an { padding-top: 46px; display: flex; flex-direction: column; gap: 22px; }\n.dz-slate-brief-reader .nt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }\n.dz-slate-brief-reader .nt p { font-size: 12.5px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }\n.dz-slate-brief-reader .nt .n { color: var(--accent); }\n.dz-slate-brief-reader .hl { background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); border-left: 3px solid var(--primary); padding: 12px 14px; }\n.dz-slate-brief-reader .hl p { font-size: 13px; line-height: 1.55; color: var(--foreground); margin: 6px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-slate-brief-reader *, .dz-slate-brief-reader *::before, .dz-slate-brief-reader *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/slate-brief.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600;700&family=Libre+Franklin:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}