.container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 10px;
  padding: 16px;
  background: var(--ifm-background-surface-color);
}

.editorPane {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.screenPane {
  flex: 1 1 45%;
  min-width: 0;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hint {
  font-size: 0.8rem;
  color: var(--ifm-color-emphasis-600);
}

.editor {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}

.console {
  margin-top: 10px;
  height: 110px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  background: var(--ifm-pre-background);
  font-family: var(--ifm-font-family-monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.consoleEmpty {
  color: var(--ifm-color-emphasis-500);
  font-style: italic;
}

.console_warn {
  color: var(--ifm-color-warning-darkest);
}

[data-theme='dark'] .console_warn {
  color: var(--ifm-color-warning-light);
}

.console_error {
  color: var(--ifm-color-danger-dark);
}

[data-theme='dark'] .console_error {
  color: var(--ifm-color-danger-light);
}

.frame {
  display: block;
  width: 100%;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  background: #14161a;
}

/* Reserves the screen's box until the demo scrolls into view, so arriving at
   a guide anchor does not shift the text under the reader. */
.framePlaceholder {
  display: block;
  width: 100%;
  border: 1px dashed var(--ifm-color-emphasis-300);
  border-radius: 6px;
  background: var(--ifm-color-emphasis-100);
}

.shareOk,
.shareError {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.5;
}

.shareOk {
  border: 1px solid var(--ifm-color-success-dark);
  background: var(--ifm-color-success-contrast-background);
  color: var(--ifm-color-success-contrast-foreground);
}

.shareError {
  border: 1px solid var(--ifm-color-danger-dark);
  background: var(--ifm-color-danger-contrast-background);
  color: var(--ifm-color-danger-contrast-foreground);
}

.shareInput {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 6px;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 4px;
  background: var(--ifm-background-color);
  color: var(--ifm-font-color-base);
  font-family: var(--ifm-font-family-monospace);
  font-size: 11px;
}

.screenCaption {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--ifm-color-emphasis-600);
}

.fallback {
  border: 1px dashed var(--ifm-color-emphasis-300);
  border-radius: 10px;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ifm-color-emphasis-600);
}

/* In prose the screen leads and the editor follows: a reader scrolling a
   guide wants to see the result first and only then the code that made it.
   The docs column is also far narrower than the playground's, so side by
   side would squeeze both panes. */
.compact {
  flex-direction: column-reverse;
  padding: 12px;
  margin-bottom: var(--ifm-leading);
}

.compact .editorPane,
.compact .screenPane {
  width: 100%;
  flex: none;
}

.compact .screenPane {
  margin-bottom: 12px;
}

.compact .console {
  height: 72px;
}

@media (max-width: 996px) {
  .container {
    flex-direction: column;
  }

  .editorPane,
  .screenPane {
    width: 100%;
    flex: none;
  }
}