*{touch-action:none;box-sizing:border-box;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html,body{padding:0;margin:0;width:100vw;height:100vh;overflow:hidden;font-family:'Open Sans', sans-serif}.panels{display:flex;flex-flow:row nowrap}.panels>*{flex:1 1 0}.wheel-controls .select-wheeltype{display:inline-block;font-size:2.5vh;padding:0.5vh;margin:0.5vh;font-weight:700;border-bottom:0.4vh solid rgba(0,0,0,0.5);color:rgba(0,0,0,0.5);cursor:pointer}.wheel-controls .select-wheeltype:hover{opacity:0.8}.wheel-controls .select-wheeltype.selected{color:rgba(0,0,0,0.9);border-color:rgba(0,0,0,0.9)}.harmony-controls{text-align:right}.harmony-controls .harmony-selector{font-size:2.6vh;margin:0.2em 0.25em;padding:0.2em;background:rgba(0,0,0,0.1);border:none;border-radius:0.4em;color:rgba(0,0,0,0.9);cursor:pointer}.harmony-controls .harmony-selector:hover{background:rgba(0,0,0,0.15)}.wheel{width:85vh;height:85vh;position:absolute;top:47.75vh;left:50%;margin:-42.5vh;cursor:crosshair;background:#000;border:.5vh solid #fff;box-shadow:0px .5vh 1vh rgba(0,0,0,0.5);border-radius:50%}.wheel.scientific{background:url(images/scientific.jpg?3cf51d351a9537220877039f9d6f3d12);background-size:cover}.wheel.artistic{background:url(images/artistic.jpg?ff33549c09e4f5190736626e4cf3bc19);background-size:cover}.wheel .average,.wheel .samples,.wheel .lines{position:absolute;top:50%;left:50%;width:0;height:50%}.wheel .average .marker,.wheel .average .sample,.wheel .average .line,.wheel .samples .marker,.wheel .samples .sample,.wheel .samples .line,.wheel .lines .marker,.wheel .lines .sample,.wheel .lines .line{--direction: 0deg;--distance: 0%;--colour: #fff;--full-sat-colour: #fff;position:absolute;top:-100%;left:0;width:0;height:100%;transform-origin:bottom;transform:rotate(var(--direction));color:black}.wheel .average .marker{--visible: visible;opacity:0.75}.wheel .average .marker:before{content:'';transform:translateX(-50%);position:absolute;top:-2px;left:0;width:4px;height:8px;background-color:white;border-radius:4px;visibility:var(--visible)}.wheel .average .marker:after{content:'';box-sizing:border-box;position:absolute;top:calc(100% - var(--distance));left:0;width:10px;height:10px;transform:translate(-50%, -50%);border-radius:50%;background-color:transparent;border:2px solid white}.wheel .lines .line{border:1.5px dashed #fff;border-width:0 1.5px 0 1.5px;margin-left:-1.5px;margin-right:-1.5px}.wheel .lines .line:before{content:'';box-sizing:border-box;position:absolute;top:-.15vh;left:0;width:2.6vh;height:2.6vh;transform:translate(-50%, -50%);border-radius:50%;background-color:var(--full-sat-colour);border:.3vh solid #fff}.wheel .samples .sample:nth-child(1){z-index:1000}.wheel .samples .sample:nth-child(2){z-index:990}.wheel .samples .sample:nth-child(3){z-index:980}.wheel .samples .sample:nth-child(4){z-index:970}.wheel .samples .sample:nth-child(5){z-index:960}.wheel .samples .sample:nth-child(6){z-index:950}.wheel .samples .sample:nth-child(7){z-index:940}.wheel .samples .sample:nth-child(8){z-index:930}.wheel .samples .sample:nth-child(9){z-index:920}.wheel .samples .sample:nth-child(10){z-index:910}.wheel .samples .sample:nth-child(11){z-index:900}.wheel .samples .sample:nth-child(12){z-index:890}.wheel .samples .sample:nth-child(13){z-index:880}.wheel .samples .sample:nth-child(14){z-index:870}.wheel .samples .sample:nth-child(15){z-index:860}.wheel .samples .sample:nth-child(16){z-index:850}.wheel .samples .sample:nth-child(17){z-index:840}.wheel .samples .sample:nth-child(18){z-index:830}.wheel .samples .sample:nth-child(19){z-index:820}.wheel .samples .sample:nth-child(20){z-index:810}.wheel .samples .sample.sample-main{z-index:1500}.wheel .samples .sample.sample-selected{z-index:1400}.wheel .samples .sample:after{content:'';box-sizing:border-box;position:absolute;top:calc(100% - var(--distance));left:0;width:6.5vh;height:6.5vh;transform:translate(-50%, -50%);border-radius:50%;background-color:var(--colour);border:.5vh solid #fff;z-index:100}@media screen and (orientation: portrait){.wheel{width:85vw;height:85vw;margin:-42.5vw;border-width:.5vw;box-shadow:0px .5vw 1vw rgba(0,0,0,0.5)}.wheel .samples .sample:before{top:-.5vw;width:2.6vw;height:2.6vw;border-width:.5vw}.wheel .samples .sample:after{width:6.5vw;height:6.5vw;border-width:.5vw}}.colours{position:absolute;bottom:0;left:0;right:0}.colours .colour-boxes{display:flex;flex-flow:row nowrap;width:100vw;align-items:flex-end}.colours .colour-boxes .colour-box{--colour: #fff;--full-sat-colour: #fff;position:relative;flex:1 1 0;text-align:center;font-size:1.75vh;font-weight:700;background-color:var(--colour)}.colours .colour-boxes .colour-box .colour-box-segment{line-height:6vh;height:6vh;background-color:var(--colour);-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:rgba(0,0,0,0.5);transition:color 0.25s, height 0.25s}.colours .colour-boxes .colour-box .colour-box-segment:hover{color:black}.colours .colour-boxes .colour-box .colour-box-main:hover{height:7vh}.colours .colour-boxes .colour-box .colour-box-full-sat{line-height:2vh;height:2vh;background-color:var(--full-sat-colour);font-size:1.5vh}