* {
  margin: 0;
  padding: 0;
}

iframe {
  border: none;
}

.cm-editor {
  background: #f1ede5;
  color: #000;
  width: var(--split);
  height: calc(100% - 3rem);
  position: absolute !important;
  left: 0;
  top: 3rem;
}
.cm-scroller {
  min-height: 100%;
  overflow: auto;
}
.html-pane {
  background: #fff;
  position: absolute;
  left: var(--split);
  top: 0;
  height: 100%;
  width: calc(100% - var(--split));
}
.rp-codebooth {
  height: 100%;
  width: 100%;
  --split: 50%;
}
.rp-codebooth button {
  border: 0 none transparent;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  font-family: "Alegreya", serif;
  font-size: 1.5rem;
  height: 3rem;
  position: fixed;
  top: 0;
  width: calc(var(--split) / 4);
  z-index: 1000;
}
.active-replay .code-playground,
.active-playground .code-replay {
  opacity: 0;
  pointer-events: none;
}
.button-replay,
.button-playground {
  background-color: #444;
  color: #666;
}
.button-replay:active,
.button-playground:active {
  background-color: #8c1352;
  color: #ccc;
}
.active-replay .button-replay,
.active-playground .button-playground {
  background-color: #e12486;
}
.button-playground {
  left: calc(var(--split) / 4);
}
.button-copy {
  background-color: #1a69b5;
  left: calc(var(--split) * 2 / 4);
}
.button-copy:active {
  background-color: #16599a;
}
.button-run {
  background-color: #18a85e;
  left: calc(var(--split) * 3 / 4);
}
.button-run:active {
  background-color: #148f50;
}
.ui-resizable {
  position: relative;
}
.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 200;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}
.ui-resizable-ew {
  cursor: ew-resize;
  width: 7px;
  left: var(--split);
  top: 0;
  height: calc(var(--rp-height) - var(--rp-controls-height));
}
.dragging > iframe {
  pointer-events: none;
}