:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html{height:100%}body{margin:0;height:100%}#root{margin:0 auto;height:100%}.app{height:100%}.app-bar{background-color:#fff!important}.app-title{flex-grow:1}.colors-container{height:calc(100% - 64px)}.add-color{position:relative;left:-24px;top:50%}.add-color button{display:none;background-color:#fff;color:#242424;width:48px;height:48px}.add-color button:hover{background-color:#fff}.add-color-left{left:0}.add-color-right{position:absolute;left:auto;right:0;top:calc(50% + 32px)}.color-name{position:relative;bottom:20px;font-size:2em;width:100%;text-align:center;cursor:pointer;margin-bottom:1em}.color-actions{margin:0 auto 4em}.color-actions button{display:none;width:48px;height:48px}.color-band-container:hover .color-actions button{display:block}