forked from ffoodd/chaarts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chaarts.min.css
1 lines (1 loc) · 37.8 KB
/
chaarts.min.css
1
@property --integer{syntax:"<integer>";initial-value:0;inherits:false}table{border-collapse:collapse;caption-side:top;font-feature-settings:"tnum";margin-bottom:1.5rem;width:100%;vertical-align:top}table>caption:first-child{font-style:italic;margin:0;padding:2.5rem 1rem}td,th{padding:.5rem .75rem;text-align:left}table strong,th{color:#000}td{line-height:1.25;max-width:100%}tbody{border:1px solid #696969}thead{border:1px solid #000}.table-container{background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 0 100%,radial-gradient(farthest-side at 0% 50%,rgba(0,0,0,.2),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) 0 100%;background-repeat:no-repeat;background-color:#fff;background-size:2.5rem 100%,2.5rem 100%,1rem 100%,1rem 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;margin:2rem 0;max-width:100%;overflow-x:auto;overflow-y:hidden}.table-container .fieldset{display:none!important;padding:0 1rem}[class*=chaarts] [role=presentation]{display:none}[class*=chaarts] abbr[title]{border-bottom:0;font-size:small;font-weight:400;text-transform:none}.chaarts{caption-side:bottom;empty-cells:hide;margin:1.5em auto;overflow:hidden;padding:1em;--checkers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23ffffff99'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");--hexagons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='24' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff99' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--triangles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff99'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffffff99'%3E%3Cpath d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--stripes: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff99' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");--dots: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff99' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E")}.chaarts>caption:first-child{background:inherit;font-style:normal;padding:1rem 0}table:not(.chaarts) .sr-only{clip:auto!important;-webkit-clip-path:none!important;clip-path:none!important;height:auto!important;overflow:visible!important;position:static!important;width:auto!important;white-space:normal!important}@media screen and (min-width:30em){.chaarts{border-collapse:separate;contain:content}.chaarts:not([class*=radar]){border-spacing:0}.chaarts td,.chaarts th{border:0;padding:0}.chaarts td:empty,.chaarts th:empty{display:none!important}@supports (grid-template-columns:repeat(var(--scale, 100),minmax(0,1fr))){.bar-container .fieldset{display:flex!important}.chaarts.bar caption{text-align:initial;text-indent:13.5rem}.chaarts.bar tr{display:grid;grid-auto-rows:1fr;grid-row-gap:.5rem;grid-template-columns:minmax(-webkit-min-content,12.5em) repeat(var(--scale, 100),minmax(0,1fr)) 10ch;grid-template-columns:minmax(min-content,12.5em) repeat(var(--scale, 100),minmax(0,1fr)) 10ch;transition:opacity .2s cubic-bezier(.5,0,.5,1)}.chaarts.bar tr:nth-child(n+1){--background: var(--checkers)}.chaarts.bar tr:nth-child(2n+2){--background: var(--hexagons)}.chaarts.bar tr:nth-child(3n+3){--background: var(--triangles)}.chaarts.bar tr:nth-child(4n+4){--background: var(--zig)}.chaarts.bar tr:nth-child(5n+5){--background: var(--stripes)}.chaarts.bar tr:nth-child(6n+6){--background: var(--dots)}.chaarts.bar th{grid-column:1/1;margin:.5rem 0 0;padding:0 1rem 0 0;text-align:right}.chaarts.bar td{--size: calc(var(--scale, 100) * 100%);--position: calc(var(--value, 0) / var(--scale, 100) * 100%);background:linear-gradient(to right,#01ac49,#444,mediumblue,rebeccapurple,crimson) var(--position) 0%/var(--size) 100%,var(--background) center/contain;background-blend-mode:hard-light;grid-column:2/var(--value, 0);margin:.5rem 0 0;position:relative}.chaarts.bar span{background:inherit;-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700;left:100%;line-height:1.5;position:absolute}.chaarts.bar:hover tr{opacity:.5}.chaarts.bar:hover tr:hover{opacity:1}@media screen and (min-width:30em)and (-ms-high-contrast:active){.chaarts.bar td{background-image:linear-gradient(to right,Window,ButtonFace,ButtonShadow,ButtonText,highlight),var(--background)}}.chaarts.bar.waterfall tr:nth-of-type(1) td{grid-column:var(--0, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(2) td{grid-column:var(--1, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(3) td{grid-column:var(--2, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(4) td{grid-column:var(--3, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(5) td{grid-column:var(--4, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(6) td{grid-column:var(--5, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(7) td{grid-column:var(--6, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(8) td{grid-column:var(--7, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(9) td{grid-column:var(--8, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(10) td{grid-column:var(--9, 2)/var(--value, 2)}.chaarts.bar.waterfall tr:nth-of-type(11) td{grid-column:var(--10, 2)/var(--value, 2)}}@supports ((-webkit-clip-path:polygon(50% calc(50% + (var(--gt-25, 0))))) or (clip-path:polygon(50% calc(50% + (var(--gt-25, 0)))))){.pie-container .fieldset{display:flex!important;margin-bottom:0}.chaarts.pie{--radius: 32em;margin:0 auto;padding-top:calc(var(--radius) - 2rem);position:relative}.chaarts.pie tbody{display:table-row}.chaarts.pie tr{display:table-cell;transition:opacity .3s cubic-bezier(.5,0,.5,1)}.chaarts.pie [scope=row]{padding-right:.5rem}.chaarts.pie [scope=row]::before,.chaarts.pie td::before{background:var(--color, currentColor) var(--background);content:""}.chaarts.pie [scope=row]::before{display:inline-block;height:1rem;transform:translate3d(-.2rem,.1rem,0);width:1rem}.chaarts.pie td{--position: calc(var(--start, 0) * .01turn)}.chaarts.pie td::after,.chaarts.pie td::before{left:50%;position:absolute;top:calc(var(--radius)/2);transform-origin:center center}.chaarts.pie td::before{--zoom: .75;--part: calc( var(--value) * 3.6 );--main-angle: calc( var(--part) - ( 90 * ( var(--gt-25, 0) + var(--gt-50, 0) + var(--gt-75, 0) ) ) );--β: calc( var(--main-angle) * 0.01745329251 );--α: calc( ( 90 - var(--main-angle) ) * 0.01745329251 );--sin-term-β-1: var(--β);--sin-term-β-2: calc((var(--β) * var(--β) * var(--β)) / 6);--sin-term-β-3: calc((var(--β) * var(--β) * var(--β) * var(--β) * var(--β)) / 120);--sin-term-β-4: calc((var(--β) * var(--β) * var(--β) * var(--β) * var(--β) * var(--β) * var(--β)) / 5040);--sin-term-β-5: calc((var(--β) * var(--β) * var(--β) * var(--β) * var(--β) * var(--β) * var(--β) * var(--β) * var(--β)) / 362880);--sin-β: calc(var(--sin-term-β-1) - var(--sin-term-β-2) + var(--sin-term-β-3) - var(--sin-term-β-4) + var(--sin-term-β-5));--sin-term-α-1: var(--α);--sin-term-α-2: calc((var(--α) * var(--α) * var(--α)) / 6);--sin-term-α-3: calc((var(--α) * var(--α) * var(--α) * var(--α) * var(--α)) / 120);--sin-term-α-4: calc((var(--α) * var(--α) * var(--α) * var(--α) * var(--α) * var(--α) * var(--α)) / 5040);--sin-term-α-5: calc((var(--α) * var(--α) * var(--α) * var(--α) * var(--α) * var(--α) * var(--α) * var(--α) * var(--α)) / 362880);--sin-α: calc(var(--sin-term-α-1) - var(--sin-term-α-2) + var(--sin-term-α-3) - var(--sin-term-α-4) + var(--sin-term-α-5));--pos-B: calc( var(--sin-β) * 50 );--pos-A: calc( var(--sin-α) * 50 );--polygon: polygon( 50% 50%, 50% 0%, 100% 0%, calc( 50% + ( var(--pos-B) * 1% * var(--lt-25, 1) ) + ( var(--gt-25, 0) * 50% ) ) calc( 50% - ( var(--pos-A) * 1% * var(--lt-25, 1) ) ), calc( 50% + ( var(--gt-25, 0) * 50% ) ) calc( 50% + ( var(--gt-25, 0) * 50% ) ), calc( 50% + ( var(--pos-A) * 1% * var(--lt-50, 1) ) + ( var(--gt-50, 0) * 50% ) ) calc( 50% + ( var(--pos-B) * 1% * var(--lt-50, 1) ) + ( var(--gt-50, 0) * 50% ) ), calc( 50% - ( var(--gt-50, 0) * 50% ) ) calc( 50% + ( var(--gt-50, 0) * 50% ) ), calc( 50% - ( var(--pos-B) * 1% * var(--lt-75, 1) ) - ( var(--gt-75, 0) * 50% ) ) calc( 50% + ( var(--pos-A) * 1% * var(--lt-75, 1) ) ), calc( 50% - ( var(--gt-75, 0) * 50% ) ) calc( 50% - ( var(--gt-75, 0) * 50% ) ), calc( 50% - ( var(--pos-A) * 1% * var(--gt-75, 0) ) ) calc( 50% - ( var(--pos-B) * 1% * var(--gt-75, 0) ) ), 50% 50% );-webkit-clip-path:var(--polygon);clip-path:var(--polygon);height:var(--radius);--mask: radial-gradient( circle at center, #fff 0%, #fff calc(var(--radius) / 2), transparent 0 );-webkit-mask-image:var(--mask);mask-image:var(--mask);transform:translate3d(-50%,-50%,0) rotate(var(--position)) scale(var(--zoom));transition:transform .2s cubic-bezier(.5,0,.5,1);width:var(--radius)}.chaarts.pie tr:hover td::before{--zoom: .8}.chaarts.pie tr:nth-child(n+1){--background: var(--checkers)}.chaarts.pie tr:nth-child(2n+2){--background: var(--hexagons)}.chaarts.pie tr:nth-child(3n+3){--background: var(--triangles)}.chaarts.pie tr:nth-child(4n+4){--background: var(--zig)}.chaarts.pie tr:nth-child(5n+5){--background: var(--stripes)}.chaarts.pie tr:nth-child(6n+6){--background: var(--dots)}.chaarts.pie td::after{--arrow: calc(100% - 0.25rem);--axis: calc( var(--position) - .25turn + var(--value) * .005turn );--away: calc( var(--radius) / 2 - 1rem );--integer: calc(var(--value));background-color:#444;color:#fff;content:var(--term) " : " counter(value) " %";counter-reset:value var(--integer);opacity:0;padding:.5rem;pointer-events:none;transform-origin:50% calc(100% + 10px);transform:translate3d(-50%,-50%,0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis)*-1)) perspective(1000px) rotate3d(1,0,0,45deg);transition:opacity .2s cubic-bezier(0,.5,.5,1),transform .2s cubic-bezier(0,.5,.5,1)}.chaarts.pie tbody:hover tr{opacity:.5}.chaarts.pie tbody:hover tr:hover{opacity:1}.chaarts.pie tbody:hover tr:hover td::after{opacity:1;transform:translate3d(-50%,-50%,0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis)*-1)) perspective(1000px) rotate3d(1,0,0,0deg);transition:opacity .2s cubic-bezier(.5,0,1,.5),transform .2s cubic-bezier(.5,0,1,.5)}.chaarts.polar td::before{--zoom: 50;transform:translate3d(-50%,-50%,0) rotate(var(--position)) scale(calc((var(--zoom) + (var(--value)/(100/var(--zoom))))/100))}.chaarts.polar tr:hover td::before{--zoom: 50}.chaarts.donut{--mask: radial-gradient( circle at 50% calc(50% - 0.25rem), transparent 0%, transparent var(--offset), #fff calc(var(--offset) + 1px), #fff 100% );-webkit-mask-image:var(--mask);mask-image:var(--mask)}.chaarts.donut td::after{--away: calc( var(--radius) / 2 - 2.5rem )}@media screen and (min-width:30em)and (-ms-high-contrast:active){.chaarts.pie tbody tr ::before{background-color:Window}.chaarts.pie tbody tr:nth-of-type(odd) ::before{background-color:WindowText}}}@supports ((-webkit-clip-path:polygon(0% calc(100% - (var(--1) * 100% / var(--y))))) or (clip-path:polygon(0% calc(100% - (var(--1) * 100% / var(--y)))))){.line-container .fieldset{display:flex!important}.chaarts.line{--offset: calc( ( 100% / var(--x) ) / 2 );--height: calc( 32em - 2rem );--bottom: calc( 100% - var(--height) );padding:var(--height) 0 1rem;position:relative;transition:background .3s cubic-bezier(.5,0,.5,1),color .3s cubic-bezier(.5,0,.5,1)}.chaarts.line::after{--scale: calc( ( 100% - (var(--y) * 1px) ) / var(--y) );background:repeating-linear-gradient(to bottom,white,white var(--scale),rgba(0,0,0,.25) calc(var(--scale) + 1px));bottom:var(--bottom);top:0;width:100%;z-index:1}.chaarts.line tr::before,.chaarts.line::after{content:"";position:absolute}.chaarts.line [scope=row],.chaarts.line thead th:first-child{color:var(--color, currentColor);text-align:left}.chaarts.line [style]::before{bottom:var(--bottom);background:linear-gradient(to top,#00bfff,#dc143c 75%);--polygon: polygon( 0% 100%, calc((100% / var(--x) * 1)) 100%, calc((100% / var(--x) * 1)) calc(100% - (var(--1) / var(--y) * 100%)), calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)), calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)), calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)), calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)), calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)), calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)), calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)), calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)), calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)), calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)), calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)), calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 100% calc(100% - (var(--12) / var(--y) * 100%)), 100% 100%, 0% 100% );-webkit-clip-path:var(--polygon);clip-path:var(--polygon);content:"";position:absolute;top:0;width:100%;z-index:2}.chaarts.line td,.chaarts.line th{background:#fff;font-weight:700;text-align:center;width:calc(100%/var(--x))}.chaarts.line [scope=col]:not(:first-child)::after{background:#fff var(--stripes);background-blend-mode:exclusion;bottom:4rem;content:"";height:calc(100% - 4rem);left:calc(100%/var(--x)*var(--index));mix-blend-mode:soft-light;opacity:0;position:absolute;transition:opacity .3s cubic-bezier(.5,0,.5,1);width:inherit;z-index:3}.chaarts.line [scope=col]:nth-child(2)::after{--index: 1}.chaarts.line [scope=col]:nth-child(3)::after{--index: 2}.chaarts.line [scope=col]:nth-child(4)::after{--index: 3}.chaarts.line [scope=col]:nth-child(5)::after{--index: 4}.chaarts.line [scope=col]:nth-child(6)::after{--index: 5}.chaarts.line [scope=col]:nth-child(7)::after{--index: 6}.chaarts.line [scope=col]:nth-child(8)::after{--index: 7}.chaarts.line [scope=col]:nth-child(9)::after{--index: 8}.chaarts.line [scope=col]:nth-child(10)::after{--index: 9}.chaarts.line [scope=col]:nth-child(11)::after{--index: 10}.chaarts.line [scope=col]:nth-child(12)::after{--index: 11}.chaarts.line [scope=col]:nth-child(13)::after{--index: 12}.chaarts.line [scope=col]:hover::after{opacity:.75}.chaarts.line td{--value: var(--1);--term: var(--t-1);line-height:1.5}.chaarts.line td::before{content:"";height:1.5rem;position:absolute;transform:translateX(-50%);width:inherit;z-index:10}.chaarts.line td::after{--arrow: calc(100% - 0.25rem);--top: calc( var(--height) - ( var(--value) / var(--y) * var(--height) ) );--polygon: polygon( 0% 0%, 100% 0%, 100% var(--arrow), calc(50% - 0.25rem) var(--arrow), 50% 100%, calc(50% + 0.25rem) var(--arrow), 0% var(--arrow) );--integer: calc(var(--value));background-color:#444;-webkit-clip-path:var(--polygon);clip-path:var(--polygon);color:#fff;content:var(--term) " " var(--year) "\a" counter(value) " °C";counter-reset:value var(--integer);opacity:0;padding:.5rem;left:calc(var(--offset)*3);pointer-events:none;position:absolute;top:var(--top, 0);transform-origin:50% calc(100% + 10px);transform:translate3d(-50%,-125%,0) perspective(1000px) rotate3d(1,0,0,45deg);transition:opacity .2s cubic-bezier(0,.5,.5,1),transform .2s cubic-bezier(0,.5,.5,1);white-space:pre;z-index:5}.chaarts.line td+td::after,.chaarts.points [style] td+td::before{left:calc((100%/var(--x)*var(--index)) + var(--offset))}.chaarts.line td:nth-child(2)::after{--value: var(--1);--term: var(--t-1);--index: 1}.chaarts.line td:nth-child(3)::after{--value: var(--2);--term: var(--t-2);--index: 2}.chaarts.line td:nth-child(4)::after{--value: var(--3);--term: var(--t-3);--index: 3}.chaarts.line td:nth-child(5)::after{--value: var(--4);--term: var(--t-4);--index: 4}.chaarts.line td:nth-child(6)::after{--value: var(--5);--term: var(--t-5);--index: 5}.chaarts.line td:nth-child(7)::after{--value: var(--6);--term: var(--t-6);--index: 6}.chaarts.line td:nth-child(8)::after{--value: var(--7);--term: var(--t-7);--index: 7}.chaarts.line td:nth-child(9)::after{--value: var(--8);--term: var(--t-8);--index: 8}.chaarts.line td:nth-child(10)::after{--value: var(--9);--term: var(--t-9);--index: 9}.chaarts.line td:nth-child(11)::after{--value: var(--10);--term: var(--t-10);--index: 10}.chaarts.line td:nth-child(12)::after{--value: var(--11);--term: var(--t-11);--index: 11}.chaarts.line td:nth-child(13)::after{--value: var(--12);--term: var(--t-12);--index: 12}.chaarts.line td:hover::after{opacity:1;transform:translate3d(-50%,-125%,0) perspective(1000px) rotate3d(1,0,0,0deg);transition:opacity .2s cubic-bezier(.5,0,1,.5),transform .2s cubic-bezier(.5,0,1,.5)}.chaarts.points [style]::before{background:var(--color, currentColor) var(--background);--polygon: polygon( calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)), calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)), calc((100% / var(--x) * 3) + var(--offset)) calc(100% - (var(--3) / var(--y) * 100%)), calc((100% / var(--x) * 4) + var(--offset)) calc(100% - (var(--4) / var(--y) * 100%)), calc((100% / var(--x) * 5) + var(--offset)) calc(100% - (var(--5) / var(--y) * 100%)), calc((100% / var(--x) * 6) + var(--offset)) calc(100% - (var(--6) / var(--y) * 100%)), calc((100% / var(--x) * 7) + var(--offset)) calc(100% - (var(--7) / var(--y) * 100%)), calc((100% / var(--x) * 8) + var(--offset)) calc(100% - (var(--8) / var(--y) * 100%)), calc((100% / var(--x) * 9) + var(--offset)) calc(100% - (var(--9) / var(--y) * 100%)), calc((100% / var(--x) * 10) + var(--offset)) calc(100% - (var(--10) / var(--y) * 100%)), calc((100% / var(--x) * 11) + var(--offset)) calc(100% - (var(--11) / var(--y) * 100%)), calc((100% / var(--x) * 12) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), calc((100% / var(--x) * 13) + var(--offset)) calc(100% - (var(--12) / var(--y) * 100%)), 100% calc(100% - (var(--12) / var(--y) * 100%)), 100% calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)), calc((100% / var(--x) * 13) + var(--offset)) calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)), calc((100% / var(--x) * 12) + var(--offset)) calc((100% + 0.25rem) - (var(--12) / var(--y) * 100%)), calc((100% / var(--x) * 11) + var(--offset)) calc((100% + 0.25rem) - (var(--11) / var(--y) * 100%)), calc((100% / var(--x) * 10) + var(--offset)) calc((100% + 0.25rem) - (var(--10) / var(--y) * 100%)), calc((100% / var(--x) * 9) + var(--offset)) calc((100% + 0.25rem) - (var(--9) / var(--y) * 100%)), calc((100% / var(--x) * 8) + var(--offset)) calc((100% + 0.25rem) - (var(--8) / var(--y) * 100%)), calc((100% / var(--x) * 7) + var(--offset)) calc((100% + 0.25rem) - (var(--7) / var(--y) * 100%)), calc((100% / var(--x) * 6) + var(--offset)) calc((100% + 0.25rem) - (var(--6) / var(--y) * 100%)), calc((100% / var(--x) * 5) + var(--offset)) calc((100% + 0.25rem) - (var(--5) / var(--y) * 100%)), calc((100% / var(--x) * 4) + var(--offset)) calc((100% + 0.25rem) - (var(--4) / var(--y) * 100%)), calc((100% / var(--x) * 3) + var(--offset)) calc((100% + 0.25rem) - (var(--3) / var(--y) * 100%)), calc((100% / var(--x) * 2) + var(--offset)) calc((100% + 0.25rem) - (var(--2) / var(--y) * 100%)), calc((100% / var(--x) * 1) + var(--offset)) calc((100% + 0.25rem) - (var(--1) / var(--y) * 100%)) );transition:opacity .3s cubic-bezier(.5,0,.5,1)}.chaarts.points [style] th::before{background:var(--color, currentColor) var(--background);content:"";display:inline-block;height:1rem;transform:translate3d(-.2rem,.1rem,0);width:1rem}.chaarts.points [style] td::before{--size: 1rem;--top: calc( var(--height) - ( var(--value) / var(--y) * var(--height) ) );background:var(--color, currentColor) var(--background);border:2px solid #fff;border-radius:50%;box-shadow:0 0 .25rem rgba(0,0,0,.5);content:"";height:var(--size);left:calc(var(--offset)*3);position:absolute;top:var(--top, 100);transform:translate3d(calc(var(--size)/-2),calc(var(--size)/-2),0);transition:opacity .3s cubic-bezier(.5,0,.5,1),transform .3s cubic-bezier(.5,0,.5,1);width:var(--size);z-index:4}.chaarts.points [style] td:nth-of-type(2)::before{--value: var(--2);--index: 2}.chaarts.points [style] td:nth-of-type(3)::before{--value: var(--3);--index: 3}.chaarts.points [style] td:nth-of-type(4)::before{--value: var(--4);--index: 4}.chaarts.points [style] td:nth-of-type(5)::before{--value: var(--5);--index: 5}.chaarts.points [style] td:nth-of-type(6)::before{--value: var(--6);--index: 6}.chaarts.points [style] td:nth-of-type(7)::before{--value: var(--7);--index: 7}.chaarts.points [style] td:nth-of-type(8)::before{--value: var(--8);--index: 8}.chaarts.points [style] td:nth-of-type(9)::before{--value: var(--9);--index: 9}.chaarts.points [style] td:nth-of-type(10)::before{--value: var(--10);--index: 10}.chaarts.points [style] td:nth-of-type(11)::before{--value: var(--11);--index: 11}.chaarts.points [style] td:nth-of-type(12)::before{--value: var(--12);--index: 12}.chaarts.points [style]:nth-child(n+1){--background: var(--checkers)}.chaarts.points [style]:nth-child(2n+2){--background: var(--hexagons)}.chaarts.points [style]:nth-child(3n+3){--background: var(--triangles)}.chaarts.points [style]:nth-child(4n+4){--background: var(--zig)}.chaarts.points [style]:nth-child(5n+5){--background: var(--stripes)}.chaarts.points [style]:nth-child(6n+6){--background: var(--dots)}.chaarts.points tbody:hover [style] td::before,.chaarts.points tbody:hover [style]::before{opacity:.25}.chaarts.points tbody:hover [style]:hover td::before,.chaarts.points tbody:hover [style]:hover::before{opacity:1}.chaarts.points tbody:hover [style]:hover td::before{transform:translate3d(calc(var(--size)/-2),calc(var(--size)/-2),0) scale(1.25)}.chaarts.points [scope=col]:not(:first-child)::after{mix-blend-mode:multiply}.chaarts.points [scope=col]:not(:first-child):hover::after{opacity:.5}@media screen and (min-width:30em)and (-ms-high-contrast:active){.chaarts.line [style]::before{background:linear-gradient(to top,ButtonHighlight,Highlight 75%)}}}@supports (display:contents){.column-container .fieldset{display:flex!important}.chaarts[class*=column]{--gap: 0.5rem;--size: calc(var(--scale, 100) * 100%);--width: calc(64em / var(--y) - 1rem);display:grid;grid-column-gap:var(--gap);max-height:64em;position:relative}.chaarts[class*=column] td,.chaarts[class*=column] th{margin:0}.chaarts[class*=column] tr>*+*{text-align:center}.chaarts[class*=column] tbody,.chaarts[class*=column] thead,.chaarts[class*=column] tr{display:contents}.chaarts[class*=column] caption{grid-column:1/span var(--y);grid-row:-1}.chaarts[class*=column] td{--integer: calc(var(--value));grid-row:calc((var(--scale, 100) + 2) - var(--integer))/-2;pointer-events:none;position:relative;transition:opacity .2s cubic-bezier(.5,0,.5,1)}.chaarts[class*=column] td:nth-of-type(1),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(2){grid-column:2}.chaarts[class*=column] td:nth-of-type(2),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(3){grid-column:3}.chaarts[class*=column] td:nth-of-type(3),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(4){grid-column:4}.chaarts[class*=column] td:nth-of-type(4),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(5){grid-column:5}.chaarts[class*=column] td:nth-of-type(5),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(6){grid-column:6}.chaarts[class*=column] td:nth-of-type(6),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(7){grid-column:7}.chaarts[class*=column] td:nth-of-type(7),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(8){grid-column:8}.chaarts[class*=column] td:nth-of-type(8),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(9){grid-column:9}.chaarts[class*=column] td:nth-of-type(9),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(10){grid-column:10}.chaarts[class*=column] td:nth-of-type(10),.chaarts[class*=column].column-multiple thead tr+tr :nth-of-type(11){grid-column:11}.chaarts[class*=column] span{background:inherit;-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-weight:700;bottom:100%;left:0;line-height:1.5;pointer-events:auto;position:absolute;right:0}.chaarts[class*=column].column-single{grid-auto-columns:1fr;grid-template-rows:2ex repeat(var(--scale, 100),minmax(0,.25rem)) minmax(-webkit-min-content,2rem);grid-template-rows:2ex repeat(var(--scale, 100),minmax(0,.25rem)) minmax(min-content,2rem)}.chaarts[class*=column].column-single tbody th{grid-row:-6/-3;grid-column:1;line-height:1}.chaarts[class*=column].column-single thead *{grid-row:-2}.chaarts[class*=column].column-single td{--position: calc(var(--integer, 0) / var(--scale, 100) * 100%);background:linear-gradient(to top,#01ac49,#444,mediumblue,rebeccapurple,crimson) 0% var(--position)/100% var(--size),var(--background) center/1rem;background-blend-mode:hard-light}.chaarts[class*=column].column-single [scope=col]::after{background:#f5f5f5 var(--stripes);background-blend-mode:exclusion;bottom:4rem;content:"";mix-blend-mode:multiply;opacity:0;position:absolute;transition:opacity .3s cubic-bezier(.5,0,.5,1);top:1rem;width:var(--width);z-index:0}.chaarts[class*=column].column-single [scope=col]:hover::after{opacity:.5}.chaarts[class*=column].column-single [scope=col]:nth-child(2)::after{left:calc(1em + (var(--width)*1) + (var(--gap)*1))}.chaarts[class*=column].column-single [scope=col]:nth-child(3)::after{left:calc(1em + (var(--width)*2) + (var(--gap)*2))}.chaarts[class*=column].column-single [scope=col]:nth-child(4)::after{left:calc(1em + (var(--width)*3) + (var(--gap)*3))}.chaarts[class*=column].column-single [scope=col]:nth-child(5)::after{left:calc(1em + (var(--width)*4) + (var(--gap)*4))}.chaarts[class*=column].column-single [scope=col]:nth-child(6)::after{left:calc(1em + (var(--width)*5) + (var(--gap)*5))}.chaarts[class*=column].column-single [scope=col]:nth-child(7)::after{left:calc(1em + (var(--width)*6) + (var(--gap)*6))}.chaarts[class*=column].column-single td:nth-of-type(n+1){--background: var(--checkers)}.chaarts[class*=column].column-single td:nth-of-type(2n+2){--background: var(--hexagons)}.chaarts[class*=column].column-single td:nth-of-type(3n+3){--background: var(--triangles)}.chaarts[class*=column].column-single td:nth-of-type(4n+4){--background: var(--zig)}.chaarts[class*=column].column-single td:nth-of-type(5n+5){--background: var(--stripes)}.chaarts[class*=column].column-single td:nth-of-type(6n+6){--background: var(--dots)}@media screen and (min-width:30em)and (-ms-high-contrast:active){.chaarts[class*=column].column-single td{background-image:linear-gradient(to top,Window,ButtonFace,ButtonShadow,ButtonText,highlight),var(--background)}}.chaarts[class*=column].column-multiple{grid-template-columns:minmax(-webkit-min-content,14ch) repeat(calc(var(--y) - 1),1fr);grid-template-columns:minmax(min-content,14ch) repeat(calc(var(--y) - 1),1fr);grid-template-rows:2ex repeat(var(--scale, 100),minmax(0,.25rem)) repeat(2,minmax(-webkit-min-content,2rem));grid-template-rows:2ex repeat(var(--scale, 100),minmax(0,.25rem)) repeat(2,minmax(min-content,2rem))}.chaarts[class*=column].column-multiple tbody th{grid-row:-10/span 7}.chaarts[class*=column].column-multiple thead tr *{grid-row:-2;grid-column:1}.chaarts[class*=column].column-multiple thead tr :nth-of-type(2){grid-column:calc(4 - var(--span))/span var(--span)}.chaarts[class*=column].column-multiple thead tr :nth-of-type(3){grid-column:calc(6 - var(--span))/span var(--span)}.chaarts[class*=column].column-multiple thead tr :nth-of-type(4){grid-column:calc(8 - var(--span))/span var(--span)}.chaarts[class*=column].column-multiple thead tr :nth-of-type(5){grid-column:calc(10 - var(--span))/span var(--span)}.chaarts[class*=column].column-multiple thead tr :nth-of-type(6){grid-column:calc(12 - var(--span))/span var(--span)}.chaarts[class*=column].column-multiple thead tr+tr *{font-weight:400;grid-row:-3}.chaarts[class*=column].column-multiple tr:first-child [scope=col]:nth-child(even)::after{background:#f5f5f5 var(--stripes);background-blend-mode:exclusion;bottom:4rem;content:"";mix-blend-mode:multiply;opacity:.25;position:absolute;transition:opacity .3s cubic-bezier(.5,0,.5,1);top:calc(1rem + 2ex);width:calc((var(--width)*2) + (var(--gap)/2) + 1px);z-index:0}.chaarts[class*=column].column-multiple tr:first-child [scope=col]:nth-child(2)::after{left:calc(14ch + 1em + (((var(--width)*2) + (var(--gap)/2) + 1px)*0) + (var(--gap)*1))}.chaarts[class*=column].column-multiple tr:first-child [scope=col]:nth-child(4)::after{left:calc(14ch + 1em + (((var(--width)*2) + (var(--gap)/2) + 1px)*2) + (var(--gap)*3))}.chaarts[class*=column].column-multiple tr:first-child [scope=col]:nth-child(6)::after{left:calc(14ch + 1em + (((var(--width)*2) + (var(--gap)/2) + 1px)*4) + (var(--gap)*5))}.chaarts[class*=column].column-multiple td{background-color:#e11a81;background-image:var(--zig);grid-row-end:-3}.chaarts[class*=column].column-multiple td:nth-of-type(2n+2){background:#0172f0 var(--triangles)}@media screen and (min-width:30em)and (-ms-high-contrast:active){.chaarts[class*=column].column-multiple td{background-color:Window}.chaarts[class*=column].column-multiple td:nth-of-type(2n+2){background-color:Highlight}}}@supports ((-webkit-clip-path:polygon(0% 0%, calc(100% - ( var(--1) * 100% / var(--scale) ) ) 100%, 100% 100%)) or (clip-path:polygon(0% 0%, calc(100% - ( var(--1) * 100% / var(--scale) ) ) 100%, 100% 100%))){.radar-container .fieldset{display:flex!important}.chaarts[class*=radar]{--radius: 12.8em;--unitless-radius: calc( 1024 / 16 / 5 );--size: calc( var(--radius) / var(--scale) );--part: calc( 360deg / var(--items) );--integer: calc(var(--scale));background-image:repeating-radial-gradient(circle at 50%,rgba(0,0,0,.2),rgba(0,0,0,.2) 2px,transparent 0,transparent calc(var(--size)*var(--step))),repeating-radial-gradient(circle at 50%,rgba(0,0,0,.1),rgba(0,0,0,.1) 2px,transparent 0,transparent var(--size));border:2px solid;border-radius:50%;contain:layout;counter-reset:scale var(--integer);height:calc(var(--radius)*2);margin:6rem auto 12rem;overflow:visible;position:relative;width:calc(var(--radius)*2)}.chaarts[class*=radar] caption{background:0 0;bottom:-10rem;position:absolute}.chaarts[class*=radar] [scope=col]{--away: calc( (var(--radius) * -1) - 50% );left:50%;margin:0;padding:0 1rem;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(calc(var(--part)*var(--index, 1))) translate(var(--away)) rotate(calc(var(--part)*var(--index, 1)*-1))}.chaarts[class*=radar] tr>:nth-of-type(1){--index: 1}.chaarts[class*=radar] tr>:nth-of-type(2){--index: 2}.chaarts[class*=radar] tr>:nth-of-type(3){--index: 3}.chaarts[class*=radar] tr>:nth-of-type(4){--index: 4}.chaarts[class*=radar] tr>:nth-of-type(5){--index: 5}.chaarts[class*=radar] tr>:nth-of-type(6){--index: 6}.chaarts[class*=radar] tr>:nth-of-type(7){--index: 7}.chaarts[class*=radar] td{--skew: calc( 90deg - var(--part) );border-bottom:1px solid #8a2be2;height:50%;left:0;margin:0;position:absolute;top:0;transform:rotate(calc(var(--part)*var(--index, 1))) skew(var(--skew));transform-origin:100% 100%;width:50%}.chaarts[class*=radar] td:nth-of-type(1) span{--point: var(--1);--pos: calc( 100% - (var(--2) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td:nth-of-type(2) span{--point: var(--2);--pos: calc( 100% - (var(--3) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td:nth-of-type(3) span{--point: var(--3);--pos: calc( 100% - (var(--4) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td:nth-of-type(4) span{--point: var(--4);--pos: calc( 100% - (var(--5) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td:nth-of-type(5) span{--point: var(--5);--pos: calc( 100% - (var(--6) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td:nth-of-type(6) span{--point: var(--6);--pos: calc( 100% - (var(--7) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td:nth-of-type(7) span{--point: var(--7);--pos: calc( 100% - (var(--8) * 100% / (var(--scale) * var(--ratio) ) ) )}.chaarts[class*=radar] td::after,.chaarts[class*=radar] td::before{display:none}.chaarts[class*=radar] span{--opposite: calc( 180 - (90 + (90 - (360 / var(--items)))) );--angle: calc( var(--opposite) * 0.01745329251 );--sin-term-angle-1: var(--angle);--sin-term-angle-2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);--sin-term-angle-3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);--sin-term-angle-4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);--sin-term-angle-5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);--sin-angle: calc(var(--sin-term-angle-1) - var(--sin-term-angle-2) + var(--sin-term-angle-3) - var(--sin-term-angle-4) + var(--sin-term-angle-5));--hypo: calc( var(--unitless-radius) / var(--sin-angle) );--ratio: calc( var(--hypo) / var(--unitless-radius) );--polygon: polygon( 100% var(--pos), calc( 100% - ( var(--point) * 100% / var(--scale) ) ) 100%, 100% 100% );background:linear-gradient(to top left,#8a2be2 10%,#00008b 75%);-webkit-clip-path:var(--polygon);clip-path:var(--polygon);filter:drop-shadow(0 0 1rem indigo);height:100%;position:absolute;width:100%}.chaarts.radar [scope=col]::after{color:#639;display:block;font-size:small;font-weight:400}.chaarts.radar [scope=col]:nth-child(1)::after{--integer: calc(var(1));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar [scope=col]:nth-child(2)::after{--integer: calc(var(2));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar [scope=col]:nth-child(3)::after{--integer: calc(var(3));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar [scope=col]:nth-child(4)::after{--integer: calc(var(4));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar [scope=col]:nth-child(5)::after{--integer: calc(var(5));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar [scope=col]:nth-child(6)::after{--integer: calc(var(6));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar [scope=col]:nth-child(7)::after{--integer: calc(var(7));counter-reset:value var(--integer);content:counter(value) " / " counter(scale)}.chaarts.radar-multiple{margin-bottom:12rem}.chaarts.radar-multiple tbody{-moz-columns:var(--areas);columns:var(--areas);vertical-align:bottom}.chaarts.radar-multiple [scope=row]{bottom:-8rem;height:2rem;left:1rem;position:absolute}.chaarts.radar-multiple [scope=row]::before{background:var(--color, currentColor);content:"";display:inline-block;height:1rem;margin-right:.25rem;transform:translate3d(0,.1rem,0);width:1rem}.chaarts.radar-multiple tr:nth-child(2) [scope=row]{left:calc(1rem + (100%/var(--areas))*1)}.chaarts.radar-multiple td{align-items:flex-end;border-color:var(--color, currentColor);display:flex;justify-content:flex-end;opacity:.5;pointer-events:none;z-index:0}.chaarts.radar-multiple td::after{color:var(--color, currentColor);display:block;font-size:small;font-weight:700;text-indent:-.5rem;transform:skew(calc(var(--skew)*-1)) rotate(calc(var(--part)*var(--index, 1)*-1));transform-origin:0 0;width:100%;white-space:nowrap}.chaarts.radar-multiple td:nth-of-type(1)::after{--integer: calc(var(--1));counter-reset:value var(--integer);content:counter(value);width:calc( var(--1) * 100% / var(--scale) )}.chaarts.radar-multiple td:nth-of-type(2)::after{--integer: calc(var(--2));counter-reset:value var(--integer);content:counter(value);width:calc( var(--2) * 100% / var(--scale) )}.chaarts.radar-multiple td:nth-of-type(3)::after{--integer: calc(var(--3));counter-reset:value var(--integer);content:counter(value);width:calc( var(--3) * 100% / var(--scale) )}.chaarts.radar-multiple td:nth-of-type(4)::after{--integer: calc(var(--4));counter-reset:value var(--integer);content:counter(value);width:calc( var(--4) * 100% / var(--scale) )}.chaarts.radar-multiple td:nth-of-type(5)::after{--integer: calc(var(--5));counter-reset:value var(--integer);content:counter(value);width:calc( var(--5) * 100% / var(--scale) )}.chaarts.radar-multiple td:nth-of-type(6)::after{--integer: calc(var(--6));counter-reset:value var(--integer);content:counter(value);width:calc( var(--6) * 100% / var(--scale) )}.chaarts.radar-multiple td:nth-of-type(7)::after{--integer: calc(var(--7));counter-reset:value var(--integer);content:counter(value);width:calc( var(--7) * 100% / var(--scale) )}.chaarts.radar-multiple span{background:var(--color, currentColor);pointer-events:auto}@supports ((-webkit-mask-image:url()) or (mask-image:url())){.chaarts.radar-multiple span{--mask: radial-gradient(circle at bottom right, rgba(0,0,0,1), rgba(0,0,0,.5));-webkit-mask-image:var(--mask);mask-image:var(--mask)}}@media screen and (min-width:30em)and (hover:hover){.chaarts.radar-multiple td{opacity:.25;transition:opacity .2s cubic-bezier(.5,0,.5,1)}.chaarts.radar-multiple td::after{opacity:0;transition:inherit}.chaarts.radar-multiple tr:hover td{opacity:1;z-index:1}.chaarts.radar-multiple tr:hover td::after{opacity:inherit}}}}