+ ${htmlEscape(section.title)}
+ ${section.subtitle ? `${htmlEscape(section.subtitle)}
` : ''}
+ ${renderBlocksHtml(section.blocks)}
+ `
+
+const css = `
+ * { box-sizing: border-box; }
+ body {
+ margin: 0;
+ font-family: 'Fira Sans', 'DejaVu Sans', sans-serif;
+ color: #18181b;
+ font-size: 9.6pt;
+ line-height: 1.5;
+ -webkit-print-color-adjust: exact;
+ print-color-adjust: exact;
+ }
+ h1 { font-size: 26pt; line-height: 1.08; margin: 0 0 4mm; letter-spacing: -0.01em; }
+ h2 { font-size: 15pt; margin: 0 0 3mm; color: #c51414; letter-spacing: -0.01em; }
+ h3 { font-size: 11pt; }
+ p { margin: 0 0 3mm; }
+ .cover { height: 256mm; display: flex; flex-direction: column; justify-content: space-between; break-after: page; }
+ .cover-top { padding-top: 6mm; }
+ .brand { color: #c51414; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 8.5pt; }
+ .cover .subtitle { font-size: 13pt; color: #3f3f46; max-width: 150mm; }
+ .cover-meta { color: #71717a; font-size: 9pt; }
+ .cover-rule { height: 2.4mm; background: #c51414; width: 34mm; margin: 5mm 0; }
+ .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 4mm 0 0; }
+ .kpi { border: .8px solid #e4e4e7; border-radius: 2mm; padding: 3mm; background: #fafafa; }
+ .kpi-value { display: block; font-size: 15pt; font-weight: 700; color: #c51414; }
+ .kpi-label { display: block; font-size: 7.8pt; color: #52525b; }
+ .section { padding: 0; }
+ .page-break { break-before: page; }
+ .section-subtitle { color: #71717a; font-style: italic; margin-top: -1mm; }
+ .bullets { margin: 0 0 3mm; padding-left: 4.5mm; }
+ .bullets li { margin-bottom: 2mm; }
+ .note { border-left: 2.4mm solid #c51414; background: #fafafa; padding: 3mm 4mm; border-radius: 0 2mm 2mm 0; margin: 3mm 0; }
+ .note strong { color: #c51414; }
+ .note p { margin: 1mm 0 0; }
+ table { width: 100%; border-collapse: collapse; font-size: 8.2pt; margin: 0 0 6mm; }
+ caption { caption-side: top; text-align: left; font-weight: 700; font-size: 8.8pt; padding-bottom: 2mm; color: #18181b; }
+ th { text-align: left; background: #f4f4f5; border-bottom: 1px solid #d4d4d8; padding: 2.1mm 1.6mm; font-size: 7.3pt; text-transform: uppercase; letter-spacing: .03em; color: #52525b; }
+ td { border-bottom: .6px solid #e4e4e7; padding: 2.1mm 1.6mm; vertical-align: top; }
+ td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+ .badge { display: inline-block; color: #ffffff; font-size: 7pt; font-weight: 600; padding: .6mm 1.6mm; border-radius: 6mm; white-space: nowrap; }
+ figure.map { margin: 0 0 6mm; border: .8px solid #e4e4e7; border-radius: 2mm; padding: 3.5mm; break-inside: avoid; }
+ figure.map + figure.map { margin-top: 10mm; }
+ figure.map figcaption { display: flex; flex-direction: column; gap: .8mm; margin-bottom: 2.5mm; }
+ figure.map figcaption strong { font-size: 9.6pt; }
+ figure.map figcaption span { font-size: 7.8pt; color: #52525b; }
+ figure.map svg { width: 100%; height: auto; display: block; }
+ .legend { display: flex; flex-wrap: wrap; gap: 3mm; align-items: center; margin-top: 2.5mm; font-size: 7.6pt; color: #3f3f46; }
+ .legend-title { font-weight: 700; color: #52525b; }
+ .legend-item { display: inline-flex; align-items: center; gap: 1.2mm; }
+ .legend-swatch { width: 3.4mm; height: 3.4mm; border-radius: .8mm; border: .6px solid #d4d4d8; display: inline-block; }
+ .zone-label { font-family: 'Fira Sans', sans-serif; font-size: 9px; font-weight: 700; fill: #18181b; text-anchor: middle; paint-order: stroke; stroke: #ffffff; stroke-width: 2.6px; }
+ .chart-label { font-family: 'Fira Sans', sans-serif; font-size: 10px; fill: #3f3f46; }
+ .chart-value { font-family: 'Fira Sans', sans-serif; font-size: 9px; fill: #52525b; }
+ .axis-label { font-family: 'Fira Sans', sans-serif; font-size: 10px; fill: #52525b; }
+ .axis-title { font-family: 'Fira Sans', sans-serif; font-size: 11px; fill: #3f3f46; font-weight: 600; }
+ .point-label { font-family: 'Fira Sans', sans-serif; font-size: 10px; fill: #3f3f46; font-weight: 600; paint-order: stroke; stroke: #ffffff; stroke-width: 2.4px; }
+ .grid { stroke: #e4e4e7; stroke-width: 1; }
+ .median { stroke: #a1a1aa; stroke-width: 1.2; stroke-dasharray: 5 4; }
+ .page-break + section { break-before: page; }
+`
+
+const html = `
+
+