body{margin:0;padding:50px 20px 20px;font-family:Roboto,Segoe UI,Noto Sans,-apple-system,system-ui,BlinkMacSystemFont,Droid Sans,sans-serif;background-color:#222;color:#fff}@media (max-width: 1000px){body{padding:42px 12px 12px}}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar{width:14px;background-color:transparent}::-webkit-scrollbar-thumb{border:2px solid #222222;border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.4);background:linear-gradient(#d44,#44d)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(#4d4,#44d)}button::-moz-focus-inner{border:0}.tiny-input::-webkit-outer-spin-button,.tiny-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tiny-input[type=number]{-moz-appearance:textfield;width:3ch}#content{display:flex;justify-content:center;align-content:center;flex-wrap:wrap;min-height:calc(100vh - 70px)}#cp-palette{max-width:465px}#cp-div1,#cp-div2,#cp-div3{width:15px;height:15px}#cp-div3{height:40px;width:100%}#cp-texts{font-size:1.2em}#cp-circle,#cp-slider,#cp-palette{display:flex;justify-content:center;min-height:250px}#cp-circle-inner{width:339px;height:339px;max-width:90vw;max-height:90vw}@media (max-width: 1150px){#cp-div2{flex-basis:100%}#cp-slider{margin-right:0}}@media (max-width: 530px){#cp-div1{flex-basis:100%}#cp-circle,#cp-slider{width:auto;flex-grow:1}}.slider{position:relative;box-sizing:border-box;flex-grow:1;display:inline-flex;width:30px;height:30px;padding:15px;vertical-align:top;border-radius:10000px}.h-slider{min-width:220px}.v-slider{min-height:220px}.c-slider{width:100%;height:100%}.fancy-range{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:30px;flex-grow:1;margin:0;padding:5px;border-radius:1000px;box-shadow:0 0 3px #0005;min-width:100px}.fancy-range:focus{outline:none}.fancy-range::-moz-focus-outer{border:0}.fancy-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:1px solid #0009;background-color:transparent;box-shadow:inset 0 0 0 20px #fffa;position:relative;width:20px;height:20px;padding:0;border-radius:50%;transition:border .15s}.fancy-range::-moz-range-thumb{box-sizing:border-box;border:1px solid #0009;background-color:transparent;box-shadow:inset 0 0 0 20px #fffa;position:relative;width:20px;height:20px;padding:0;border-radius:50%;transition:border .15s}.fancy-range:hover::-webkit-slider-thumb,.fancy-range:active::-webkit-slider-thumb{box-shadow:inset 0 0 0 20px #fffd}.fancy-range:hover::-moz-range-thumb,.fancy-range:active::-moz-range-thumb{box-shadow:inset 0 0 0 20px #fffd}.fancy-range:focus::-webkit-slider-thumb{border:3px solid #0006;outline:none}.fancy-range:focus::-moz-range-thumb{border:3px solid #0006;outline:none}.slider canvas{box-sizing:border-box;margin:-15px;width:100%;height:100%;position:absolute;box-shadow:0 0 3px #0005;background-repeat:repeat}.slider.transparent canvas,.palette-field.big.round{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9btaVUBO0g4pChOlkQLeKoVShChVArtOpgcumH0KQhSXFxFFwLDn4sVh1cnHV1cBUEwQ8QF1cnRRcp8X9JoUWMB8f9eHfvcfcO8DcqTDW7xgFVs4xMKink8itC8BVh9KAfISQkZuqzopiG5/i6h4+vd3Ge5X3uz9GrFEwG+ATiGaYbFvE68dSmpXPeJ46ysqQQnxOPGXRB4keuyy6/cS457OeZUSObmSOOEgulDpY7mJUNlThBHFNUjfL9OZcVzluc1UqNte7JXxgpaMtLXKc5jBQWsAgRAmTUsIEKLMRp1UgxkaH9pId/yPGL5JLJtQFGjnlUoUJy/OB/8Ltbszg54SZFkkD3i21/jADBXaBZt+3vY9tungCBZ+BKa/urDWD6k/R6W4sdAX3bwMV1W5P3gMsdYPBJlwzJkQI0/cUi8H5G35QHBm6B8KrbW2sfpw9AlrpK3wAHh8BoibLXPN4d6uzt3zOt/n4AUkpymkbs5BwAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfjCgYSCy2KVnZRAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAADdJREFUSMdj/P///38GEsDZs2dJUc7AxEBjMGrBqAWjFgwHC1hILVuMjY1H42DUglELRi2gNgAABCwJlRkldR8AAAAASUVORK5CYII=)}.h-slider canvas,.v-slider canvas{border-radius:1000px}.c-slider canvas{border-radius:50%}.slider-inner{box-sizing:border-box;display:flex;flex-grow:1;position:relative;margin:0;padding:0;background:transparent;border-radius:10000px}.h-slider-inner{margin:-10px 0}.v-slider-inner{margin:0 -10px}.slider-handle{box-sizing:border-box;display:block;border:1px solid #0009;background-color:transparent;box-shadow:inset 0 0 0 20px #fffa;position:relative;width:20px;height:20px;padding:0;border-radius:50%;transition:border .15s}.h-slider-handle{margin:0 -10px}.v-slider-handle{margin:-10px 0}.c-slider-handle{margin:-10px}.slider:hover .slider-handle,.slider:active .slider-handle{box-shadow:inset 0 0 0 20px #fffd}.slider .slider-handle:focus{border:3px solid #0006;outline:none}.slider-outer{display:inline-flex;vertical-align:top}.v-slider-outer{flex-direction:column}.v-slider-outer>.label{font-size:.85em;height:20px;line-height:1em;text-align:center}.h-slider-outer>.label{font-size:.85em;align-self:center}.h-slider-outer>.slider{margin:0 10px}.palette{display:inline-flex;vertical-align:top;flex-wrap:wrap;margin:-1px}.palette:focus{outline:none}.palette-field{position:relative;display:inline-flex;flex-direction:column;align-items:stretch;box-sizing:border-box;height:29px;width:5px;flex-grow:1;border:none;padding:0;margin:1px;background-color:transparent;vertical-align:top}.palette-field.big{width:16%;height:16%;margin-bottom:-100%;float:left}.palette-field>div{flex-grow:1;border-radius:2px;box-shadow:0 0 2px #00000028;transition:transform .12s,box-shadow .12s}.palette:focus .palette-field>div{box-shadow:0 0 2px #0005}.palette:focus .palette-field.focused>div{transform:scale(.85);box-shadow:0 0 4px #0005}.palette-field.round{border-radius:50%;overflow:hidden}input[type=text],input[type=number]{box-sizing:border-box;border:none;border-bottom:1px solid #555;background-color:transparent;color:#fff;margin:0;padding:1px 0;border-radius:0;transition:.12s;font-size:100%;font-family:inherit}input[type=number]:focus,input[type=text]:focus{padding-bottom:0;border-bottom:2px solid #33b5ff;outline:none}input.tiny-input{text-align:center;font-size:.75em}input.small-input{width:9ch}.v-slider-outer>.tiny-input{width:30px;height:20px}#toolbar{position:fixed;box-sizing:border-box;left:0;top:0;width:100%;padding:0;background-color:inherit;box-shadow:0 0 0 1px #7f7f7f4d;z-index:1}.toolbar{display:flex;height:30px;line-height:30px;flex-direction:row;padding:0 5px}.tb-item{display:flex;font-size:inherit;background-color:transparent;color:#fff;border:none;margin:0;padding:0 8px;font-family:inherit}.tb-item .tb-item-text{flex-grow:1;text-align:left;line-height:30px}.tb-item .tb-short{opacity:.6;margin:0 0 0 10px;line-height:30px}.tb-item .tb-arrow-right{margin:0 -3px 0 6px;font-size:80%;line-height:30px}.toolbar .tb-arrow-right{display:none}.toolbar>hr{display:block;margin:0 5px;border:1px solid rgba(127,127,127,.5);border-width:0 1px 0 0}.tb-item:hover:not(:disabled){background-color:#7f7f7f4d}.tb-item:focus{outline:none}.tb-item.hovered:not(:disabled){background-color:#1e5a8d;color:#fff}.tb-item:disabled{color:#999}#menus{position:fixed;left:0;top:0;width:100%;background:transparent;pointer-events:none}.menu{pointer-events:all;position:absolute;display:flex;flex-direction:column;color:#fff;background:#252525;padding:5px 0;border-radius:3px;max-height:calc(95vh - 30px);overflow:auto;scrollbar-width:thin;box-shadow:0 0 0 1px #7f7f7f80}.menu>hr{display:block;margin:5px 0;border:1px solid rgba(127,127,127,.5);border-width:1px 0 0 0}.menu .tb-item{line-height:30px}