:where(css-chart){display:block;width:100%;height:20rem;padding:2rem 1.5rem 2rem 4rem;box-sizing:border-box;contain:strict;overflow:clip}#plot{--delta-x: calc(100cqw / (var(--max-x) - var(--min-x)));--delta-y: calc(100cqh / (var(--min-y) - var(--max-y)));--offset-x: calc(100cqw * var(--min-x) / (var(--max-x) - var(--min-x)));--offset-y: calc(100cqh + 100cqh * var(--min-y) / (var(--max-y) - var(--min-y)));width:100%;height:100%;position:relative;container:css-chart / size}css-line,css-rect,css-point,css-text{position:absolute}css-point{--real-x: calc(var(--x) * var(--delta-x) + var(--offset-x));--real-y: calc(var(--y) * var(--delta-y) + var(--offset-y));inset:var(--real-y) auto auto var(--real-x);width:calc(2 * var(--r));height:calc(2 * var(--r));transform:translate(-50%,-50%)}css-rect{--real-x1: calc(var(--x1) * var(--delta-x) + var(--offset-x));--real-y1: calc(var(--y1) * var(--delta-y) + var(--offset-y));--real-x2: calc(var(--x2, var(--x1)) * var(--delta-x) + var(--offset-x));--real-y2: calc(var(--y2, var(--y1)) * var(--delta-y) + var(--offset-y));width:calc(var(--real-x2) - var(--real-x1));height:calc(var(--real-y2) - var(--real-y1));top:calc((var(--real-y1) + var(--real-y2)) / 2);left:calc((var(--real-x1) + var(--real-x2)) / 2);transform:translate(-50%,-50%)}css-line{--real-x1: calc(var(--x1) * var(--delta-x) + var(--offset-x));--real-y1: calc(var(--y1) * var(--delta-y) + var(--offset-y));--real-x2: calc(var(--x2, var(--x1)) * var(--delta-x) + var(--offset-x));--real-y2: calc(var(--y2, var(--y1)) * var(--delta-y) + var(--offset-y));--length: hypot( var(--real-x2) - var(--real-x1), var(--real-y2) - var(--real-y1) );top:calc((var(--real-y2) + var(--real-y1)) / 2);left:calc((var(--real-x2) + var(--real-x1)) / 2);width:var(--length);height:0;transform:translate(-50%,-50%) rotate(var(--angle));&:not(:defined){display:none}}css-text{--real-x: calc(var(--x) * var(--delta-x) + var(--offset-x));--real-y: calc(var(--y) * var(--delta-y) + var(--offset-y));inset:var(--real-y) auto auto var(--real-x)}table{display:block;width:1px;height:1px;margin:-1px;position:absolute;inset:0 auto auto 0;overflow:clip;opacity:.01}#title{margin:.5rem 0 -.5rem 4rem;font-weight:600;font-size:1.1rem}#x-axis,#y-axis{--label-color: #5a788a;--axis-color: #d0d6db;--guide-color: var(--axis-color);--guide-style: dotted;inset:0;color:var(--label-color);font-size:clamp(.6rem,6vw - .6rem,.9rem);&.guided css-text:after{content:"";position:absolute}}#x-axis{--label-space: .4rem;transform:translateY(100%);border-top:1px solid var(--axis-color);css-text{--x: var(--value);--real-y: var(--label-space);translate:-50% 0;white-space:nowrap}&.guided css-text:after{width:0;height:100cqh;inset:auto auto calc(100% + var(--label-space)) calc(50% - 1px);border-right:1px var(--guide-style) var(--guide-color)}}@container css-chart (width < 40rem){css-chart{padding-bottom:3rem}#x-axis css-text{rotate:18deg}}#y-axis{--label-space: .8rem;transform:translate(-100%);border-right:1px solid var(--axis-color);css-text{--real-x: calc(100% - var(--label-space));--y: var(--value);translate:-100% -50%;white-space:nowrap}&.guided css-text:after{width:100cqw;height:0;inset:50% auto auto calc(100% + var(--label-space));border-bottom:1px var(--guide-style) var(--guide-color)}}#legend{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 2rem;padding:1rem 2rem;margin:0;&:where(:has(li:only-child)){display:none}li{display:flex;align-items:center;gap:.5rem}.shape{background-color:var(--color);width:1rem;height:1rem;box-sizing:border-box;&.disc{border-radius:50%}&.circle{background-color:transparent;border:2px solid var(--color);border-radius:50%}&.line{height:.2rem}&.dotline{width:1.5rem;height:.2rem;position:relative;&:after{content:"";width:.7rem;height:.7rem;position:absolute;inset:50% auto auto 50%;translate:-50% -50%;background-color:inherit;border-radius:50%}}}}