*,:after,:before{box-sizing:border-box}*{margin:0}body,html{height:100%;width:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}.selected-item{text-align:center}.controls-container{--highlight-width:auto;--highlight-x-pos:0;display:flex;margin-bottom:20px}.controls{display:inline-flex;justify-content:space-between;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.1);border-radius:10px;max-width:500px;margin:auto;overflow:hidden;position:relative}.controls input{opacity:0;margin:0;top:0;right:0;bottom:0;left:0;position:absolute;width:100%;cursor:pointer;height:100%}.segment{min-width:120px;position:relative;text-align:center;z-index:1}.segment label{cursor:pointer;display:block;font-weight:700;padding:10px;transition:color .5s ease}.segment.active label{color:#fff}.controls:before{content:"";background:#f3344b;border-radius:8px;width:var(--highlight-width);transform:translateX(var(--highlight-x-pos));position:absolute;top:0;bottom:0;left:0;z-index:0}.controls.ready:before{transition:transform .3s ease,width .3s ease}