dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
}

.fancy-grid {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(15, 23, 42, 0.12) 1px,
    transparent 0
  );
  background-size: 20px 20px;
}

.editor-field {
  width: 100%;
  height: 70vh;
  resize: vertical;
  border: 1px solid rgb(226 232 240 / 1);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 14px;
  line-height: 1.7;
  background: white;
  color: #1e293b;
  outline: none;
}

.editor-field:focus {
  box-shadow: 0 0 0 2px rgb(125 211 252 / 0.8);
}

.preview-panel {
  min-height: 70vh;
  border: 1px solid rgb(226 232 240 / 1);
  border-radius: 1rem;
  background: white;
  padding: 1rem 1.25rem;
  overflow: auto;
}

.preview-editor-field {
  height: 70vh;
}

.preview-panel-compact {
  min-height: 70vh;
  max-height: 70vh;
}