:root{font-family:monospace;font-size:16px;position:fixed;width:100%;user-select:none;-webkit-user-select:none}body{margin:0;overflow:hidden}.checkmark[data-v-18c1ba09]{cursor:default}.status[data-v-18c1ba09]{opacity:0;position:absolute;pointer-events:none}.button-wrapper[data-v-558ac533]{position:relative}input[type=color][data-v-558ac533]{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}input[data-v-232f9270]{appearance:none;border:none;background:transparent;color:var(--text-color);border:1px solid transparent;border-radius:4px;padding:0 16px;text-transform:uppercase;width:100px;font-size:1rem;font-family:inherit}@media(any-hover:hover){input[data-v-232f9270]:hover{border:1px solid var(--border-color)}}input[data-v-232f9270]:focus-visible{outline:1px solid var(--border-color)}.checkmark[data-v-40876a58]{cursor:default}.status[data-v-40876a58]{opacity:0;position:absolute;pointer-events:none}h1{margin:0 0 16px}h2{margin:0}main{--padding: 16px;width:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden;text-align:start}#foreground-input{--text-color: var(--foreground-text-color);--border-color: var(--foreground-text-color)}#background-input{--text-color: var(--background-text-color);--border-color: var(--background-text-color)}.results{padding:var(--padding)}.color-row{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--padding) * .5) 0px}.button-group{display:flex}.app-icon{appearance:none;cursor:pointer;outline:none;background:none;border:none;color:inherit;padding:var(--padding);margin:0 6px;text-transform:uppercase;font-family:inherit;font-size:1.6rem;display:flex;align-items:center;justify-content:center;border-radius:100%;height:100%}.eyedropper-button{margin-right:0}@media(any-hover:hover){.foreground.color-row button:hover,.results button:hover{background:var(--background-text-color-tint)}.background.color-row button:hover{background:var(--foreground-text-color-tint)}.foreground.color-row button:focus-visible,.results button:focus-visible{background:var(--background-text-color-shade)}.background.color-row button:focus-visible{background:var(--foreground-text-color-shade)}}.main-content{display:flex;flex-direction:column;justify-content:space-between;flex:1;background:var(--background);color:var(--background-text-color);padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);font-size:1.35rem}.bottom-bar{min-height:50px;display:flex;align-items:center;background:var(--foreground);color:var(--foreground-text-color);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.bottom-bar .color-row{width:100%}.button-column{display:flex;flex-direction:column;position:absolute;inset-inline-end:0;top:8px}