/* Offline playground / example hydration */

.CodeEditor.offline-code,
.offline-code {
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 12px 14px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre;
  color: #eceff4;
  background: transparent;
}

.CodeEditor.offline-code code,
.offline-code code {
  white-space: pre;
  font-family: inherit;
  font-size: inherit;
}

.offline-response-note {
  font-size: 12px;
  opacity: 0.7;
  margin: 0 0 8px;
}

.offline-response-example {
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  max-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  color: #eceff4;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.offline-response-example code {
  white-space: pre;
  font-family: inherit;
}