body{font-family:Arial,sans-serif;background-color:#121212;color:#FFFFFF;margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh}.container{flex:1;padding:20px;text-align:center}#music-container,#creation-container{border:1px solid red;padding:20px;background-color:#1E1E1E;border-radius:8px;margin-bottom:20px;position:relative;box-shadow:0 0 10px rgba(255,0,0,0.5)}.controls{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}button{background-color:darkred;color:#FFFFFF;border:none;padding:10px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;border-radius:4px;transition:background-color 0.3s ease}button:hover{background-color:red}select{padding:5px 10px;border:1px solid red;border-radius:4px;background-color:#333333;color:#FFFFFF}input[type="range"]{width:150px}#creation-container svg,#music-container svg{stroke:#FFFFFF !important;fill:#FFFFFF !important}#creation-container svg text,#music-container svg text{fill:#FFFFFF !important}svg{max-width:100%;height:auto}.note-input-section{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.note-input-section select,.note-input-section button{min-width:100px}[data-theme="light"] body{background-color:#f0f5fa;color:#1f2937}[data-theme="light"] h1,[data-theme="light"] h2,[data-theme="light"] h3{color:#1f2937!important}[data-theme="light"] input,[data-theme="light"] select,[data-theme="light"] textarea,[data-theme="light"] button{background-color:#ffffff;color:#1f2937;border:1px solid #d1d5db}[data-theme="light"] button{background-color:#2563eb;color:#fff}[data-theme="light"] button:hover{background-color:#1d4ed8}