html,body{margin:0;padding:0;height:100%;font-family:PT Sans Caption,sans-serif}body{background-color:#1e4c5b;color:#fff;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:20px;box-sizing:border-box}button{margin:10px;padding:10px 20px;font-size:1rem;cursor:pointer;border:none;border-radius:5px;background-color:#0056b3;color:#fff;transition:background-color .3s ease}button:hover{background-color:#003d80}button.active{background-color:#ff5722}button.start-button{width:100%;margin:0}.bpm-control{margin-top:20px;text-align:center}.bpm-control label{display:block;margin-bottom:10px;font-size:1rem}.bpm-control .bpm-slider-container{display:flex;align-items:center;gap:10px;max-width:400px;margin:0 auto}.bpm-control .bpm-slider-container input[type=range]{flex-grow:1}.bpm-control .bpm-slider-container .bpm-button{width:40px;height:40px;padding:0;font-size:1.2rem;display:flex;align-items:center;justify-content:center;background-color:#0056b3;border:none;border-radius:50%;color:#fff;cursor:pointer;transition:background-color .3s ease}.bpm-control .bpm-slider-container .bpm-button:hover{background-color:#003d80}.bpm-control .bpm-slider-container .bpm-button:active{background-color:#00254d}.time-signature-control{margin-top:20px;text-align:center}.time-signature-control label{display:block;margin-bottom:5px;font-size:1rem}.time-signature-control .time-signature-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.beats-visualization{margin-top:20px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.beats-visualization .beat-circle{width:40px;height:40px;border-radius:50%;background-color:#ccc;transition:background-color .3s ease,opacity .3s ease;box-shadow:inset 0 -2px 6px #000;cursor:pointer}.beats-visualization .beat-circle.active{background-color:#46852e}.beats-visualization .beat-circle.muted{background-color:#a01e1e}.canvas-container{margin-top:40px;display:flex;justify-content:center}.canvas-container canvas{max-width:100%;height:auto}@media (max-width: 768px){body{padding:10px}button{padding:8px 16px;font-size:.9rem}.bpm-control input[type=range]{max-width:100%}.beats-visualization .beat-circle{width:30px;height:30px}.canvas-container{margin-top:20px}.bpm-control .bpm-slider-container{max-width:100%}.bpm-control .bpm-slider-container .bpm-button{width:35px;height:35px;font-size:1rem}}@media (max-width: 480px){button{padding:6px 12px;font-size:.8rem}.beats-visualization .beat-circle{width:25px;height:25px}.bpm-control .bpm-slider-container{gap:5px}.bpm-control .bpm-slider-container .bpm-button{width:30px;height:30px;font-size:.9rem}}