:root{--clr-gray-black: #100F0F;--clr-gray-paper: #FFFCF0;--clr-gray-50: #F2F0E5;--clr-gray-100: #E6E4D9;--clr-gray-150: #DAD8CE;--clr-gray-200: #CECDC3;--clr-gray-300: #B7B5AC;--clr-gray-400: #9F9D96;--clr-gray-500: #878580;--clr-gray-600: #6F6E69;--clr-gray-700: #575653;--clr-gray-800: #403E3C;--clr-gray-850: #343331;--clr-gray-900: #282726;--clr-gray-950: #1C1B1A;--body-color: var(--clr-gray-900);--body-color-alt: var(--clr-gray-300);--heading-color: var(--clr-gray-800);--heading-color-alt: var(--clr-gray-300);--body-background-color: var(--clr-gray-50);--body-background-color-alt: var(--clr-gray-850);}* {margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}body {font-family: "Geologica", sans-serif;font-optical-sizing: auto;font-size: 1rem;font-weight: 100;font-style: normal;font-variation-settings: "slnt" 0, "CRSV" 0, "SHRP" 0 ;line-height: 1.4;color: var(--body-color);background: var(--body-background-color);}h1, h2, h2, h4, h5, h6 {color: var(--heading-color);text-wrap: balance;}h1 {font-size: 1.5rem;color: var(--heading-color-alt);}h2 {font-size: 1.25rem;}a {color: var(--body-color);font-weight: 400;text-decoration: none;}@media (min-width: 40em) {main {min-height: 100dvh;display: -ms-grid;display: grid;gap: 1em;}}header {padding: 1em;max-height: -webkit-fit-content;max-height: -moz-fit-content;max-height: fit-content;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;background: var(--body-background-color-alt);}header svg {display: block;width: 4em;fill: var(--body-color-alt);-webkit-transition: fill 250ms ease-in-out;transition: fill 250ms ease-in-out;}header svg:hover {fill: var(--clr-gray-100);}footer {-webkit-margin-before: auto;margin-block-start: auto;padding: 2em;-ms-flex-item-align: end;-ms-grid-row-align: end;align-self: end;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;gap: 0.5em;font-size: 0.75rem;}footer > span:not(:last-child) {padding-right: 0.5em;border-right: 1px solid var(--clr-gray-600);}.color-palette-builder {margin-inline: auto;padding: 1em;display: -ms-grid;display: grid;-ms-grid-columns: 1fr;grid-template-columns: 1fr;gap: 1em;}.color-palette {padding: 10% 10% 5% 5%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: sticky;top: 0;z-index: 1;border-radius: 0.5em;border: 1px solid var(--clr-gray-200);background: var(--clr-gray-50);}[data-panel] {padding: 1em;display: -ms-grid;display: grid;-ms-flex-line-pack: start;align-content: start;-webkit-box-align: start;-ms-flex-align: start;align-items: start;gap: 2em;border-radius: 0.5em;border: 1px solid var(--clr-gray-200);background: var(--clr-gray-50);}[data-panel="export"] {display: -ms-grid;display: grid;grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));}[data-panel-section] {display: -ms-grid;display: grid;gap: 0.75em;}@media (min-width: 40em) {.color-palette-builder {-ms-grid-columns: 1.5fr 1fr;grid-template-columns: 1.5fr 1fr;}[data-panel] {-ms-grid-column: 2;-ms-grid-column-span: 1;grid-column: 2/3;}}@media (min-width: 64em) {.color-palette-builder {-ms-grid-columns: 1.5fr 1fr 1fr;grid-template-columns: 1.5fr 1fr 1fr;}[data-panel="color"] {-ms-grid-column: 2;-ms-grid-column-span: 1;grid-column: 2/3;}[data-panel="options"] {-ms-grid-column: 3;-ms-grid-column-span: 1;grid-column: 3/4;}[data-panel="export"] {-ms-grid-column: 2;-ms-grid-column-span: 2;grid-column: 2/4;}}@media (min-width: 80em) {.color-palette-builder {-ms-grid-columns: 2fr 1fr 1fr 1fr;grid-template-columns: 2fr 1fr 1fr 1fr;}[data-panel="color"] {-ms-grid-column: 2;-ms-grid-column-span: 1;grid-column: 2/3;}[data-panel="options"] {-ms-grid-column: 3;-ms-grid-column-span: 1;grid-column: 3/4;}[data-panel="export"] {-ms-grid-column: 4;-ms-grid-column-span: 1;grid-column: 4/5;}}.legend-frame {width: 100%;display: -ms-grid;display: grid;-ms-grid-columns: 1em 1em 1fr;grid-template-columns: 1em 1fr;-ms-grid-rows: 1fr 1em 1em;grid-template-rows: 1fr 1em;gap: 1em;}.legend-frame > *:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;}.legend-frame > *:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 3;}.legend-frame > *:nth-child(3) {-ms-grid-row: 3;-ms-grid-column: 1;}.legend-frame > *:nth-child(4) {-ms-grid-row: 3;-ms-grid-column: 3;}.x-axis-label, .y-axis-label {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;white-space: nowrap;font-size: 0.875rem;}.y-axis-label{-ms-grid-column: 1;grid-column: 1;-ms-grid-row: 1;grid-row: 1;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.x-axis-label{-ms-grid-column: 2;grid-column: 2;-ms-grid-row: 2;grid-row: 2;}.grid-outer {-ms-grid-column: 2;grid-column: 2;-ms-grid-row: 1;grid-row: 1;aspect-ratio:1/1;border-radius: 0.25em;overflow: hidden;border-style: solid;border-width: var(--grid-border-width, 2px);border-color: var(--grid-border-color, var(--body-color));background: var(--grid-border-color, var(--body-color));}.grid-outer.no-borders{border-color: transparent;background: transparent;}.grid-outer.no-borders .swatch-grid{gap:0;}.swatch-grid{display: -ms-grid;display: grid;width: 100%;height: 100%;gap:var(--grid-border-width, 1px);}.swatch-grid.labels-hidden .code{display:none;}.swatch .code{font-size: 1rem;}button, input, select {font: inherit;border: none;color: inherit;background: none;}input, select {border-radius: 0.25em;background: var(--clr-gray-50);}button, input:not([type="range"]), select {padding: 1em 1em;}input:not([type="color"], [type="range"]), select {border: 1px solid var(--clr-gray-150);}button, input:not([type="text"], [type="number"]), label:has(input[type="checkbox"]), select {cursor: pointer;}label:has(input[type="checkbox"]) {-ms-grid-column-align: start;justify-self: start;}input:not([type="checkbox"], [type="color"]), select {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;}button, input, label, select, .input > span {font-size: 0.875rem;}input[type="color"] {padding: 0;width: 3.125rem;height: 3.125rem;-ms-flex-negative: 0;flex-shrink: 0;background: none;}input[type="color"]:hover {-webkit-transform: translateY(-1px);-ms-transform: translateY(-1px);transform: translateY(-1px);-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.25);box-shadow: 0 2px 4px rgba(0,0,0,0.25);}input[type="color"]::-webkit-color-swatch-wrapper {padding: 0;border: none;}input[type="color"]::-webkit-color-swatch {border: none;border-radius: 0.25em;}input[type="color"]::-moz-color-swatch {border:none;border-radius: 0.25em;}.input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;gap: 1em;}.input:has(input[type="range"]) {display: -ms-grid;display: grid;-ms-grid-columns: 6.5ch 1fr 5em;grid-template-columns: 6.5ch 1fr 5em;}input[type="range"]#trAdjust {-ms-grid-column: 1;-ms-grid-column-span: 2;grid-column: 1/3;}input[type="range"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 100%;pointer-events: none;background: transparent;}input[type="range"]::-webkit-slider-runnable-track {border-radius: 0.25em;background: var(--clr-gray-300);pointer-events: none;}input[type="range"]::-moz-range-track {border-radius: 0.25em;background: var(--clr-gray-300);pointer-events: none;}input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 0.4em;height: 0.4em;border: 1px solid var(--clr-gray-500);background: var(--clr-gray-500);border-radius: 50%;pointer-events: all;-webkit-transform: scale(3);transform: scale(3);-webkit-transition: -webkit-transform 250ms ease-in-out;transition: -webkit-transform 250ms ease-in-out;transition: transform 250ms ease-in-out;transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;}input[type="range"]::-moz-range-thumb {-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 0.4em;height: 0.4em;border: 1px solid var(--clr-gray-500);background: var(--clr-gray-500);border-radius: 50%;pointer-events: all;transform: scale(3);-moz-transition: transform 250ms ease-in-out;transition: transform 250ms ease-in-out;}input[type="range"]::-webkit-slider-thumb:hover {-webkit-transform: scale(4);transform: scale(4);}input[type="range"]::-moz-range-thumb:hover {transform: scale(4);}input[type="checkbox"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;position: relative;}input:checked::after {content: var(--input-checked-after-content);font-family: 'Material Symbols Rounded';font-size: 1.125rem;font-weight: 700;font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24 ;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);color: var(--clr-gray-600);}input[type="checkbox"]:checked::after {--input-checked-after-content: 'check';}.presets {display:-ms-grid;display:grid;grid-template-columns: repeat(auto-fit, minmax(4em, 1fr));gap: 0.5em;}.preset {aspect-ratio: 4/3;cursor: pointer;display: -ms-grid;display: grid;-ms-grid-rows: (1fr)[2];-ms-grid-columns: (1fr)[2];grid-template: repeat(2, 1fr) / repeat(2, 1fr);border-radius: 0.25em;overflow: hidden;}.preset:hover {-webkit-transform: translateY(-1px);-ms-transform: translateY(-1px);transform: translateY(-1px);-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.25);box-shadow: 0 2px 4px rgba(0,0,0,0.25);}[data-panel="export"] button {border-radius: 0.25em;border: 1px solid var(--clr-gray-200);-webkit-transition: color 250ms ease-in-out, border 250ms ease-in-out, background 250ms ease-in-out ;transition: color 250ms ease-in-out, border 250ms ease-in-out, background 250ms ease-in-out ;}[data-panel="export"] button:hover {color: var(--clr-gray-100);background: var(--body-background-color-alt);border-color: var(--body-background-color-alt);}.copy-toast {padding: 1em;position: absolute;bottom: 4em;left: 50%;z-index:50;-webkit-transform: translate(-50%, 4em);-ms-transform: translate(-50%, 4em);transform: translate(-50%, 4em);color: var(--clr-gray-100);background: var(--body-background-color-alt);border-radius: 0.25em;font-size: 1rem;opacity:0;-webkit-transition: opacity 250ms ease-out, -webkit-transform 250ms ease-out;transition: opacity 250ms ease-out, -webkit-transform 250ms ease-out;transition: opacity 250ms ease-out, transform 250ms ease-out ;transition: opacity 250ms ease-out, transform 250ms ease-out, -webkit-transform 250ms ease-out;pointer-events:none;}.copy-toast.show {opacity: 1;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);}::-webkit-scrollbar {width: 1em;}::-webkit-scrollbar-thumb {background: var(--body-background-color-alt);}::-webkit-scrollbar-track {background: var(--body-background-color);}