/* General Page Styles */
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: #f4f4f4;
      color: #333;
      text-align: center;
    }
    /* Keyboard Styling */
    #keyboard {
      position: relative;
      width: calc(40px * 52); /* 52 white keys */
      height: 200px;
      margin: 20px auto;
      border: 1px solid #ccc;
      background: #fff;
    }
    .white-keys {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .key.white-key {
      width: 40px;
      height: 200px;
      border: 1px solid #000;
      background: #fff;
      box-sizing: border-box;
      cursor: pointer;
    }
    .key.white-key.active {
      background: linear-gradient(to bottom, #000, #555);
    }
    .black-keys {
      position: absolute;
      top: 0;
      left: 0;
      height: 120px;
      width: 100%;
      pointer-events: none;
    }
    .key.black-key {
      width: 25px;
      height: 120px;
      background: #000;
      position: absolute;
      z-index: 1;
      border: 1px solid #333;
      border-radius: 3px;
      cursor: pointer;
      pointer-events: auto;
    }
    .key.black-key.active {
      background: linear-gradient(to bottom, #fff, #ccc);
    }
    /* Top-right floating mute button */
    .muteButton.muteButton--floating {
      position: fixed;
      top: max(10px, env(safe-area-inset-top));
      right: max(10px, env(safe-area-inset-right));
      font-size: 0.75rem;
      padding: 6px 10px;
      border-radius: 6px;
      z-index: 10000;        /* above canvases/overlays */
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
      opacity: 0.85;
      transition: opacity .15s ease, transform .15s ease;
    }
    
    .muteButton.muteButton--floating:hover,
    .muteButton.muteButton--floating:focus {
      opacity: 1;
      transform: translateY(-1px);
    }
    
    /* Keep it tiny on small screens */
    @media (max-width: 640px) {
      .muteButton.muteButton--floating {
        font-size: 0.7rem;
        padding: 4px 8px;
      }
    }
    
    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .muteButton.muteButton--floating {
        transition: none;
      }
    }

    #sustain-light {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: red;
      opacity: 0.3;
      margin: 20px auto;
    }
    #sustain-light.on {
      opacity: 1;
    }
    #button-row {
      display: flex;
      justify-content: center;
    }
    /* Button Container */
    #buttonContainer {
      margin: 2px auto;
      text-align: center;
      font-size: 1.1em;
      display: block;
    }
    /* Button Styling */
    button {
      margin: 10px auto;
      text-align: center;
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      display: block;
    }
    /* Sound Mode Switch */
    #soundModeContainer {
      margin: 20px auto;
      text-align: center;
      font-size: 1.1em;
      display: block;
    }
    /* Controls Card Styling */
    #controls {
      max-width: 900px;
      margin: 20px auto 40px auto;
      background: linear-gradient(45deg, #e3173c 40%, #f07c3a 60%);
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .control-groups {
      display: flex;
      flex-direction: row;
      gap: 20px; /* Adjust spacing between the groups as needed */
    }
    
    .control-group {
      display: flex;
      background: rgb(245, 240, 228);
      border: 1px solid #ddd;
      border-radius: 8px;
      flex-direction: column; /* This stacks items vertically within each group */
      flex: 1; /* Optional: makes each group take equal available width */
    }

    .control-group h2 {
      margin-bottom: 20px;
      text-align: center;
      font-size: 1.4em;
      color: #333;
    }
    .slider-group {
      display: flex;
      flex-direction: column;
    }

    .control-wrapper {
      display: flex;
      padding: 20px;
      flex-direction: column;
      align-items: center;
    }
    
    /* Vertical Slider Styling */
    .vertical-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 150px;
      height: 8px;
      transform: rotate(-90deg);
      margin-bottom: 20px;
    }
    .vertical-slider::-webkit-slider-runnable-track {
      width: 100%;
      height: 8px;
      background: #ccc;
      border: 1px solid #aaa;
      border-radius: 5px;
    }
    .vertical-slider::-moz-range-track {
      width: 100%;
      height: 8px;
      background: #ccc;
      border: 1px solid #aaa;
      border-radius: 5px;
    }
    .vertical-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      background: #666;
      border-radius: 50%;
      cursor: pointer;
      margin-top: -4px;
    }
    .vertical-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      background: #666;
      border-radius: 50%;
      cursor: pointer;
    }
    .slider-label {
      margin-top: 10px;
      font-size: 1em;
      color: #333;
    }
    .knob {
  display: inline-block;
  margin: 10px;
  pointer-events: auto !important; /* Ensures interactivity */
    }

    .knob {
  pointer-events: auto !important;
    }
    .is-hidden { display: none !important; }