#volume {
    height: 100px; /* Set the height of the graph */
    width: 100%; /* Full width */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical overflow */
    white-space: nowrap; /* Prevent wrapping of bars */
}
#volume div {
	background-color: #4caf50;
	width: 2px;
	display: inline-block;
}

.button-group {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.button-group button {
    padding: 10px 18px;
    font-size: 1.1em;
    border-radius: 8px;
    border: none;
    color: #23283a;
    background: #f5f5f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
    transition: background 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.button-group button:hover,
.button-group button[data-state="active"] {
    background: #e0e7ff;
    box-shadow: 0 4px 12px rgba(60, 60, 255, 0.08);
}
.button-section {
    margin-bottom: 18px;
    text-align: center;
}

.button-section-title {
    margin-bottom: 6px;
    font-size: 1.08em;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #3b4261;
}

#video-wrapper {
    display: none;
}