/* =========================================================
   AMATRIZ THEME - v1.0.1
   SPDX-License-Identifier: MIT
   Copyright (c) 2026 Electritects Pty Ltd
   Clean Matrix-inspired engineering theme
   Includes:
   - Editor styling
   - Sidebar (Files + Outline)
   - Preferences + Export UI styling
   - PDF export: DARK output with print color preservation
========================================================= */

:root {
    --bg-color: #030803;
    --side-bar-bg-color: #050905;
    --side-bg: #050905;

    --text-color: #00e63a;
    --text-soft: #00cc44;
    --text-dim: #007a1a;
    --select-text-bg-color: #003b00;
    --select-text-font-color: #00ff41;
    --primary-color: #00e63a;
    --primary-btn-border-color: #00cc44;
    --primary-btn-text-color: #030803;
    --active-file-bg-color: #0b2e0b;
    --active-file-text-color: #00ff41;
    --active-file-border-color: #00e63a;
    --item-hover-bg-color: #082208;
    --item-hover-text-color: #00ff41;
    --control-text-color: #00e63a;
    --control-text-hover-color: #00ff41;
    --window-border: #0f2a0f;

    --border-color: #0f2a0f;

    --code-bg: #061206;
    --panel-bg: #040a04;

    --hover-bg: #082208;
    --active-bg: #0b2e0b;

    --link-color: #87ceeb;

    --pill-red-border: #ff4d4d;
    --pill-red-bg: rgba(255, 77, 77, 0.18);
    --pill-red-text: #ff8080;

    --pill-blue-border: #4da6ff;
    --pill-blue-bg: rgba(77, 166, 255, 0.18);
    --pill-blue-text: #99ccff;
}

html {
    font-size: 16px;
}

html,
body,
.typora-export,
.typora-export-content {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* =========================
   BASE / EDITOR
========================= */

html, body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: "JetBrains Mono", "Consolas", "Menlo", "Courier New", monospace;
    line-height: 1.6;
}

#write {
    width: calc(100% - 80px);
    max-width: 980px;
    min-width: 0;
    margin-left: 40px;
    margin-right: auto;
    box-sizing: border-box;
    font-size: 1rem;
    overflow-wrap: break-word;
    word-break: normal;
}

#write p,
#write li,
#write blockquote,
#write td,
#write th {
    overflow-wrap: anywhere;
}

#write a {
    overflow-wrap: anywhere;
}

/* subtle scanline texture */
@media screen {
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image: linear-gradient(rgba(0,255,65,0.020) 1px, transparent 1px);
        background-size: 100% 4px;
        pointer-events: none;
    }
}

/* =========================
   HEADINGS
========================= */

h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    font-weight: 600;
    margin-top: 1.4em;
    margin-bottom: 0.6em;
}

h1 {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    font-size: 2rem;
}

h2 {
    border-bottom: 1px solid var(--text-dim);
    padding-bottom: 4px;
    font-size: 1.6rem;
}

h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; opacity: 0.85; }

/* =========================
   TEXT / LINKS
========================= */

a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

a:hover {
    color: var(--text-color);
}

strong {
    color: var(--link-color);
}

em {
    color: var(--text-soft);
}

/* =========================
   LISTS / QUOTES / HR
========================= */

ul, ol {
    padding-left: 1.5em;
    margin-top: 0.35em;
    margin-bottom: 0.65em;
}

#write li {
    margin-top: 0.12em;
    margin-bottom: 0.12em;
    line-height: 1.45;
}

#write li > ul,
#write li > ol {
    margin-top: 0.18em;
    margin-bottom: 0.18em;
}

blockquote {
    border-left: 3px solid var(--text-color);
    padding-left: 12px;
    color: var(--text-soft);
}

blockquote blockquote {
    border-left: 2px solid var(--text-dim);
    opacity: 0.9;
}

blockquote blockquote blockquote {
    border-left: 2px dashed var(--text-dim);
    opacity: 0.8;
}

hr {
    border: none;
    height: 1px;
    background: var(--border-color);
}

/* =========================
   YAML FRONT MATTER
========================= */

pre.md-meta-block,
.md-meta-block {
    background: rgba(0, 26, 0, 0.82) !important;
    background-color: rgba(0, 26, 0, 0.82) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--text-color) !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 10px 12px;
    margin: 1.1em 0 2em;
    font-family: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
}

pre.md-meta-block *,
.md-meta-block * {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-color) !important;
    text-shadow: none !important;
}

/* =========================
   CODE
========================= */

code {
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 2px 6px;
    border-radius: 3px;
}

pre.md-fences {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    padding: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 1em 0;
    box-shadow: 0 0 4px rgba(0, 255, 65, 0.15);
    break-inside: auto;
    page-break-inside: auto;
}

pre code,
.md-fences code {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}

/* basic codemirror token colors */
.cm-keyword  { color: #00e63a !important; }
.cm-string   { color: #33ff66 !important; }
.cm-comment  { color: #007a1a !important; }
.cm-number   { color: #66ff99 !important; }
.cm-variable { color: #00cc44 !important; }
.cm-atom,
.cm-property,
.cm-def,
.cm-builtin,
.cm-attribute { color: #87ceeb !important; }

/* =========================
   TABLES
========================= */

table {
    border: 1px solid var(--border-color);
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    overflow-wrap: anywhere;
    background: var(--bg-color);
}

thead {
    display: table-header-group;
}

tbody {
    display: table-row-group;
}

th, td {
    border: 1px solid var(--border-color);
    padding: 6px 10px;
}

#write table,
#write thead,
#write tbody,
#write tr,
#write th,
#write td {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

#write th {
    background-color: #082208 !important;
    font-weight: 600;
}

#write tr:nth-child(even) td {
    background-color: #071707 !important;
}

#write tr:hover td {
    background-color: var(--hover-bg) !important;
}

/* =========================
   SELECTION
========================= */

::selection {
    background: var(--border-color);
    color: var(--text-color);
}

/* =========================
   CURSOR
========================= */

@keyframes amatriz-blink {
    50% { opacity: 0; }
}

.md-cursor {
    animation: amatriz-blink 1.2s infinite;
}

#write,
#write *,
.CodeMirror,
.CodeMirror *,
.md-fences,
.md-fences *,
table,
table * {
    caret-color: #00ff41 !important;
}

.md-cursor,
.CodeMirror-cursor,
.cm-cursor,
.md-fences .CodeMirror-cursor,
pre .CodeMirror-cursor,
td .md-cursor,
th .md-cursor {
    width: 2px !important;
    min-width: 2px !important;
    border-left: 2px solid #00ff41 !important;
    background-color: #00ff41 !important;
    box-shadow: 0 0 3px rgba(0, 255, 65, 0.6) !important;
    animation: amatriz-blink 1.2s infinite;
}

/* =========================================================
   SIDEBAR (FILES + OUTLINE)
========================================================= */

#typora-sidebar {
    background: var(--side-bg);
    border-right: 1px solid var(--border-color);
    min-width: 240px;
}

.sidebar-tabs {
    border-bottom: 1px solid var(--border-color);
}

.sidebar-tabs .tab-button {
    color: var(--text-soft);
}

.sidebar-tabs .tab-button.active {
    color: var(--text-color);
    border-bottom: 2px solid var(--text-color);
}

/* OUTLINE */

.outline-item {
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    padding: 4px 8px;
}

.outline-item:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.outline-item.active {
    background: var(--active-bg);
    color: #00ff41;
}

/* indentation */
.outline-h1 { padding-left: 6px;  font-weight: 600; }
.outline-h2 { padding-left: 14px; }
.outline-h3 { padding-left: 24px; }
.outline-h4 { padding-left: 34px; }
.outline-h5 { padding-left: 44px; }
.outline-h6 { padding-left: 54px; }

/* truncate long lines */
.outline-label {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outline-expander {
    color: var(--text-soft);
    flex: 0 0 12px;
    width: 12px;
    text-align: center;
    line-height: 1;
}

/* FILES PANEL */

.file-list-item,
.file-node-content {
    color: var(--text-soft);
}

.file-list-item:hover,
.file-node-content:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.file-list-item.active,
.file-library-node.active > .file-node-content {
    background: var(--active-bg);
    color: #00ff41;
}

/* FOOTER */
footer,
#footer-word-count {
    color: #008f22;
}

#toggle-sourceview-btn {
    background: rgba(0, 26, 0, 0.88) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    opacity: 0.72;
}

#toggle-sourceview-btn:hover {
    background: var(--active-bg) !important;
    color: #00ff41 !important;
    opacity: 1;
}

#toggle-sourceview-btn *,
.sourceview-off,
.sourceview-on {
    color: inherit !important;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--text-dim); }

/* =========================================================
   PREFERENCES / MODAL UI (FULL)
========================================================= */

#top-titlebar,
#w-titlebar-left,
#main-menu,
header {
    background: var(--side-bg) !important;
    background-color: var(--side-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

#title-text,
.title-text,
#w-menu-btn,
#main-menu .menuitem,
#main-menu .menu-style-btn,
.toolbar-icon {
    color: var(--text-color) !important;
}

#main-menu .menuitem:hover,
#w-menu-btn:hover,
.toolbar-icon:hover {
    background: var(--hover-bg) !important;
    color: #00ff41 !important;
}

.ty-preferences,
.modal-content,
.modal-dialog,
.modal-body,
.megamenu-content,
.megamenu-menu,
.megamenu-opened header {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Left preferences menu */
.nav-group-item {
    background: var(--bg-color) !important;
    color: var(--text-soft) !important;
}

.nav-group-item.active {
    background: var(--active-bg) !important;
    color: #00ff41 !important;
}

/* Inputs / selects / buttons in preferences */
.ty-preferences input,
.ty-preferences select,
.modal-content input,
.modal-content select,
.ty-preferences .form-control,
.modal-content .form-control {
    background: var(--panel-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.ty-preferences label,
.modal-content label {
    color: var(--text-color) !important;
}

.ty-preferences .btn,
.modal-content .btn {
    background: var(--code-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Dropdown menus inside preferences/export */
.dropdown-menu {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.dropdown-menu > li > a {
    color: var(--text-color) !important;
}

.dropdown-menu > li > a:hover {
    background: var(--active-bg) !important;
}

/* Export page panels (the grey box you saw) */
.ty-preferences .panel,
.ty-preferences .panel-body,
.ty-preferences .form-group,
.ty-preferences .input-group,
.ty-preferences .input-group-addon {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* =========================================================
   TOC BLOCK (IN-DOCUMENT)
   Keep it readable, do not hide it.
========================================================= */

.md-toc {
    border: 1px dashed var(--border-color);
    padding: 10px 12px;
    background: rgba(0,0,0,0.20);
}

.md-toc-content a {
    color: var(--text-soft);
    text-decoration: none;
}

.md-toc-content a:hover {
    color: var(--text-color);
    text-decoration: underline;
}

/* =========================================================
   MATH / RAW BLOCK HOVER
   Keep Typora's editable math preview in the AMatriz palette.
========================================================= */

.md-math-block,
.md-math-container,
.md-mathjax-preview,
.md-htmlblock,
.md-htmlblock-container,
.md-htmlblock-panel,
.md-htmlblock-content,
.md-rawblock,
.md-rawblock-content,
.md-rawblock-input,
.md-rawblock-tooltip {
    background: var(--panel-bg) !important;
    background-color: var(--panel-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.md-math-block:hover,
.md-math-container:hover,
.md-htmlblock:hover,
.md-htmlblock-container:hover,
.md-htmlblock-content:hover,
.md-rawblock:hover,
.md-rawblock-content:hover {
    background: var(--panel-bg) !important;
    background-color: var(--panel-bg) !important;
    color: var(--text-color) !important;
    box-shadow: inset 0 0 0 1px var(--border-color) !important;
}

.md-math-block *,
.md-math-container *,
.md-mathjax-preview *,
.md-htmlblock *,
.md-htmlblock-container *,
.md-htmlblock-content *,
.md-rawblock *,
.md-rawblock-content * {
    color: var(--text-color) !important;
}

.md-rawblock-tooltip,
.md-rawblock-tooltip-name,
.md-rawblock-tooltip-btn,
.md-rawblock-tooltip-btn.md-rawblock-control,
.md-rawblock-control,
.md-rawblock-before,
.md-rawblock-after,
.code-tooltip,
.code-tooltip-content,
.md-hover-tip,
.md-arrow,
.md-htmlblock .md-rawblock-tooltip,
.md-math-block .md-rawblock-tooltip {
    background: var(--code-bg) !important;
    background-color: var(--code-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    opacity: 0.88;
}

.md-rawblock .code-tooltip,
.md-htmlblock .code-tooltip,
.md-htmlblock-container .code-tooltip,
.md-math-block .code-tooltip,
.md-mathblock-panel .code-tooltip,
.mathjax-block > .code-tooltip,
#write .code-tooltip {
    background: var(--code-bg) !important;
    background-color: var(--code-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    opacity: 0.88;
}

.md-rawblock:hover .md-rawblock-tooltip,
.md-rawblock:hover .md-rawblock-tooltip-name,
.md-rawblock:hover .md-rawblock-tooltip-btn,
.md-htmlblock:hover .md-rawblock-tooltip,
.md-math-block:hover .md-rawblock-tooltip {
    background: var(--active-bg) !important;
    background-color: var(--active-bg) !important;
    color: #00ff41 !important;
    opacity: 1;
}

.md-rawblock:hover .code-tooltip,
.md-htmlblock:hover .code-tooltip,
.md-htmlblock-container:hover .code-tooltip,
.md-math-block:hover .code-tooltip,
.md-mathblock-panel:hover .code-tooltip,
.mathjax-block:hover > .code-tooltip,
#write:hover .code-tooltip {
    background: var(--active-bg) !important;
    background-color: var(--active-bg) !important;
    color: #00ff41 !important;
    opacity: 1;
}

/* =========================================================
   AMATRIZ RED / BLUE PILL SYSTEM
========================================================= */
.pill-red,
.pill-blue {
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.9em;
  line-height: 1.2;
  border-radius: 5px;
  white-space: nowrap;
  font-weight: 500;
}

.pill-red {
  border: 1px solid var(--pill-red-border);
  background: var(--pill-red-bg);
  color: var(--pill-red-text);
}

.pill-blue {
  border: 1px solid var(--pill-blue-border);
  background: var(--pill-blue-bg);
  color: var(--pill-blue-text);
}

/* =========================================================
   PDF EXPORT (DARK, PRESERVE COLORS)
   Typora PDF export uses a print-like pipeline.
========================================================= */

@media print {
    html, body,
    .typora-export,
    .typora-export-content {
        background: var(--bg-color) !important;
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;

        /* tell the renderer not to optimize away dark backgrounds */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* remove scanline overlay for clean PDF */
    body::before { display: none !important; }

    body {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    /* make exported page full width */
    #write {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        overflow-wrap: break-word !important;
    }

    .typora-export #write,
    .typora-export-content #write {
        box-sizing: border-box !important;
        min-height: auto !important;
    }

    /* keep colors consistent in export */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-color) !important;
        margin-top: 0.95em !important;
        margin-bottom: 0.45em !important;
        padding-top: 0.18em !important;
        line-height: 1.25 !important;
        overflow: visible !important;
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    h1 {
        border-bottom-color: var(--border-color) !important;
    }

    h2 {
        border-bottom-color: var(--text-dim) !important;
    }

    #write h2 {
        break-before: auto;
        page-break-before: auto;
    }

    a {
        color: var(--link-color) !important;
        text-decoration-color: var(--link-color) !important;
    }

    #toggle-sourceview-btn,
    #toggle-sourceview-btn *,
    .sourceview-off,
    .sourceview-on,
    .md-rawblock-tooltip,
    .md-rawblock-tooltip-name,
    .md-rawblock-tooltip-btn,
    .md-rawblock-control,
    .code-tooltip,
    .code-tooltip-content,
    .md-hover-tip,
    .md-arrow {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Footnote return links are screen navigation, not print content. */
    a.footnote-backref,
    a.reversefootnote,
    a[href^="#fnref"],
    a[href*="fnref"],
    .footnote-backref,
    .reversefootnote {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    blockquote {
        background: transparent !important;
        color: var(--text-soft) !important;
        border-left-color: var(--text-color) !important;
    }

    pre.md-meta-block,
    .md-meta-block {
        background: var(--panel-bg) !important;
        background-color: var(--panel-bg) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
        border-left: 3px solid var(--text-color) !important;
    }

    code {
        background: var(--code-bg) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
    }

    pre, pre.md-fences {
        background: var(--panel-bg) !important;
        color: var(--text-color) !important;
        border: 1px solid var(--border-color) !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    pre code,
    pre.md-fences code,
    .md-fences code,
    pre .CodeMirror-line,
    pre.md-fences .CodeMirror-line,
    .md-fences .CodeMirror-line,
    pre .CodeMirror-line *,
    pre.md-fences .CodeMirror-line *,
    .md-fences .CodeMirror-line * {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    table, th, td {
        border: 1px solid var(--border-color) !important;
        line-height: 1.25 !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    table {
        border: 1px solid var(--border-color) !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        width: 100% !important;
        font-size: 0.86em !important;
        margin-top: 0.55em !important;
        margin-bottom: 0.75em !important;
    }

    thead {
        display: table-header-group !important;
    }

    tbody {
        display: table-row-group !important;
    }

    th {
        background: #082208 !important;
        color: var(--text-color) !important;
        padding: 4px 6px !important;
        vertical-align: top !important;
    }

    thead th {
        padding-top: 6px !important;
        padding-bottom: 5px !important;
    }

    td {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        padding: 3px 6px !important;
        vertical-align: top !important;
    }

    #write tr:nth-child(even) td {
        background: #071707 !important;
        background-color: #071707 !important;
    }

    #write table.periodic-mini {
        table-layout: fixed !important;
        font-size: 0.48em !important;
        line-height: 1.05 !important;
        margin-top: 0.35em !important;
        margin-bottom: 0.55em !important;
    }

    #write table.periodic-mini th,
    #write table.periodic-mini td {
        padding: 1px 2px !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    #write table.periodic-mini td[colspan] {
        text-align: center !important;
    }

    #write table.amatriz-compact-table,
    #write table.amatriz-technical-table,
    #write table.amatriz-chemistry-table,
    #write table.amatriz-unicode-table {
        font-size: 0.72em !important;
        line-height: 1.12 !important;
        margin-top: 0.4em !important;
        margin-bottom: 0.55em !important;
    }

    #write table.amatriz-compact-table th,
    #write table.amatriz-compact-table td,
    #write table.amatriz-technical-table th,
    #write table.amatriz-technical-table td,
    #write table.amatriz-chemistry-table th,
    #write table.amatriz-chemistry-table td,
    #write table.amatriz-unicode-table th,
    #write table.amatriz-unicode-table td {
        padding: 2px 4px !important;
        line-height: 1.12 !important;
    }

    #write table.amatriz-unicode-table {
        font-size: 0.74em !important;
    }

    .md-toc {
        background: rgba(0, 0, 0, 0.35) !important;
        border-color: var(--border-color) !important;
    }

    .md-toc-content a {
        color: var(--text-soft) !important;
    }

    hr {
        background: var(--border-color) !important;
    }

    /* page setup */
    @page {
        margin: 18mm 12mm 15mm;
        background: #030803;
    }

    /* avoid ugly splits */
    blockquote, img, .md-toc, .md-diagram-panel {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    pre, pre.md-fences, .md-fences {
        break-inside: auto !important;
        page-break-inside: auto !important;
    }

    table {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    thead {
        display: table-header-group !important;
    }

    tbody {
        display: table-row-group !important;
    }

    tr,
    th,
    td {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    p,
    li {
        orphans: 3;
        widows: 3;
    }

    pre {
        orphans: 3 !important;
        widows: 3 !important;
        line-height: 1.5 !important;
        padding-bottom: 6px !important;
    }

    h2 + pre,
    h3 + pre {
        break-before: avoid !important;
    }

    pre + pre {
        border-top: 0 !important;
    }

    ul,
    ol {
        margin-top: 0.28em !important;
        margin-bottom: 0.5em !important;
        padding-left: 1.35em !important;
    }

    li {
        margin-top: 0.08em !important;
        margin-bottom: 0.08em !important;
        line-height: 1.35 !important;
    }

    img,
    svg {
        max-width: 100% !important;
    }

    .md-diagram-panel {
        overflow: visible !important;
    }

    .md-diagram-panel svg,
    svg.mermaid-svg {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        max-height: 690px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .pill-red {
      border: 1px solid var(--pill-red-border) !important;
      background: var(--pill-red-bg) !important;
      color: var(--pill-red-text) !important;
    }

    .pill-blue {
      border: 1px solid var(--pill-blue-border) !important;
      background: var(--pill-blue-bg) !important;
      color: var(--pill-blue-text) !important;
    }
}