.markdown-content {
    --markdown-accent: #0d6efd;
    --markdown-border: #dee2e6;
    --markdown-code-bg: #1f2937;
    --markdown-code-text: #f8fafc;
    color: #33475b;
    font-size: 1.05rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.markdown-content > :first-child {
    margin-top: 0;
}

.markdown-content > :last-child {
    margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: #2c3e50;
    font-weight: 650;
    line-height: 1.3;
    margin: 1.6em 0 .65em;
}

.markdown-content h1 {
    border-bottom: 1px solid #edf0f2;
    font-size: 2rem;
    padding-bottom: .3em;
}

.markdown-content h2 { font-size: 1.6rem; }
.markdown-content h3 { font-size: 1.3rem; }
.markdown-content h4 { font-size: 1.15rem; }
.markdown-content h5 { font-size: 1.05rem; }
.markdown-content h6 { font-size: .95rem; }

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content .markdown-table-wrapper,
.markdown-content .markdown-code-wrapper {
    margin: 0 0 1.4rem;
}

.markdown-content ul,
.markdown-content ol {
    padding-left: 2rem;
}

.markdown-content li + li {
    margin-top: .35rem;
}

.markdown-content li > ul,
.markdown-content li > ol {
    margin-bottom: .4rem;
    margin-top: .4rem;
}

.markdown-content a {
    color: var(--markdown-accent);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

.markdown-content a:hover {
    color: #0a58ca;
    text-decoration-thickness: .12em;
}

.markdown-content a:focus-visible,
.markdown-copy-button:focus-visible {
    border-radius: 4px;
    outline: 3px solid rgba(13, 110, 253, .35);
    outline-offset: 3px;
}

.markdown-content img {
    border-radius: 10px;
    display: block;
    height: auto;
    margin: 1.5rem auto;
    max-width: 100%;
}

.markdown-content blockquote {
    background: rgba(255, 122, 89, .09);
    border-left: 4px solid #ff7a59;
    border-radius: 0 8px 8px 0;
    color: #4b5563;
    padding: 1rem 1.25rem;
}

.markdown-content blockquote > :last-child {
    margin-bottom: 0;
}

.markdown-content :not(pre) > code {
    background: #f1f3f5;
    border-radius: 5px;
    color: #b42365;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .9em;
    padding: .15rem .35rem;
}

.markdown-content .markdown-code-wrapper {
    position: relative;
}

.markdown-content pre {
    background: var(--markdown-code-bg);
    border-radius: 10px;
    color: var(--markdown-code-text);
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
    overflow-x: auto;
    padding: 1.25rem;
    white-space: pre;
}

.markdown-content pre code {
    background: transparent;
    color: inherit;
    display: block;
    min-width: 100%;
    padding: 0;
    white-space: pre;
    width: max-content;
}

.markdown-copy-button {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 600;
    min-height: 36px;
    padding: .35rem .65rem;
    position: absolute;
    right: .75rem;
    top: .75rem;
    z-index: 1;
}

.markdown-copy-button:hover {
    background: rgba(255, 255, 255, .22);
}

.markdown-copy-button.is-copied {
    background: #198754;
    border-color: #198754;
}

.markdown-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.markdown-content table {
    border-collapse: collapse;
    color: #212529;
    margin: 0;
    min-width: 100%;
    width: max-content;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid var(--markdown-border);
    padding: .7rem .8rem;
    vertical-align: top;
}

.markdown-content thead th {
    background: #f8f9fa;
    border-bottom-width: 2px;
    font-weight: 650;
}

.markdown-content tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, .018);
}

.markdown-content hr {
    border: 0;
    border-top: 1px solid var(--markdown-border);
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .markdown-content {
        font-size: 1rem;
    }

    .markdown-content h1 { font-size: 1.65rem; }
    .markdown-content h2 { font-size: 1.4rem; }
    .markdown-content h3 { font-size: 1.2rem; }
}
