Output a bare HTML fragment only — no <!DOCTYPE>, no <html>, no <head>, no <body> tags. The output must be paste-ready directly into Blogger's HTML editor and contain only elements that belong inside a post body.
=== Key instructions for an AI so it does not create defective tables in Blogger ===
Tables must be scrollable with horizontal sliders and responsive table wrappers: <div style="display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; margin:1.5em 0;"> wrapping the <table>
Every table must have min-width: 520px on the <table> element so the browser scrolls instead of crushing columns
ALL cells (both <th> and <td> in ALL columns) must have white-space:nowrap; inline so content never breaks mid-word or mid-phrase
Every cell must have adequate padding: padding:10px 12px; to prevent content from feeling cramped
Never use table-layout:fixed unless column widths are explicitly set
Never use a table for labeled lists — use flexbox rows or <dl><dt><dd> instead
Four or more columns must be converted to a card or flexbox layout — three columns is the maximum safe column count for Blogger
Mental model test: ask "what happens if this container is 320px wide?" If the answer is "text breaks," it needs a scroll wrapper or a non-table layout
Every scroll wrapper must use mandatory inline CSS directly on the div, not a class
Every <table> must use mandatory inline CSS directly on the element, not a class: <table style="width:100%; min-width:520px; border-collapse:collapse; font-size:0.92em;">
Every <th> and <td> must carry style="white-space:nowrap; padding:10px 12px;" inline — apply to ALL cells in ALL columns without exception
No CSS classes or external stylesheets may be used for any style that table rendering depends on. All table, wrapper, cell, and header styles must be inline.
Every table must use <thead> for header rows and <tbody> for data rows so Blogger's parser does not strip or reorder them