/* Styles for the brain SVG container moved out of inline HTML/JS */
#brain-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optional: ensure embedded SVG scales and centers */
/* When embedding via <object>, style the object and the inner SVG */
#brain-container > object {
  width: 40vw;
  height: 40vh;
  display: block;
  margin: auto;
  position: relative;
  overflow: visible;
  border: none;
  background: transparent;
}

#brain-container > svg,
#brain-container > object svg {
  width: 40vw;
  height: 40vh;
  display: block;
  margin: auto;
  position: relative;
  overflow: visible;
  border: none;
  background: transparent;
  transform: none;
  left: 0;
  top: 0;
  transform-origin: center center;
}

/* Transition for neuron elements inside the SVG; animation will toggle fill/opacity */
#brain-container svg [id*="neuron"],
#brain-container object svg [id*="neuron"] {
  transition: fill 0.2s, opacity 0.2s;
}

/* Presentation for the hidden canvas used by the brain scripts. */
#thought-canvas {
  display: none;
  width: 64px;
  height: 64px;
}