html{font:large/1.4 Nunito,sans;min-height:100%;--shadow: 22 22 22;--control-background: 60 60 60;--foreground: 222 222 222;color:rgb(var(--foreground));--page-background: 88 88 88;transition:background-color 166ms ease-in-out;background-color:rgb(var(--page-background))}body{margin:0}a,input,button,textarea{background:transparent;color:rgb(var(--foreground));font:inherit;text-align:inherit;text-shadow:inherit}button,textarea,input{border:0;padding:3px 9px;box-sizing:border-box}p{color:rgb(var(--foreground))}input[inputmode=decimal]{text-align:right}h1,h2,h3,h4{font-family:serif}button{cursor:pointer}input:disabled,button:disabled{cursor:not-allowed}img.square{display:block;width:100%;height:100%}.icon{display:inline-block}.icon svg{vertical-align:text-bottom;margin-bottom:2px}main{width:100%;max-width:40em;margin:auto;padding:1em;box-sizing:border-box}.palette{--control-background: 196 196 196;--foreground: 55 55 55}.palette{background-color:rgb(var(--control-background))}.picker-grid{position:relative;overflow:hidden}.picker-grid .current{position:absolute;translate:-50% -50%;filter:drop-shadow(1px 1px rgb(var(--shadow) / 50%));color:#a6a6a6;font-size:80%}.picker-grid .cell{position:absolute;translate:-50% -50%;width:var(--cell-width);height:var(--cell-height, var(--cell-width))}.picker .cell{width:var(--cell-width);height:var(--cell-height, var(--cell-width))}.picker-stagger .cell{rotate:45deg}.picker .cell{background-color:rgb(var(--cell-color));appearance:none;padding:0;border:0;box-sizing:content-box;border-top:1px solid rgb(var(--cell-color));border-left:1px solid rgb(var(--cell-color));transition:scale 166ms ease-in-out,background-color 166ms ease-in-out}.picker button.cell{z-index:0}.picker button.cell:hover{z-index:1}.picker button.cell:hover{scale:120%;box-shadow:2px 4px 24px rgb(from rgb(var(--cell-color)) calc(r - 44) calc(g - 44) calc(b - 44) / .8)}.picker{display:flex;flex-direction:column;grid-gap:.5em}.picker .picker-preview{--cell-width: 3em }.picker .picker-slider{--cell-height: 3em;height:var(--cell-height)}.picker .picker-controls{display:flex;grid-gap:inherit;flex-wrap:wrap}.picker .picker-controls input{background-color:rgb(var(--control-background))}.picker .picker-controls a{font-size:150%;filter:drop-shadow(1px 1px rgb(var(--shadow) / 50%))}.picker .picker-preview,.picker .picker-grid,.picker .picker-controls input{border:1px solid rgb(var(--shadow));box-shadow:2px 2px 12px rgb(var(--shadow) / .6)}.picker .picker-controls p{margin:auto 0}