.lead { color: var(--text-2); max-width: 64ch; line-height: 1.55; }
.md-bar { margin: 16px 0 12px; gap: 12px; align-items: center; }
.md-sp { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 14px; font-size: .84rem; cursor: pointer; color: var(--text); }
.seg button.on { background: var(--accent-bg); color: var(--accent-2); font-weight: 650; }

.md-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.md-cols [data-in] { min-height: 440px; font-family: var(--mono); font-size: .84rem; }
.md-right { border: 1px solid var(--line); border-radius: var(--radius-in); background: var(--surface); overflow: auto; max-height: 480px; }
.md-preview { padding: 16px 18px; }
.md-html { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: .78rem; white-space: pre-wrap; word-break: break-word; }

/* rendered markdown */
.md-preview h1, .md-preview h2, .md-preview h3 { margin: 1em 0 .4em; line-height: 1.25; }
.md-preview h1:first-child { margin-top: 0; }
.md-preview h1 { font-size: 1.5rem; } .md-preview h2 { font-size: 1.25rem; } .md-preview h3 { font-size: 1.05rem; }
.md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote, .md-preview table, .md-preview pre { margin: 0 0 1em; }
.md-preview code { background: var(--surface-2); padding: .1em .35em; border-radius: 4px; font-size: .88em; }
.md-preview pre { background: var(--surface-2); padding: 12px 14px; border-radius: 8px; overflow-x: auto; }
.md-preview pre code { background: none; padding: 0; }
.md-preview blockquote { border-left: 3px solid var(--line-2); padding-left: 14px; color: var(--text-2); }
.md-preview table { border-collapse: collapse; font-size: .9em; }
.md-preview th, .md-preview td { border: 1px solid var(--line); padding: 5px 10px; }
.md-preview img { max-width: 100%; }
.md-preview li.task { list-style: none; margin-left: -1.2em; }
.md-preview hr { border: 0; border-top: 1px solid var(--line); }

@media (max-width: 760px) { .md-cols { grid-template-columns: 1fr; } }