html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  display: grid;
  grid-template: "player editor";
  grid-template-columns: 1fr 1fr;
}

twisty-player {
  grid-area: player;
  width: 100%;
  height: 100%;
}

twisty-alg-editor {
  grid-area: editor;
  width: 100%;
  height: 100%;
}

/* Vertical Layout */
@media (max-width: 640px) and (min-height: 640px), (orientation: portrait) {
  body {
    grid-template: "player" "editor";
    grid-template-rows: 1fr 1fr;
  }

  twisty-player {
    border-top: 1px solid rgba(0, 0, 0, 0.25);
  }
}