.preview-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 640px) {
  .preview-columns {
    grid-template-columns: 1fr;
  }
}

#markdown-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

.preview-pane {
  min-height: 300px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
  overflow-wrap: break-word;
}

.preview-pane pre {
  background: #f0eafc;
  padding: 0.5rem;
  border-radius: 6px;
  overflow-x: auto;
}

.preview-pane code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f0eafc;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

.preview-pane pre code {
  background: none;
  padding: 0;
}