.hue--0{--hue: 0;--rot: 0deg}.hue--6{--hue: 6;--rot: 6deg}.hue--12{--hue: 12;--rot: 12deg}.hue--18{--hue: 18;--rot: 18deg}.hue--24{--hue: 24;--rot: 24deg}.hue--30{--hue: 30;--rot: 30deg}.hue--36{--hue: 36;--rot: 36deg}.hue--42{--hue: 42;--rot: 42deg}.hue--48{--hue: 48;--rot: 48deg}.hue--54{--hue: 54;--rot: 54deg}.hue--60{--hue: 60;--rot: 60deg}.hue--66{--hue: 66;--rot: 66deg}.hue--72{--hue: 72;--rot: 72deg}.hue--78{--hue: 78;--rot: 78deg}.hue--84{--hue: 84;--rot: 84deg}.hue--90{--hue: 90;--rot: 90deg}.hue--96{--hue: 96;--rot: 96deg}.hue--102{--hue: 102;--rot: 102deg}.hue--108{--hue: 108;--rot: 108deg}.hue--114{--hue: 114;--rot: 114deg}.hue--120{--hue: 120;--rot: 120deg}.hue--126{--hue: 126;--rot: 126deg}.hue--132{--hue: 132;--rot: 132deg}.hue--138{--hue: 138;--rot: 138deg}.hue--144{--hue: 144;--rot: 144deg}.hue--150{--hue: 150;--rot: 150deg}.hue--156{--hue: 156;--rot: 156deg}.hue--162{--hue: 162;--rot: 162deg}.hue--168{--hue: 168;--rot: 168deg}.hue--174{--hue: 174;--rot: 174deg}.hue--180{--hue: 180;--rot: 180deg}.hue--186{--hue: 186;--rot: 186deg}.hue--192{--hue: 192;--rot: 192deg}.hue--198{--hue: 198;--rot: 198deg}.hue--204{--hue: 204;--rot: 204deg}.hue--210{--hue: 210;--rot: 210deg}.hue--216{--hue: 216;--rot: 216deg}.hue--222{--hue: 222;--rot: 222deg}.hue--228{--hue: 228;--rot: 228deg}.hue--234{--hue: 234;--rot: 234deg}.hue--240{--hue: 240;--rot: 240deg}.hue--246{--hue: 246;--rot: 246deg}.hue--252{--hue: 252;--rot: 252deg}.hue--258{--hue: 258;--rot: 258deg}.hue--264{--hue: 264;--rot: 264deg}.hue--270{--hue: 270;--rot: 270deg}.hue--276{--hue: 276;--rot: 276deg}.hue--282{--hue: 282;--rot: 282deg}.hue--288{--hue: 288;--rot: 288deg}.hue--294{--hue: 294;--rot: 294deg}.hue--300{--hue: 300;--rot: 300deg}.hue--306{--hue: 306;--rot: 306deg}.hue--312{--hue: 312;--rot: 312deg}.hue--318{--hue: 318;--rot: 318deg}.hue--324{--hue: 324;--rot: 324deg}.hue--330{--hue: 330;--rot: 330deg}.hue--336{--hue: 336;--rot: 336deg}.hue--342{--hue: 342;--rot: 342deg}.hue--348{--hue: 348;--rot: 348deg}.hue--354{--hue: 354;--rot: 354deg}.sat--0{--sat: 0%;--trans: 0}.sat--1{--sat: 1%;--trans: 1}.sat--2{--sat: 2%;--trans: 2}.sat--3{--sat: 3%;--trans: 3}.sat--4{--sat: 4%;--trans: 4}.sat--5{--sat: 5%;--trans: 5}.sat--6{--sat: 6%;--trans: 6}.sat--7{--sat: 7%;--trans: 7}.sat--8{--sat: 8%;--trans: 8}.sat--9{--sat: 9%;--trans: 9}.sat--10{--sat: 10%;--trans: 10}.sat--11{--sat: 11%;--trans: 11}.sat--12{--sat: 12%;--trans: 12}.sat--13{--sat: 13%;--trans: 13}.sat--14{--sat: 14%;--trans: 14}.sat--15{--sat: 15%;--trans: 15}.sat--16{--sat: 16%;--trans: 16}.sat--17{--sat: 17%;--trans: 17}.sat--18{--sat: 18%;--trans: 18}.sat--19{--sat: 19%;--trans: 19}.sat--20{--sat: 20%;--trans: 20}.sat--21{--sat: 21%;--trans: 21}.sat--22{--sat: 22%;--trans: 22}.sat--23{--sat: 23%;--trans: 23}.sat--24{--sat: 24%;--trans: 24}.sat--25{--sat: 25%;--trans: 25}.sat--26{--sat: 26%;--trans: 26}.sat--27{--sat: 27%;--trans: 27}.sat--28{--sat: 28%;--trans: 28}.sat--29{--sat: 29%;--trans: 29}.sat--30{--sat: 30%;--trans: 30}.sat--31{--sat: 31%;--trans: 31}.sat--32{--sat: 32%;--trans: 32}.sat--33{--sat: 33%;--trans: 33}.sat--34{--sat: 34%;--trans: 34}.sat--35{--sat: 35%;--trans: 35}.sat--36{--sat: 36%;--trans: 36}.sat--37{--sat: 37%;--trans: 37}.sat--38{--sat: 38%;--trans: 38}.sat--39{--sat: 39%;--trans: 39}.sat--40{--sat: 40%;--trans: 40}.sat--41{--sat: 41%;--trans: 41}.sat--42{--sat: 42%;--trans: 42}.sat--43{--sat: 43%;--trans: 43}.sat--44{--sat: 44%;--trans: 44}.sat--45{--sat: 45%;--trans: 45}.sat--46{--sat: 46%;--trans: 46}.sat--47{--sat: 47%;--trans: 47}.sat--48{--sat: 48%;--trans: 48}.sat--49{--sat: 49%;--trans: 49}.sat--50{--sat: 50%;--trans: 50}.sat--51{--sat: 51%;--trans: 51}.sat--52{--sat: 52%;--trans: 52}.sat--53{--sat: 53%;--trans: 53}.sat--54{--sat: 54%;--trans: 54}.sat--55{--sat: 55%;--trans: 55}.sat--56{--sat: 56%;--trans: 56}.sat--57{--sat: 57%;--trans: 57}.sat--58{--sat: 58%;--trans: 58}.sat--59{--sat: 59%;--trans: 59}.sat--60{--sat: 60%;--trans: 60}.sat--61{--sat: 61%;--trans: 61}.sat--62{--sat: 62%;--trans: 62}.sat--63{--sat: 63%;--trans: 63}.sat--64{--sat: 64%;--trans: 64}.sat--65{--sat: 65%;--trans: 65}.sat--66{--sat: 66%;--trans: 66}.sat--67{--sat: 67%;--trans: 67}.sat--68{--sat: 68%;--trans: 68}.sat--69{--sat: 69%;--trans: 69}.sat--70{--sat: 70%;--trans: 70}.sat--71{--sat: 71%;--trans: 71}.sat--72{--sat: 72%;--trans: 72}.sat--73{--sat: 73%;--trans: 73}.sat--74{--sat: 74%;--trans: 74}.sat--75{--sat: 75%;--trans: 75}.sat--76{--sat: 76%;--trans: 76}.sat--77{--sat: 77%;--trans: 77}.sat--78{--sat: 78%;--trans: 78}.sat--79{--sat: 79%;--trans: 79}.sat--80{--sat: 80%;--trans: 80}.sat--81{--sat: 81%;--trans: 81}.sat--82{--sat: 82%;--trans: 82}.sat--83{--sat: 83%;--trans: 83}.sat--84{--sat: 84%;--trans: 84}.sat--85{--sat: 85%;--trans: 85}.sat--86{--sat: 86%;--trans: 86}.sat--87{--sat: 87%;--trans: 87}.sat--88{--sat: 88%;--trans: 88}.sat--89{--sat: 89%;--trans: 89}.sat--90{--sat: 90%;--trans: 90}.sat--91{--sat: 91%;--trans: 91}.sat--92{--sat: 92%;--trans: 92}.sat--93{--sat: 93%;--trans: 93}.sat--94{--sat: 94%;--trans: 94}.sat--95{--sat: 95%;--trans: 95}.sat--96{--sat: 96%;--trans: 96}.sat--97{--sat: 97%;--trans: 97}.sat--98{--sat: 98%;--trans: 98}.sat--99{--sat: 99%;--trans: 99}.sat--100{--sat: 100%;--trans: 100}.lig--0{--lig: 0%}.lig--1{--lig: 1%}.lig--2{--lig: 2%}.lig--3{--lig: 3%}.lig--4{--lig: 4%}.lig--5{--lig: 5%}.lig--6{--lig: 6%}.lig--7{--lig: 7%}.lig--8{--lig: 8%}.lig--9{--lig: 9%}.lig--10{--lig: 10%}.lig--11{--lig: 11%}.lig--12{--lig: 12%}.lig--13{--lig: 13%}.lig--14{--lig: 14%}.lig--15{--lig: 15%}.lig--16{--lig: 16%}.lig--17{--lig: 17%}.lig--18{--lig: 18%}.lig--19{--lig: 19%}.lig--20{--lig: 20%}.lig--21{--lig: 21%}.lig--22{--lig: 22%}.lig--23{--lig: 23%}.lig--24{--lig: 24%}.lig--25{--lig: 25%}.lig--26{--lig: 26%}.lig--27{--lig: 27%}.lig--28{--lig: 28%}.lig--29{--lig: 29%}.lig--30{--lig: 30%}.lig--31{--lig: 31%}.lig--32{--lig: 32%}.lig--33{--lig: 33%}.lig--34{--lig: 34%}.lig--35{--lig: 35%}.lig--36{--lig: 36%}.lig--37{--lig: 37%}.lig--38{--lig: 38%}.lig--39{--lig: 39%}.lig--40{--lig: 40%}.lig--41{--lig: 41%}.lig--42{--lig: 42%}.lig--43{--lig: 43%}.lig--44{--lig: 44%}.lig--45{--lig: 45%}.lig--46{--lig: 46%}.lig--47{--lig: 47%}.lig--48{--lig: 48%}.lig--49{--lig: 49%}.lig--50{--lig: 50%}.lig--51{--lig: 51%}.lig--52{--lig: 52%}.lig--53{--lig: 53%}.lig--54{--lig: 54%}.lig--55{--lig: 55%}.lig--56{--lig: 56%}.lig--57{--lig: 57%}.lig--58{--lig: 58%}.lig--59{--lig: 59%}.lig--60{--lig: 60%}.lig--61{--lig: 61%}.lig--62{--lig: 62%}.lig--63{--lig: 63%}.lig--64{--lig: 64%}.lig--65{--lig: 65%}.lig--66{--lig: 66%}.lig--67{--lig: 67%}.lig--68{--lig: 68%}.lig--69{--lig: 69%}.lig--70{--lig: 70%}.lig--71{--lig: 71%}.lig--72{--lig: 72%}.lig--73{--lig: 73%}.lig--74{--lig: 74%}.lig--75{--lig: 75%}.lig--76{--lig: 76%}.lig--77{--lig: 77%}.lig--78{--lig: 78%}.lig--79{--lig: 79%}.lig--80{--lig: 80%}.lig--81{--lig: 81%}.lig--82{--lig: 82%}.lig--83{--lig: 83%}.lig--84{--lig: 84%}.lig--85{--lig: 85%}.lig--86{--lig: 86%}.lig--87{--lig: 87%}.lig--88{--lig: 88%}.lig--89{--lig: 89%}.lig--90{--lig: 90%}.lig--91{--lig: 91%}.lig--92{--lig: 92%}.lig--93{--lig: 93%}.lig--94{--lig: 94%}.lig--95{--lig: 95%}.lig--96{--lig: 96%}.lig--97{--lig: 97%}.lig--98{--lig: 98%}.lig--99{--lig: 99%}.lig--100{--lig: 100%}.hue--primary--triadic--plus{--hue: calc(var(--primary-hue) + var(--triadic))}.hue--primary--triadic--minus{--hue: calc(var(--primary-hue) - var(--triadic))}.hue--primary{--hue: var(--primary-hue)}.sat--primary{--sat: var(--primary-sat)}.sat--primary--alt{--sat: var(--primary-alt-sat)}.lig--primary--alt{--lig: var(--primary-alt-lig)}.hue--secondary--complementary{--hue: calc(var(--secondary-hue) + 180)}.hue--secondary{--hue: var(--secondary-hue)}.sat--secondary{--sat: var(--secondary-sat)}.sat--secondary--alt{--sat: var(--secondary-alt-sat)}.lig--secondary{--lig: var(--secondary-lig)}.lig--secondary--alt{--lig: var(--secondary-alt-lig)}.hue--tertiary--complementary{--hue: calc(var(--tertiary-hue) + 180)}.hue--tertiary{--hue: var(--tertiary-hue)}.sat--tertiary{--sat: var(--tertiary-sat)}.lig--tertiary{--lig: var(--tertiary-lig)}.hue:not(.sat):not(.lig){background-color:hsl(var(--hue), 50%, 50%)}.hue.sat:not(.lig){background-color:hsl(var(--hue), var(--sat), 50%)}.hue:not(.sat).lig{background-color:hsl(var(--hue), 50%, var(--lig))}.hue.sat.lig{background-color:hsl(var(--hue), var(--sat), var(--lig))}.strip span[role=button],.neighbors span[role=button],.complement span[role=button],.triads span[role=button],.compound span[role=button]{height:5px}.strip__picker__line,.neighbors__picker__line,.complement__picker__line,.triads__picker__line,.compound__picker__line{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.saturation__picker,.lightness__picker{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.saturation__picker span,.lightness__picker span{height:2ch}.wheel{--frac: min(1.5vw, 1.5vh);--shift: calc(var(--frac) * 5);--side: calc(2 * (2em + 20 * var(--frac) + var(--shift)))}.wheel__picker{margin-inline:auto;height:var(--side);position:relative}.wheel__picker span[role=button]{height:calc(var(--frac)*3);width:calc(var(--frac)*3);position:absolute;top:calc(50% - var(--frac)/2);left:calc(50% - var(--frac)/2);transform:rotateZ(var(--rot)) translateX(calc(var(--shift) + var(--frac)*var(--trans)/5))}