<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{TITLE}} — Canvas Preview</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --canvas-bg: #f5f5f5;
      --canvas-surface: #ffffff;
      --canvas-text: #2d3b45;
      --canvas-text-secondary: #6a7883;
      --canvas-link: #0374b5;
      --canvas-border: #c7cdd1;
      --canvas-table-head: #f5f5f5;
      --canvas-code-bg: #f8f8f8;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--canvas-text);
      background: var(--canvas-bg);
      padding: 24px;
    }
    .ic-Layout-contentMain {
      max-width: 980px;
      margin: 0 auto;
      background: var(--canvas-surface);
      border: 1px solid var(--canvas-border);
      border-radius: 4px;
      padding: 24px 32px;
      min-height: 400px;
    }
    /* Canvas user_content styles */
    .show-content h1 { font-size: 1.75em; font-weight: 500; margin: 0.5em 0; color: var(--canvas-text); }
    .show-content h2 { font-size: 1.5em; font-weight: 500; margin: 1em 0 0.5em; color: var(--canvas-text); }
    .show-content h3 { font-size: 1.25em; font-weight: 500; margin: 1em 0 0.5em; color: var(--canvas-text); }
    .show-content h4 { font-size: 1.1em; font-weight: 500; margin: 1em 0 0.5em; color: var(--canvas-text); }
    .show-content p { margin: 0 0 1em; }
    .show-content a { color: var(--canvas-link); text-decoration: none; }
    .show-content a:hover { text-decoration: underline; }
    .show-content ul, .show-content ol { margin: 0 0 1em 1.5em; }
    .show-content li { margin: 0.25em 0; }
    .show-content blockquote {
      border-left: 4px solid var(--canvas-border);
      margin: 1em 0; padding: 0.5em 1em;
      color: var(--canvas-text-secondary);
    }
    .show-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
    .show-content th, .show-content td { border: 1px solid var(--canvas-border); padding: 8px 12px; text-align: left; }
    .show-content th { background: var(--canvas-table-head); font-weight: 500; }
    /* A <tr> with an inline background should color the whole row: make its
       cells transparent so the row background shows through (beats .show-content th). */
    .show-content tr[style*="background"] > th,
    .show-content tr[style*="background"] > td { background: transparent; }
    .show-content img { max-width: 100%; height: auto; }
    .show-content code { background: var(--canvas-code-bg); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
    .show-content pre { background: var(--canvas-code-bg); padding: 12px; border-radius: 4px; overflow-x: auto; margin: 1em 0; }
    .show-content pre code { background: none; padding: 0; }
    .show-content hr { border: none; border-top: 1px solid var(--canvas-border); margin: 1.5em 0; }
    .show-content iframe { max-width: 100%; border: 1px solid var(--canvas-border); border-radius: 4px; }
    /* Preview label */
    .preview-label {
      text-align: center; color: var(--canvas-text-secondary);
      font-size: 12px; padding: 8px;
      border-bottom: 1px solid var(--canvas-border); margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div class="ic-Layout-contentMain">
    <div class="preview-label">Canvas Preview — Staged Content</div>
    {{TOP_BAR}}
    <div class="show-content user_content">
      {{CONTENT}}
    </div>
  </div>
</body>
</html>
