body {
    margin: 0; 
    padding: 0; 
    background: #000; 
    font-family: sans-serif;
    color: #fff;
    overflow: hidden;
  }

  /* Container for the p5 canvas, so we can position the bottom sheet on top. */
  #canvasContainer {
    position: fixed;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    z-index: 0;  /* The canvas is behind the bottom sheet. */
  }
.menu-container{
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 1000; /* Above the canvas */
    display: inline-flex;
    gap: .5em;
}
.record-button{
    
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
   
}
.record-button a{
  color: #fff;
}
  .settings-button{
    
   
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
  
  }

  /* Bottom sheet for settings */
  .bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #111;
    border-top: 1px solid #444;
    color: #fff;
    max-height: 60%;       /* Height of the sheet when open */
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    z-index: 999;          /* Above the canvas */
  }
  .bottom-sheet.hidden {
    transform: translateY(100%); /* Slide out of view */
  }

  .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    background: #222;
    cursor: pointer;
  }

  .settings-section {
    padding: 1em;
  }

  button {
    background: #333;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    margin-right: 0.5em;
    cursor: pointer;
  }
  button:hover {
    background: #444;
  }

  input[type="file"] {
    color: #fff;
    background: #333;
    margin-bottom: 0.5em;
    width: 100%;
  }

  input[type="range"] {
    width: 100%;
  }

  .small-label {
    font-size: 0.85em;
    margin-top: 0.5em;
    opacity: 0.8;
  }