:root {--dark-color-h: 334.29;--dark-color-s: 32.03%;--dark-color-l: 30%;--light-color-h: 18;--light-color-s: 31.25%;--light-color-l: 93.73%;--dark-color: hsl( var(--dark-color-h), var(--dark-color-s), var(--dark-color-l) );--darker-trans-color: hsla( var(--dark-color-h), var(--dark-color-s), calc(var(--dark-color-l) - 10%), 0.75 );--light-color: hsl( var(--light-color-h), var(--light-color-s), var(--light-color-l) );--bg-color: var(--light-color);--text-color: var(--dark-color);--file-button-color: var(--light-color);--file-button-bg-color: var(--dark-color);--file-button-border-color: var(--dark-color);--file-button-active-color: var(--light-color);--file-button-active-bg-color: var(--dark-color);--file-button-active-border-color: var(--dark-color);--resources-bg-color: var(--darker-trans-color);--resources-active-color: color-mix( in srgb, var(--light-color) 75%, transparent );--resources-color: var(--light-color);--max-width: 40rem;}*, ::after, ::before {border-style: solid;border-width: 0;box-sizing: border-box;}* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}body {align-items: center;background: var(--bg-color);color: var(--text-color);display: grid;font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;font-size: 0.875rem;justify-items: center;line-height: 1.5;margin: 2rem 0;min-height: 100vh;place-items: center;width: 100%;}section {display: block;margin: 0 auto;max-width: var(--max-width);psotion: relative;width: calc(100% - 2rem);}section > * + * {margin-top: 2rem;}section h1 {margin: 0;text-wrap: balance;text-wrap: pretty;}.app-container {background-color: hsl( var(--light-color-h), var(--light-color-s), calc(var(--light-color-l) - 3%) );box-shadow: 0 0.125rem 0.25rem hsla( var(--dark-color-h), var(--dark-color-s), calc(var(--dark-color-l) - 10%), 0.1 );display: block;padding: 2rem;text-align: center;width: 100%;}.app-container > * + * {margin-top: 2rem;}#preview {--preview-max-width: var(--max-width);aspect-ratio: 1;background-color: var(--darker-trans-color);box-shadow: 0 0.125rem 0.25rem var(--darker-trans-color);max-width: var(--preview-max-width);pointer-events: none;}#preview, #preview img {display: block;position: relative;width: 100%;}#preview img {aspect-ratio: inherit;background-repeat: no-repeat;background-size: cover;border: 0;border-radius: inherit;color: transparent;font: 0/0 a;height: 100%;max-width: 100%;-o-object-fit: cover;object-fit: cover;outline: none;padding: 0;text-shadow: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;vertical-align: middle;}#results {margin-block: 1.5rem 0;}svg {fill: transparent;}.color-box {align-items: center;background-color: var(--light-color);display: flex;height: 2.5rem;justify-content: space-between;margin-top: 0.5rem;padding: 0 0.5rem;}.color-box a {border-radius: 50%;display: inline-flex;outline: thin solid hsla( var(--light-color-h), var(--light-color-s), calc(var(--light-color-l) - 10%), 0.5 );}#top_colors {display: flex;gap: 0.25rem;}.lr-file {--font-size: 0.875rem;align-items: center;border: thin solid transparent;display: inline-flex;flex-wrap: nowrap;min-height: 2rem;overflow: hidden;position: relative;}.lr-file label {border: thin solid var(--file-button-border-color);cursor: pointer;display: inline-block;font-size: var(--font-size);padding: 0.25rem 0.75rem;width: -moz-max-content;width: max-content;}.lr-file input[type="file"], .lr-file label {flex: 0 0 auto;font-family: inherit;letter-spacing: inherit;line-height: inherit;min-height: inherit;text-transform: inherit;}.lr-file input[type="file"] {cursor: none;font-size: 0;margin: 0;min-width: 0;padding: 0;pointer-events: none;}.lr-file .file-name {-webkit-box-orient: vertical;color: var(--file-filename-color);display: -webkit-box;flex: 1 1 auto;font-family: inherit;font-size: var(--font-size);-webkit-hyphens: none;hyphens: none;letter-spacing: inherit;-webkit-line-clamp: 1;line-height: inherit;overflow: hidden;overscroll-behavior: none;padding: 0 0.375rem;pointer-events: none;text-align: left;text-transform: inherit;-webkit-user-select: none;-moz-user-select: none;user-select: none;visibility: visible;white-space: normal;word-wrap: break-word;}.lr-file input[type="file"]:focus {outline: none;}.lr-file:has(input[type="file"]:focus-visible) {border: thin solid var(--file-button-active-border-color);}.lr-file:has(input[type="file"]:focus-visible) label {border: thin solid transparent;}.lr-file:has(input[type="file"]:focus-visible) input[type="file"]:focus-visible::file-selector-button {background-color: var(--file-button-active-bg-color);border: thin solid var(--file-button-active-border-color);color: var(--file-button-active-color);}.lr-file input[type="file"]::file-selector-button {background-color: var(--file-button-bg-color);border: thin solid var(--file-button-border-color);color: var(--file-button-color);cursor: pointer;display: inline-block;font-family: inherit;font-size: var(--font-size);letter-spacing: inherit;line-height: inherit;min-height: inherit;padding: 0.25rem 0.75rem;pointer-events: auto;text-transform: inherit;width: -moz-max-content;width: max-content;}.lr-file input[type="file"]::file-selector-button:active {background-color: var(--file-button-active-bg-color);border: thin solid var(--file-button-active-border-color);color: var(--file-button-active-color);}.resources-layer {bottom: 0;display: block;position: fixed;right: 0;z-index: 1000;}.resources {background: var(--resources-bg-color);display: grid;font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;font-size: 0.6875rem;font-weight: 300;grid-auto-flow: column;line-height: 1.3;padding: 0.5rem;pointer-events: auto;}.resources a {align-content: center;display: grid;justify-content: center;padding: 0 0.5rem;place-content: center;transition: color 0.2s ease-in-out;}.resources a, .resources a:visited {color: var(--resources-color);}.resources a:active, .resources a:focus-visible {color: var(--resources-active-color);}.resources a:focus-visible {outline: none;}.resources a:not(:first-child) {border-inline-start: thin solid currentColor;}@media (hover: hover) and (pointer: fine) {.lr-file input[type="file"]::file-selector-button:hover:not(:disabled) {background-color: var(--file-button-active-bg-color);border: thin solid var(--file-button-active-border-color);color: var(--file-button-active-color);}.resources a:active:not(:hover), .resources a:hover {color: var(--resources-active-color);}}