body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(to bottom, #012438, #051d35);
      overflow: hidden;
      font-family: Arial, sans-serif;
      position: relative;
    }

    /* Underwater bubbles background */
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      z-index: 0;
      animation: bubbleFlow 20s linear infinite;
    }

    @keyframes bubbleFlow {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 0 1000px;
      }
    }

    .container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
    }

    .balloon {
      position: absolute;
      width: 150px;
      height: 150px;
      /* Make height equal to width for perfect circle */
      background: radial-gradient(circle at 30% 30%, rgba(0, 59, 101, 0.8), rgba(0, 48, 97, 0.9));
      border-radius: 50%;
      /* Simple 50% for perfect circle */
      box-shadow:
        inset -10px -10px 30px rgba(255, 255, 255, 0.3),
        inset 10px 10px 30px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(0, 200, 255, 0.5);
      transform-origin: center center;
      /* Center the transform origin */
      animation: float 3s ease-in-out infinite;
      z-index: 2;
      border: 2px solid rgba(255, 255, 255, 0.3);
      overflow: hidden;
    }

    /* Water reflection effect */
    .balloon::before {
      content: '';
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 40%;
      background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
      border-radius: 50%;
      filter: blur(5px);
    }

    .balloon::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 30px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 0 0 5px 5px;
      z-index: 1;
    }



    .bubble {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(200, 240, 255, 0.3));
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      animation: rise 4s linear forwards;
      z-index: 3;
      will-change: transform, opacity;
      /* Helps browser optimize animations */
      contain: content;
      /* Limits repaint area */
    }

    .control-panel {
      position: absolute;
      bottom: 20px;
      background: rgba(0, 50, 100, 0.3);
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(5px);
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid rgba(0, 200, 255, 0.3);
      z-index: 10;
    }

    .slider-container {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .slider-label {
      color: white;
      margin-right: 10px;
      width: 120px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    input[type="range"] {
      -webkit-appearance: none;
      width: 200px;
      height: 8px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      outline: none;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: #00b4ff;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 5px rgba(0, 180, 255, 0.8);
    }

    .value-display {
      color: white;
      margin-left: 10px;
      min-width: 40px;
      text-align: right;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    button {
      background: rgba(0, 150, 255, 0.3);
      border: 1px solid rgba(0, 200, 255, 0.3);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: bold;
      margin: 5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    button:hover:not(:disabled) {
      background: rgba(0, 180, 255, 0.5);
      box-shadow: 0 0 10px rgba(0, 180, 255, 0.5);
    }

    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: rgba(100, 100, 100, 0.3);
    }

    .status {
      color: white;
      margin-top: 10px;
      font-size: 14px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .band-display {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 50, 100, 0.3);
      padding: 15px;
      border-radius: 10px;
      backdrop-filter: blur(5px);
      display: flex;
      flex-direction: column;
      color: white;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(0, 200, 255, 0.3);
      z-index: 10;
    }

    .band-row {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }

    .band-label {
      width: 80px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }

    .band-bar-container {
      width: 150px;
      height: 15px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      overflow: hidden;
      margin: 0 10px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .band-bar {
      height: 100%;
      border-radius: 10px;
      transition: width 0.3s;
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
      will-change: width;
      /* Optimizes bar graph animations */
    }

    .delta-bar {
      background: #3498db;
    }

    .theta-bar {
      background: #2ecc71;
    }

    .alpha-bar {
      background: #f1c40f;
    }

    .beta-bar {
      background: #e74c3c;
    }

    .gamma-bar {
      background: #9b59b6;
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      25% {
        transform: translateY(-10px) rotate(2deg);
      }

      50% {
        transform: translateY(-15px) rotate(0deg);
      }

      75% {
        transform: translateY(-10px) rotate(-2deg);
      }
    }

    @keyframes rise {
      0% {
        opacity: 0.7;
        transform: scale(0);
      }

      20% {
        opacity: 0.9;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.2);
      }
    }

    /* Underwater light rays */
    .light-ray {
      position: absolute;
      width: 2px;
      height: 150%;
      background: linear-gradient(to bottom,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent);
      transform: rotate(20deg);
      animation: rayMove 15s linear infinite;
      z-index: 0;
    }

    @keyframes rayMove {
      0% {
        transform: rotate(20deg) translateY(-100%);
      }

      100% {
        transform: rotate(20deg) translateY(100%);
      }
    }