@container css-chart (40rem <= width) and (width < 70rem){#x-axis css-text:nth-child(odd){display:none}}@container css-chart (width < 40rem){#x-axis css-text:not(:nth-child(4n)){display:none}#x-axis css-text{rotate:0deg}}.bar{--x1: calc(var(--offset) - .5);--y1: var(--max-y);--x2: calc(var(--offset) + .5);--y2: var(--min-y);&:nth-child(4n+1),&:nth-child(4n+2){background-color:#004d9106}.top,.median,.bottom{--x: .5;--r: .5rem}.connector{--x1: .5;--y1: var(--top);--x2: .5;--y2: var(--bottom);width:.4rem;background:linear-gradient(var(--top-color) 0%,white calc((var(--top) - var(--median)) / (var(--top) - var(--bottom)) * 100%),var(--bottom-color) 100%)}.top{--y: var(--top);background-color:var(--top-color)}.median{--y: var(--median);--r: .25rem;background-color:#fff;border:2px solid var(--median-color);border-radius:50%}.bottom{--y: var(--bottom);background-color:var(--bottom-color)}.top-label,.bottom-label{--x: .5;color:#12324b;opacity:0;transition:opacity .2s,translate .2s}.top-label{--y: var(--top);translate:-50% calc(-100% - .2rem)}.bottom-label{--y: var(--bottom);translate:-50% .2rem}&:hover{.top-label,.bottom-label{opacity:1}.top-label{translate:-50% calc(-100% - .6rem)}.bottom-label{translate:-50% .6rem}}}