.OpponentSlider-wrapper{--blueChannelGradientOpacity:0;--yellowChannelGradientOpacity:0;--redChannelGradientOpacity:0;--greenChannelGradientOpacity:0;--redGreenHandlePos:0;--blueYellowHandlePos:0;--opponentSwatchColor:#000;--visualsHeight:180px;--borderColor:var(--gray300);flex-direction:row;margin:3em 0;display:flex}.OpponentSlider-wrapper .OppoentSlider-title{font-size:var(--textSize50);font-weight:700}.OpponentSlider-wrapper .OpponentSlider-col-Wave,.OpponentSlider-wrapper .OpponentSlider-col-receptors,.OpponentSlider-wrapper .OpponentSlider-col-channels{flex-direction:column;display:flex}.OpponentSlider-wrapper .OpponentSlider-col-color{flex-direction:column;margin-left:16px;display:flex}.OpponentSlider-wrapper .OpponentSlider-waveform{height:var(--visualsHeight);direction:rtl;width:200px;display:block;overflow:hidden}.OpponentSlider-wrapper .OpponentSlider-waveform .waveformWrap{flex-direction:row;align-items:center;width:fit-content;height:33%;display:flex;right:0}.OpponentSlider-wrapper .OpponentSlider-waveform svg{fill:var(--gray500);display:inline}.OpponentSlider-wrapper .OpponentSlider-cones,.OpponentSlider-wrapper .OpponentSlider-channels{flex-direction:column;display:flex;position:relative}.OpponentSlider-wrapper .OpponentSlider-cones{height:var(--visualsHeight);justify-content:space-evenly}.OpponentSlider-wrapper .OpponentSlider-channels{justify-content:space-between;height:116px;margin-top:46px}.OpponentSlider-wrapper .Cone{border:2px solid var(--borderColor);border-radius:100% 8px 8px 100%;justify-content:center;align-items:center;width:80px;height:32px;margin:0 34px 0 0;display:flex;position:relative}.OpponentSlider-wrapper .OpponentSlider-cones:after{content:" ";background-color:var(--borderColor);width:2px;height:56px;position:absolute;top:35px;right:16px}.OpponentSlider-wrapper .Cone:after{content:" ";background-color:var(--borderColor);height:2px;position:absolute}.OpponentSlider-wrapper .Cone:first-of-type:after,.OpponentSlider-wrapper .Cone:nth-of-type(2):after{width:16px;right:-18px}.OpponentSlider-wrapper .Cone:nth-of-type(3):after{width:34px;right:-36px}.OpponentSlider-wrapper .Cone:first-of-type{background-color:rgba(255, 0, 0, var(--LConeAlpha))}.OpponentSlider-wrapper .Cone:nth-of-type(2){background-color:rgba(0, 255, 0, var(--MConeAlpha))}.OpponentSlider-wrapper .Cone:nth-of-type(3){background-color:rgba(0, 0, 255, var(--SConeAlpha))}.OpponentSlider-wrapper .ChannelSlider{border:2px solid var(--borderColor);background:#000;border-radius:8px;width:140px;height:32px;position:relative}.OpponentSlider-wrapper .ChannelSlider:before{content:" ";border-radius:6px;width:100%;height:100%;position:absolute}.OpponentSlider-wrapper .ChannelSlider:nth-of-type(2):before{background:linear-gradient(90deg, rgba(0, 0, 255, var(--blueChannelGradientOpacity)) 0%, #00f0 100%), linear-gradient(90deg, #ff00, rgba(255, 255, 0, var(--yellowChannelGradientOpacity)))}.OpponentSlider-wrapper .ChannelSlider:first-of-type:before{background:linear-gradient(90deg, rgba(0, 255, 0, var(--greenChannelGradientOpacity)) 0%, #0f00 100%), linear-gradient(90deg, #f000, rgba(255, 0, 0, var(--redChannelGradientOpacity)))}.OpponentSlider-wrapper .ChannelSlider:after{content:" ";background-color:var(--borderColor);position:absolute}.OpponentSlider-wrapper .ChannelSlider:first-of-type:after{width:16px;height:2px;top:calc(50% - 2px);left:-18px}.OpponentSlider-wrapper .ChannelSlider:nth-of-type(2):after{width:2px;height:44px;top:-46px;left:calc(50% - 2px)}.OpponentSlider-wrapper .ChannelSlider-handle{border:2px solid #fff;border-radius:16px;width:20px;height:20px;position:absolute;top:4px;box-shadow:0 0 0 2px #0000004d,inset 0 0 0 2px #0000004d}.OpponentSlider-wrapper .ChannelSlider-handle#redGreenHandle{left:var(--redGreenHandlePos)}.OpponentSlider-wrapper .ChannelSlider-handle#blueYellowHandle{left:var(--blueYellowHandlePos)}.OpponentSlider-wrapper #opponentColorSwatch{opacity:1;background:var(--opponentSwatchColor);border-radius:100%;width:140px;height:140px;margin-top:32px;display:block;position:relative}.OpponentSlider-wrapper #opponentColorSwatch:after{content:" ";background-color:var(--borderColor);width:88px;height:2px;position:absolute;top:70px;left:-88px}
