body { margin: 0; 

  max-width: 800px;
  margin: 20px auto;
  padding: 0 10px;

background: #ffffff; color: #24292e; }
    .export-container { max-width: 840px; margin: 0 auto; padding: 48px 32px; box-sizing: border-box; }
    .export-container li:has(> input[type="checkbox"]) { list-style: none; }
    .export-container li > input[type="checkbox"] { margin: 0 .4em .18em -1.35em; vertical-align: middle; }
    @media print { .export-container { padding: 0; max-width: none; } }




.tool-md-preview, .export-container {
  width: min(100%, 900px);
  max-width: 900px;
  min-height: 100%;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 68px) clamp(22px, 5vw, 58px);
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.tool-md-preview img, .export-container img,
.tool-md-preview video, .export-container video,
.tool-md-preview svg, .export-container svg { max-width: 100%; height: auto; }
.tool-md-preview pre, .export-container pre {
  max-width: 100%;
  margin: 1.4em 0;
  padding: 1.05em 1.2em;
  overflow-x: auto;
  box-sizing: border-box;
  color: var(--html-code-text) !important;
  font-size: 0.9em;
  line-height: 1.62;
  tab-size: 2;
}

/*
 BWN
 color: var(--html-code-text) !important;
*/
.tool-md-preview pre code, .export-container pre code {
  display: block;
  min-width: max-content;
  border: 0;
  background: transparent !important;
  color: white !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.tool-md-preview table, .export-container table { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .tool-md-preview, .export-container { padding: 28px 20px; }
  .tool-md-preview pre, .export-container pre { margin-inline: -4px; padding: 0.9em 1em; }
}
/*
  BWN
  --html-code-text: #f5f5f4;
*/
.tool-md-preview, .export-container {
  background: #ffffff;
  color: #111111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  --html-code-text: #ffffff;
  --html-code-keyword: #ff514a;
  --html-code-title: #ffffff;
  --html-code-string: #ffd166;
  --html-code-number: #7dd3fc;
  --html-code-comment: #a3a3a3;
}
h1, h2, h3, h4 { color: #000000; font-weight: 800; letter-spacing: -0.045em; }
h1 { margin-bottom: 0.65em; padding-top: 0.22em; border-top: 12px solid #e10600; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 0.88; }
h2 { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: baseline; margin-top: 1.8em; border-bottom: 3px solid #000000; padding-bottom: 0.2em; }
h2::before { color: #e10600; content: "■"; font-size: 0.65em; }
h3 { margin-top: 1.5em; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.86em; }
a { color: #d10a04; font-weight: 700; text-decoration-thickness: 2px; }
strong 	   { background: linear-gradient(transparent 58%, #ffd3d1 58%); }
blockquote { border: 0; border-top: 3px solid #000000; border-bottom: 3px solid #000000; padding: 0.9em 0; color: #222222; font-size: 1.1em; font-weight: 700; }
code 	   { background: #eeeeec; color: #b00000; padding: 0.12em 0.3em; }
pre 	   { border: 0; border-radius: 0; background: #111111; box-shadow: 10px 10px 0 #e10600; }
/* BWN
pre code { background: transparent; color: inherit; padding: 0; }*/
pre code { background: transparent; color: white; padding: 0; }
table { display: table; width: 100%; border-collapse: collapse; }
th { background: #111111; color: #ffffff; text-transform: uppercase; letter-spacing: 0.06em; }
th, td { border: 2px solid #111111; padding: 0.65em; }
/*
.tool-md-preview pre .hljs-keyword, .export-container pre .hljs-keyword,
.tool-md-preview pre .hljs-selector-tag, .export-container pre .hljs-selector-tag,
.tool-md-preview pre .hljs-literal, .export-container pre .hljs-literal { color: var(--html-code-keyword) !important; }
.tool-md-preview pre .hljs-title, .export-container pre .hljs-title,
.tool-md-preview pre .hljs-title.function_, .export-container pre .hljs-title.function_,
.tool-md-preview pre .hljs-built_in, .export-container pre .hljs-built_in { color: var(--html-code-title) !important; }
.tool-md-preview pre .hljs-string, .export-container pre .hljs-string,
.tool-md-preview pre .hljs-attr, .export-container pre .hljs-attr,
.tool-md-preview pre .hljs-name, .export-container pre .hljs-name { color: var(--html-code-string) !important; }
.tool-md-preview pre .hljs-number, .export-container pre .hljs-number,
.tool-md-preview pre .hljs-symbol, .export-container pre .hljs-symbol,
.tool-md-preview pre .hljs-variable, .export-container pre .hljs-variable { color: var(--html-code-number) !important; }
.tool-md-preview pre .hljs-comment, .export-container pre .hljs-comment,
.tool-md-preview pre .hljs-quote, .export-container pre .hljs-quote { color: var(--html-code-comment) !important; font-style: italic; }
.tool-md-preview pre .hljs-params, .export-container pre .hljs-params,
.tool-md-preview pre .hljs-punctuation, .export-container pre .hljs-punctuation { color: var(--html-code-text) !important; }
*/