:root { color-scheme: light dark; }

#can {
  width: 700px;
  height: 600px;
  top: 0px;
  left: 0px;
  position: fixed;
}

#turtles {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
}

.block {
  float: left;
  margin: 1px;
  border: 1px solid white;
  background: #fafdff;
}

.dragging {
  z-index: 100;
  pointer-events: none;
}

.hover {
  outline: 1px solid pink;
}

.on-board {
  position: absolute;
  transform: rotate(0deg);
  transform-origin: bottom;
}

.in-shell {
  position: relative;
  top: 0px;
  left: 0px;
  transform: rotate(0deg);
  transform-origin: bottom;
}

#controls {
  /* flex: auto; */
  right: 0px;
  position: absolute;
}

#nests {
  width: 300px;
}

#buttons {
  display: grid;
}
button.active {
  background: #cde;
}

.selected {
  border: 1px solid blue;
}

#editor {
  position: relative;
  display: inline-block;
}
#editor #prog,
#editor #highlight {
  margin: 0;
  padding: 4px;
  border: 1px solid transparent;
  font: 14px/1.4 monospace;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
#editor #prog {
  display: block;
  border-color: #ccc;
  color: transparent;
  caret-color: black;
  background: #fafdff;
  resize: none;
  overflow: auto;
}
#editor #highlight {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  color: #333;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hl-cmd  { color: #0550ae; }
.hl-ctrl { color: #8250df; }
.hl-num  { color: #953800; }
.hl-op   { color: #d63384; }
.hl-sub  { color: #116329; }

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e0e0e0;
  }
  .block {
    border-color: #444;
    background: #2a2a2a;
  }
  .selected {
    border-color: #6af;
  }
  .hover {
    outline-color: #c66;
  }
  #editor #prog {
    background: #2a2a2a;
    border-color: #444;
    caret-color: #e0e0e0;
  }
  #editor #highlight {
    color: #e0e0e0;
  }
  .hl-cmd  { color: #79c0ff; }
  .hl-ctrl { color: #d2a8ff; }
  .hl-num  { color: #ffa657; }
  .hl-op   { color: #f78da7; }
  .hl-sub  { color: #7ee787; }
  button, select {
    background: #333;
    color: #e0e0e0;
    border: 1px solid #555;
  }
  button.active {
    background: #446;
  }
}