.md { max-width: 1240px; margin-inline: auto; }
.md-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.md-bar .g { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.md-b { font: 600 14.5px var(--body); border-radius: 12px; padding: 9px 14px; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.md-b:hover { border-color: var(--brand); color: var(--brand); }
.md-b.pri { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: 0; padding: 10px 16px; box-shadow: 0 10px 24px -12px rgba(91,77,255,.8); }
.md-b.pri:hover { color: #fff; filter: brightness(1.06); }
label.md-open { display: inline-block; }
.md-mode { display: inline-flex; background: rgba(21,20,43,.06); border-radius: 12px; padding: 3px; }
.md-mode button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font: 600 14px var(--body); color: var(--ink-2); cursor: pointer; }
.md-mode button[aria-pressed=true] { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(20,20,60,.15); }
.md-sel { font: 14px var(--body); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.md-pane { background: var(--glass-strong); border: 1px solid var(--edge); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.md-ph { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); gap: 8px; }
.md-ph b { color: var(--ink); font-size: 14px; }
#src, #mdout { width: 100%; min-height: 620px; height: 100%; flex: 1; border: 0; resize: vertical; padding: 14px 16px; font: 14.5px/1.55 Consolas, Menlo, "Liberation Mono", monospace; color: var(--ink); background: #fff; }
#src:focus, #mdout:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.md-view { padding: 18px 22px; background: #fff; overflow: auto; min-height: 620px; max-height: 80vh; }
body[data-mode=html] .md-only, body[data-mode=md] .html-only { display: none !important; }

.md-out { color: #1b1b1f; font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: anywhere; }
.md-out h1, .md-out h2, .md-out h3, .md-out h4 { line-height: 1.25; margin: 1.3em 0 .5em; }
.md-out > :first-child { margin-top: 0; }
.md-out h1 { font-size: 2em; } .md-out h2 { font-size: 1.5em; } .md-out h3 { font-size: 1.2em; }
.md-out p, .md-out ul, .md-out ol, .md-out pre, .md-out table, .md-out blockquote { margin: 0 0 1em; }
.md-out pre { background: #f4f4f7; padding: 12px 14px; border-radius: 8px; overflow: auto; font-size: .9em; }
.md-out code { background: #f1f1f5; padding: .1em .35em; border-radius: 5px; font-family: Consolas, Menlo, monospace; font-size: .92em; }
.md-out pre code { background: none; padding: 0; }
.md-out blockquote { padding: 0 1em; border-left: 4px solid #c9c9d3; color: #55555f; }
.md-out table { border-collapse: collapse; display: block; overflow: auto; }
.md-out th, .md-out td { border: 1px solid #d3d3dc; padding: 6px 12px; }
.md-out th { background: #f4f4f7; }
.md-out img { max-width: 100%; }
.md-out hr { border: 0; border-top: 1px solid #d3d3dc; margin: 1.5em 0; }
.md-out a { color: #3b5bdb; }
.md-out li > input { margin-right: .4em; }
.md-out.th-clean h1, .md-out.th-clean h2 { border-bottom: 1px solid #e3e3ea; padding-bottom: .25em; }
.md-out.th-serif { font-family: Georgia, "Times New Roman", serif; }
.md-out.th-serif h1, .md-out.th-serif h2, .md-out.th-serif h3 { font-family: Georgia, serif; }
.md-out.th-plain { font-size: 15px; }
@media (max-width: 900px) { .md-grid { grid-template-columns: 1fr; } #src, #mdout, .md-view { min-height: 360px; } }
@media print {
  body { background: #fff !important; padding: 0 !important; }
  body::before, body::after, .gnav, body > footer, .crumbs, .md-bar, .md-ph, .md-edit, .md-more, .pg, .pg-intro, .faq, .tools-more, .md-after { display: none !important; }
  main, .md, .md-grid, .md-pane, .md-view { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; max-height: none !important; min-height: 0 !important; border-radius: 0 !important; }
  .md-pane.md-edit, .md-view .md-ph { display: none !important; }
  .md-out pre, .md-out table, .md-out blockquote, .md-out img { break-inside: avoid; }
  .md-out h1, .md-out h2, .md-out h3 { break-after: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}