.progress-bar-container{position:relative;margin:0 auto;margin-top:10px;margin-bottom:30px;width:300px;height:300px}.progress-bar-container svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-circle{fill:none;stroke-width:12;stroke:url(#gradient)}.progress-arc{fill:none;stroke-width:12;stroke:#fff;stroke-linecap:round;stroke-dasharray:471.24;stroke-dashoffset:471.24;transition:stroke-dashoffset 0.5s ease,stroke 0.3s ease}#progress-text{font-size:18px;color:#fff;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.toggle-container{display:flex;justify-content:center;margin-bottom:20px}.toggle-container-footer{display:flex;justify-content:center;align-items:center}.toggle-group{display:inline-flex;background-color:#757575;border-radius:30px;overflow:hidden;box-shadow:none}.toggle-group input[type="radio"]{display:none}.toggle-group label{padding:6px 15px;cursor:pointer;color:#fff;background-color:#757575;transition:background 0.3s ease;font-size:16px}.toggle-group input[type="radio"]:checked+label{background:linear-gradient(135deg,#49c8f3,#7377fb)}@media (max-width:768px){.player-container{width:90%;padding:20px;margin-left:auto;margin-right:auto}.progress-bar-container{width:200px;height:200px}.toggle-container button{font-size:16px;padding:10px 20px}}@media (max-width:500px){.player-container{width:100%;padding:1px}.toggle-group label{padding:10px 15px;font-size:14px}}