h2.m2d-heading {
    font-weight: 300;
    font-size: 30px;
}

h5.m2d-heading {
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 15px;
}

h4.m2d-heading {
    font-weight: 400;
    margin-bottom: 15px;
    margin-top: 30px;
}

h3.m2d-heading {
    font-weight: 500;
    margin-top: 40px;
    font-size: 20px;
    margin-bottom: 15px;
}

.m2d-paragraph, .m2d-list {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 10px;
}

.m2d-block-code {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Theme-aware styling for m2d code blocks */
:root[data-mantine-color-scheme="light"] .m2d-block-code pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #1a1b1e;
}

:root[data-mantine-color-scheme="dark"] .m2d-block-code pre {
    background-color: #1a1b1e;
    border: 1px solid #373a40;
    color: #c1c2c5;
}

/* Inline code in markdown content */
:root[data-mantine-color-scheme="light"] .m2d-paragraph code,
:root[data-mantine-color-scheme="light"] .m2d-list code {
    background-color: #f1f3f5;
    color: #1a1b1e;
}

:root[data-mantine-color-scheme="dark"] .m2d-paragraph code,
:root[data-mantine-color-scheme="dark"] .m2d-list code {
    background-color: #25262b;
    color: #c1c2c5;
}

.m2d-block-exec > *:first-child {
    margin-bottom: 10px;
}

.m2d-block-exec {
    margin-bottom: 20px;
}

/* ── Email example previews ───────────────────────────────────────────────
   The email itself always renders as it will be delivered (see the
   [data-email-component="html"] rules in style.css), so the theme switch
   styles the frame *around* the message rather than recolouring it. The
   result reads as a message sitting on an inbox surface in either theme,
   instead of a bare white rectangle butted against a dark page.

   Scoped to the email root rather than the whole exec block on purpose: some
   examples mix Mantine controls with the email in one block, and those
   controls must keep the page's theme rather than be dragged onto the mat. */
.m2d-block-exec [data-email-component="html"] {
    border-radius: 10px;
    overflow: hidden; /* clip the body's background to the rounded corners */
    /* Named colour, not the `border: 1px solid` shorthand: that shorthand
       resolves to currentColor, flashing a dark border on the frame before
       Mantine stamps the colour-scheme attribute on :root. */
    border: 1px solid #e9ecef;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:root[data-mantine-color-scheme="light"] .m2d-block-exec [data-email-component="html"] {
    border-color: #e9ecef;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* On a dark page the message is the brightest thing on screen. A light hairline
   plus a deeper shadow keeps its edge from cutting off abruptly. */
:root[data-mantine-color-scheme="dark"] .m2d-block-exec [data-email-component="html"] {
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.m2d-strong {
    font-weight: 500
}

.m2d-block-kwargs {
    margin-bottom: 30px;
}

.m2d-block-kwargs > thead > tr > th {
    font-size: 15px;
    font-weight: 500;
}

.m2d-link {
    font-size: 15px;
}

.m2d-block-kwargs td:nth-child(3) {
    width: 250px;
}

.m2d-block-kwargs td:nth-child(1) {
    width: 200px;
}

.m2d-table > thead > tr > th {
    font-size: 15px;
    font-weight: 500;
}

.m2d-table td:nth-child(3) {
    width: 500px;
}

.m2d-table td:nth-child(1) {
    width: 200px;
}

.m2d-block-admonition {
    margin: 10px 0;
}