body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #000000; /* Set background to black */
            color: #FFFFFF; /* Set text color to white */
        }
        h1 {
            text-align: center;
            margin-bottom: 40px;
            color: #FFFFFF; /* Set heading color to white */
        }
        .control-group {
            margin-bottom: 25px;
            padding: 20px;
            background-color: #1a1a1a; /* Set control group background to dark gray */
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(255,255,255,0.1); /* White box shadow for depth */
        }
        .control-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 1.1em;
            color: #FFFFFF; /* Set label color to white */
        }
        .controls {
            display: flex;
            align-items: center;
        }
        .controls input[type="range"] {
            margin-right: 15px;
            flex: 1;
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: #555555; /* Slider track color */
            outline: none;
            opacity: 0.9;
            transition: opacity .2s;
        }
        .controls input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #FFFFFF; /* Slider thumb color */
            cursor: pointer;
            border: none;
        }
        .controls input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #FFFFFF; /* Slider thumb color */
            cursor: pointer;
            border: none;
        }
        .radio-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .radio-group label {
            font-weight: normal;
            cursor: pointer;
            color: #FFFFFF; /* Radio button label color */
        }
        .toggle-button {
            display: block;
            width: 100%;
            padding: 15px;
            font-size: 1.2em;
            background-color: #28a745; /* Play button background color (green) */
            color: #ffffff; /* Play button text color */
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .toggle-button.paused {
            background-color: #dc3545; /* Pause button background color (red) */
        }
        .toggle-button:focus {
            outline: none;
        }
        /* Disabled slider styling */
        .controls input[type="range"]:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #333333; /* Disabled slider track color */
        }