#app{font-family:Roboto,sans-serif;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.container{display:flex;align-items:center;justify-content:space-around;gap:30px}@media(orientation:landscape){.container{width:568px;height:320px}}@media(orientation:portrait){.container{width:320px;height:568px;flex-direction:column}}.progress-container{width:200px;height:200px}.input-wrapper{display:flex;align-items:center;gap:20px;height:51px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}#value{padding:4px;height:35px;width:60px;border:2px solid black;border-radius:50px;box-sizing:border-box;text-align:center;justify-content:flex-start;font-size:20px}.checkbox-wrapper{width:200px;display:flex;align-items:center;justify-content:flex-start;gap:20px}.checkbox-wrapper input{height:0;width:0;visibility:hidden}.checkbox-wrapper label{cursor:pointer;width:60px;height:32px;background:#dae6ec;display:block;border-radius:100px;position:relative}.checkbox-wrapper label:after{content:"";position:absolute;top:6%;left:2.5%;width:45%;height:89%;background:#fff;border-radius:90px;transition:.2s}.checkbox-wrapper input:checked+label{background:#005cff}.checkbox-wrapper input:checked+label:after{left:97.5%;transform:translate(-100%)}.checkbox-wrapper label:active:after{width:55%}.progress-ring{aspect-ratio:1;width:200px;height:200px;border-radius:50%;background:conic-gradient(#005cff 0deg 0deg,#eaf0f6 0deg 360deg);position:relative;transition:background .3s ease}.progress-animated{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.inner-circle{aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 20px);height:calc(100% - 20px);background:#fff;border-radius:50%}