/* markdown demo */

.md-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 1100px;
    margin: 1rem auto 0;
    text-align: left;
}

#md-input, .md-output, .md-html {
    box-sizing: border-box;
    height: 560px;
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid #30363d;
    border-radius: 8px;
    overflow: auto;
}

#md-input {
    width: 100%;
    resize: vertical;
    background: #0d1117;
    color: #e6edf3;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    tab-size: 4;
}

.md-html {
    background: #0d1117;
    color: #8b949e;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Rendered document */
.md-output {
    background: #0f141b;
    color: #d8dee6;
    font-size: 0.92rem;
    line-height: 1.65;
}

.md-output > :first-child { margin-top: 0; }
.md-output h1, .md-output h2, .md-output h3 { margin: 1.2em 0 0.5em; color: #f0f6fc; line-height: 1.3; }
.md-output h1 { font-size: 1.6rem; padding-bottom: 0.3em; border-bottom: 1px solid #30363d; }
.md-output h2 { font-size: 1.3rem; padding-bottom: 0.25em; border-bottom: 1px solid #21262d; }
.md-output h3 { font-size: 1.1rem; }
.md-output a { color: #58a6ff; }
.md-output code { padding: 0.1em 0.35em; background: #1f2630; border-radius: 4px; font-size: 0.85em; }
.md-output pre { padding: 0.8rem 1rem; background: #161b22; border-radius: 6px; overflow-x: auto; }
.md-output pre code { padding: 0; background: none; font-size: 0.8rem; line-height: 1.5; }
.md-output blockquote { margin: 0.8em 0; padding: 0.1em 1em; color: #9aa5b1; border-left: 3px solid #f0883e; }
.md-output table { border-collapse: collapse; margin: 0.8em 0; }
.md-output th, .md-output td { padding: 0.35em 0.7em; border: 1px solid #30363d; }
.md-output th { background: #161b22; }
.md-output hr { border: none; border-top: 1px solid #30363d; margin: 1.5em 0; }
.md-output img { max-width: 100%; }
.md-output ul, .md-output ol { margin: 0.5em 0; padding-left: 1.6em; }
.md-output li.task { list-style: none; margin-left: -1.3em; }
.md-output del { color: #8b949e; }
.md-output .tok-kw { color: #ff7b72; }
.md-output .tok-str { color: #a5d6ff; }
.md-output .tok-com { color: #8b949e; font-style: italic; }
.md-output .tok-num { color: #79c0ff; }
.md-output .tok-type { color: #ffa657; }

@media (max-width: 760px) {
    .md-split { grid-template-columns: 1fr; }
    #md-input, .md-output, .md-html { height: 360px; }
}