html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: #050505;
  color: #8cff8c;

  font-family: monospace;
}

#bootRoot,
#runtimeRoot {
  position: absolute;
  inset: 0;
}

.runtime-topology {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  padding: 16px;
  box-sizing: border-box;

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.active-topology {
  opacity: 1;
  pointer-events: auto;
}

.detaching-topology {
  opacity: 0.45;
}

.detached-topology {
  opacity: 0.16;
  pointer-events: none;
  transform: scale(0.995);
}

.archived-topology {
  opacity: 0.08;
  pointer-events: none;
  filter: grayscale(1);
}

.projection-block {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
}

.history-surface {
  flex: 1;
  overflow-y: auto;
  white-space: pre-wrap;

  padding-bottom: 10px;
}

.input-surface {
  display: flex;
  align-items: center;
  gap: 10px;
}

.input-surface input {
  flex: 1;

  background: transparent;
  border: none;
  outline: none;

  color: #8cff8c;
  font-family: monospace;
  font-size: 14px;
}

.cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}