body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem 2rem;
            background-color: #1a1a1a;
            color: #e0e0e0;
            text-align: center;
        }
        h1 {
            font-weight: 600;
            font-size: 2.5rem;
            margin: 0;
        }
        .subtitle {
            font-weight: 300;
            font-size: 1.2rem;
            color: #ccc;
            margin: 0.25rem 0 0.5rem 0;
        }
        .description {
            font-weight: 400;
            font-size: 1rem;
            color: #bbb;
            max-width: 800px;
            line-height: 1.6;
            margin: 0.5rem 0 1.5rem 0;
        }
        h2 {
            font-weight: 500;
            color: #aaa;
            margin-top: 0;
            margin-bottom: 0;
        }
        #upload-container {
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            border: 2px dashed #444;
            border-radius: 10px;
            background-color: #2a2a2a;
        }
        audio {
            width: 90%;
            max-width: 800px;
            margin-top: 1rem;
        }
        #equalizer-container {
            width: 90%;
            max-width: 800px;
            margin: 2rem 0;
            padding: 1.5rem;
            background-color: #282828;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .eq-header {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 1rem;
        }
        #reset-eq-button, #download-button {
            background: none;
            border: 1px solid #4f8aef;
            color: #4f8aef;
            border-radius: 5px;
            padding: 0.3rem 0.8rem;
            margin-left: 1rem;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.2s, color 0.2s;
        }
        #reset-eq-button:hover, #download-button:hover:not(:disabled) {
            background-color: rgba(79, 138, 239, 0.2);
        }
        #download-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            border-color: #555;
            color: #555;
        }
        #eq-controls-wrapper {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            width: 100%;
            gap: 20px;
        }
        #eq-bands {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 180px;
        }
        .eq-band {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.8rem;
            color: #bbb;
            width: 40px;
        }
        .slider-wrapper {
            position: relative;
            width: 100%;
            height: 150px;
            margin-top: 10px;
        }
        .eq-band input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0;
            transform: translate(-50%, -50%) rotate(-90deg);
            width: 150px;
            height: 20px;
            background: #444;
            border-radius: 5px;
            outline: none;
        }
        .eq-band input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            background: #4f8aef;
            cursor: pointer;
            border-radius: 3px;
            border: 2px solid #282828;
        }
        .visualizer-container {
            display: flex;
            flex-direction: column; 
            width: 90%;
            max-width: 800px;
            gap: 2.5rem;
            margin-top: 1rem;
            margin-bottom: 4rem;
        }
        .visualizer-wrapper, .spectrogram-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
        .spectrogram-inner-wrapper {
            display: flex;
            width: 100%;
            gap: 10px;
        }
        canvas {
            background-color: #222;
            border-radius: 8px;
        }
        #spectrogram-canvas {
            width: calc(100% - 60px);
            height: 300px;
        }
        #spectrogram-legend-canvas {
            width: 50px;
            height: 300px;
        }
        #waveform-canvas, #power-spectrum-canvas {
            width: 100%;
            height: 250px;
        }