:root{--font-display:"Oswald", sans-serif;--accent-color:#08f;--text-light:#fff;--remove-cross-width:14px;--remove-cross-height:1px;--chip-radius:4px}html,body,h1,h2,ul,li,p,small{margin:0;padding:0}ul{list-style:none}button,select,input,textarea{font:inherit}:is(#controller h1,#controller h2,#title,#userColor .base-color .print-user-color,#userColor .base-color .try-painting,#userColor .base-color .remove-btn em){font-family:var(--font-display);letter-spacing:1px;font-weight:300}html,body{height:100%;font-size:12px;overflow:hidden}body{background-color:#fff;font-family:Arial,Helvetica,sans-serif}#controller{z-index:200;position:fixed;bottom:4em;left:2em}#controller h1{letter-spacing:4px;margin:0;padding-bottom:2em;padding-left:.7em;font-size:18px;display:inline-block}#controller h2{margin-bottom:1.5em;padding-left:2px;font-size:10px}#controller .circle-conf{float:left;padding:0 1em 1.5em}#controller .circle-conf:last-of-type{clear:left;padding-bottom:0}#controller select{width:100px}#controller .range-control{flex-direction:column;width:140px;display:inline-flex}#controller .range-value{font-size:10px}#controller input[type=range]{width:100%}#title{letter-spacing:6px;font-size:32px;font-weight:700;position:absolute;top:34px;left:34px}#userColor{z-index:300;white-space:nowrap;position:fixed;bottom:0;left:3em;right:3em;overflow:auto hidden}#userColor .selected-color{vertical-align:bottom;height:26px;display:inline-block;position:relative}#userColor .base-color{width:40%}#userColor .sub-color{width:80px}#userColor .base-color .print-user-color,#userColor .base-color .try-painting,#userColor .base-color .remove-btn em{-webkit-user-select:none;user-select:none}#userColor .base-color .print-user-color{color:var(--text-light);cursor:pointer;font-size:10px;position:absolute;top:8px;left:8px}#userColor .base-color .print-user-color:hover{color:var(--accent-color)}#userColor .base-color .try-painting{cursor:pointer;position:absolute;top:6px;left:100px}#userColor .base-color .try-painting a{color:var(--text-light);font-size:10px;text-decoration:none}#userColor .base-color .try-painting a:hover{color:var(--accent-color)}#userColor .base-color .try-painting:before{content:"/";color:var(--text-light);position:absolute;left:-12px}#userColor .base-color .remove-btn{width:60px}#userColor .base-color .remove-btn em{color:#0000;margin-top:3px;margin-left:4px;font-size:10px;display:inline-block}#userColor .base-color .remove-btn:hover em{color:var(--text-light)}#userColor .base-color .remove-btn:before,#userColor .base-color .remove-btn:after{left:43px}#userColor .remove-btn,#print .remove-btn{cursor:pointer;border-radius:var(--chip-radius);width:18px;height:18px;position:absolute;top:5px;right:6px}#userColor .remove-btn:hover,#print .remove-btn:hover{background:var(--accent-color)}#userColor .remove-btn:before,#userColor .remove-btn:after,#print .remove-btn:before,#print .remove-btn:after{content:"";width:var(--remove-cross-width);height:var(--remove-cross-height);background:var(--text-light);position:absolute;top:8px;left:2px}#userColor .remove-btn:before,#print .remove-btn:before{transform:rotate(45deg)}#userColor .remove-btn:after,#print .remove-btn:after{transform:rotate(135deg)}#colorCircle{width:1040px;height:630px;margin-top:-328px;margin-left:-520px;position:absolute;top:50%;left:50%}#colorCircle:before{content:"Hue & Chroma >>>";font-size:10px;position:absolute;top:116px;left:334px}#colorCircle .chip:hover{box-shadow:0 0 6px var(--accent-color)}#colorCircle .current-base-color:before{content:"▼";width:10px;margin-left:-5px;font-size:10px;position:absolute;bottom:-14px;left:50%}#colorCircle .circle .chip{z-index:300;position:absolute}#colorCircle .circle .color-clash{opacity:0}#brightness{z-index:300;-webkit-user-select:none;user-select:none;position:absolute;top:300px;left:4px}#brightness:before{content:"Brightness >>>";font-size:10px;position:absolute;top:-4em;left:0}#brightness .chip{border-radius:var(--chip-radius);width:30px;height:30px;margin-right:4px;display:inline-block}#brightness .chip1{background-color:#fff;box-shadow:0 0 6px #0000004d}#brightness .chip2{background-color:#e3e3e3}#brightness .chip3{background-color:#c6c6c6}#brightness .chip4{background-color:#aaa}#brightness .chip5{background-color:#8e8e8e}#brightness .chip6{background-color:#717171}#brightness .chip7{background-color:#555}#brightness .chip8{background-color:#393939}#brightness .chip9{background-color:#1c1c1c}#brightness .chip10{background-color:#000}#brightness .current-brightness{box-shadow:0 0 6px var(--accent-color)}#brightness .brightness-clash{visibility:hidden;pointer-events:none}#print{z-index:500;border-radius:var(--chip-radius);background:#eeec;font-family:helvetica,arial,sans-serif;position:fixed;bottom:50px;left:36px}#print ul{margin:40px}#print li{margin:15px 0}#print .chip{width:60px;height:10px;margin-right:12px;display:inline-block}#print .key{width:6em;display:inline-block}#print .val{width:4em;display:inline-block}#print .remove-btn{background:#ccc}