/* html, body { */
/*   margin: 0; */
/*   padding: 0; */
/*   background-color: black; */
/* } */
/* canvas { */
/*   display: block; */
/* } */



html, body {
  height: 100%;
  margin: 0;
  background: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: white;
}

/* Parent container for the two panels */
.layout {
  display: flex;           /* turn this into a flex container */
  min-height: 100vh;       /* fill viewport height */
}

/* Left side: p5.js canvas */
.canvas-area {
  flex: 2;                 /* take 2 parts of available width */
  display: flex;           /* center the canvas if desired */
  align-items: center;
  justify-content: center;
  background: #111;        /* dark backdrop for graphics */
}

/* Container that p5 attaches to */
#p5-container canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Right side: instructions panel */
.instructions {
  flex: 1;                 /* take 1 part of available width */
  padding: 1.5rem;
  /* background: #f7f7f7; */
  background: black;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
  overflow-y: auto;        /* scroll instructions if they get long */
}

/* Responsive: stack vertically on small screens */
@media (max-width: 800px) {
  .layout {
    flex-direction: column;
  }
  .canvas-area, .instructions {
    flex: none;
    width: 100%;
    min-height: auto;
  }
}