.tabs{scrollbar-gutter:stable;scrollbar-width:thin;scroll-snap-align:start;scroll-snap-type:x proximity;align-items:end;gap:4px;display:flex;overflow-x:scroll}.tabs,.tab,.new-tab{transform:rotateX(180deg)}.tab:not(.active){border-color:var(--secondary-dull);background-color:var(--primary-dull)}.tab:not(.active) p{color:var(--secondary-bright)}.tab:not(.active) .head button.close{background-color:var(--primary-duller)}.tab:not(.active) .head button.close .icon{color:var(--secondary)}.tab.active{background-color:var(--primary)}.tab.active p{color:var(--secondary-brighter)}.tab.active .head button.close{background-color:var(--primary-dull)}.tab.active .head button.close .icon{color:var(--secondary)}.new-tab{border-color:var(--secondary)}.new-tab,.tab{--border:1px;--head-height:1rem;flex-shrink:0}.new-tab{width:calc(var(--preview-width) + var(--border) * 2);height:calc(var(--preview-height) + var(--head-height));border-width:var(--border) var(--border) 0;border-style:solid solid none;justify-content:center;align-items:center;display:flex}.new-tab button{color:var(--accent);cursor:pointer;background:0 0;border:none;padding:0;font-size:.75rem;text-decoration:underline}.tab{cursor:pointer;width:calc(var(--preview-width) + var(--border) * 2);height:calc(var(--preview-height) + var(--head-height));flex-direction:column;align-items:center;display:flex}.tab .head{width:100%;height:var(--head-height);justify-content:space-between;align-items:start;display:flex}.tab .head p{line-height:var(--head-height);padding-left:.2rem;font-size:.75rem;font-weight:600}.tab .head button.close{width:1rem;height:calc(.8rem - var(--border));justify-content:center;align-items:center;display:flex}.tab .head button.close .icon{font-size:.6rem}:is(.new-tab:has(.palette-preview),.tab:has(.palette-preview)){--preview-width:calc(20px * 3);--preview-height:calc(20px * 2 - 6px)}.palette-preview{width:var(--preview-width);height:var(--preview-height);background-color:var(--primary-duller);flex-flow:wrap-reverse;display:flex;overflow:hidden}.palette-preview.active{background-color:var(--primary-dull)}.palette-preview .color{width:20px;height:20px}.palette .grid .item,.palette .grid .item.header,.palette .grid .item.new,.palette .grid .edit-item{grid-row:span 1;grid-column-end:span 1}.palette .item{--rank-border-any:#fff;--rank-great-main:#000;--rank-great-accent:#8acc5a;--rank-great-sub:#8acc5a;--rank-great-bg:var(--white);--rank-good-main:#000;--rank-good-accent:#f3ce62;--rank-good-sub:#f3ce62;--rank-good-bg:var(--white);--rank-meh-main:#aaa;--rank-meh-sub:#9d9d9d;--rank-meh-bg:#7d7d7d;--rank-none-main:#aaa;--rank-none-sub:#9d9d9d;--rank-none-bg:#7d7d7d}.palette .item.rank-great,.palette .item .rank-great{--rank-text:var(--rank-great-main);--rank-border:calc(1.25rem / 2) solid var(--rank-border-any);--rank-bg:var(--rank-great-bg);--rank-button-bg:var(--rank-great-accent);--rank-button-border:var(--rank-great-sub)}.palette .item.rank-good,.palette .item .rank-good{--rank-text:var(--rank-good-main);--rank-border:calc(1.25rem / 2) solid var(--rank-border-any);--rank-bg:var(--rank-good-bg);--rank-button-bg:var(--rank-good-accent);--rank-button-border:var(--rank-good-sub)}.palette .item.rank-meh,.palette .item .rank-meh{--rank-text:var(--rank-meh-main);--rank-border:none;--rank-border-width:0px;--rank-bg:var(--rank-meh-bg);--rank-button-bg:var(--rank-meh-bg);--rank-button-border:var(--rank-meh-sub)}.palette .item.rank-none,.palette .item .rank-none{--rank-text:var(--rank-none-main);--rank-border:none;--rank-border-width:0px;--rank-bg:var(--rank-none-bg);--rank-button-bg:var(--rank-none-bg);--rank-button-border:var(--rank-none-sub)}.palette .item{background-color:var(--white);align-items:stretch;min-width:10rem;max-width:20rem;height:100%;min-height:1.6rem;display:flex}.palette .item .color{border-left:var(--rank-border);flex:1 0 0}.palette .item .feature-color{justify-content:center;align-items:stretch;width:1.25rem;display:flex}.palette .item .feature-color .picked-color-overlay{width:33.3333%}.palette .item .rank{text-align:right;font-variant-numeric:lining-nums proportional-nums;background-color:var(--rank-bg);width:2rem;color:var(--rank-text);justify-content:end;align-items:start;padding:.3rem .4rem;font-size:1rem;line-height:1rem;display:flex}.palette .item .buttons{border-top:.5px solid var(--rank-button-border);border-bottom:.5px solid var(--rank-button-border);background-color:var(--rank-button-bg);justify-content:end;align-items:start;padding:.3rem;display:flex}.palette .item .buttons button{text-align:center;width:.9rem;height:.9rem;color:var(--bg);justify-content:center;align-items:center;display:flex}.palette .item .buttons button.edit{background-color:var(--edit)}.palette .item .buttons button.copy{background-color:var(--copy)}.palette .item .buttons button.delete{background-color:var(--delete)}.palette .item .buttons button .icon{font-size:.72rem}.palette .item.header{align-items:end;height:2rem}.palette .item.header p{height:1rem;color:var(--bg-dull);justify-content:start;align-items:center;padding:0 0 .2rem .2rem;font-size:.6rem;line-height:.8rem;display:flex}.palette .item.header .meta{width:5.7rem}.palette .item.new{align-items:center;padding:.2rem 0 .2rem .2rem}.palette .item.new button{background-color:var(--add);height:1.2rem;color:var(--bg);align-items:center;gap:.1rem;padding:0 .2rem 0 .1rem;display:flex}.palette .item.new button p,.palette .item.new button .icon{font-size:.8rem}.palette div:has(.edit-item){container:edit-palette-item-container/inline-size}.palette .edit-item{color:var(--bg);background-color:#fff;grid-template:"preview coords space"minmax(0,1fr)"preview coords other"fit-content(100%)/1.25rem 6.25rem minmax(0,1fr);align-self:stretch;min-width:10rem;max-width:20rem;height:3.2rem;display:grid}@container edit-palette-item-container (inline-size<=15.25rem){.palette .edit-item{grid-template:"space space space space"minmax(0,1fr)"preview coords other."3.2rem/1.25rem minmax(5.55rem,6.25rem) minmax(3.2rem,3.6rem) minmax(0,1fr);height:4.8rem}}.palette .edit-item .preview{grid-area:preview}.palette .edit-item .coords{grid-area:coords}.palette .edit-item .space{grid-area:space}.palette .edit-item .actions-and-warning{grid-area:other}.palette .edit-item .preview{flex-direction:column;align-items:stretch;display:flex}.palette .edit-item .preview .now,.palette .edit-item .preview .prev{height:50%}.palette .edit-item .coords{flex-direction:column;height:3.2rem;display:flex}.palette .edit-item .coords .coord{flex-direction:row;flex:1 0 0;display:flex}.palette .edit-item .coords .coord .label,.palette .edit-item .coords .coord input{align-items:center;font-size:.8rem;line-height:1rem;display:flex}.palette .edit-item .coords .coord .label{text-align:right;background-color:var(--secondary-brighter);width:1.6rem;color:var(--primary);justify-content:end;padding-right:.25rem}.palette .edit-item .coords .coord input{text-align:left;background-color:var(--primary);color:var(--bg);flex:1 0 0;justify-content:start;padding-left:.2rem}.palette .edit-item select.space{background-color:var(--primary);height:1.2rem;color:var(--bg);margin-left:.4rem}@container edit-palette-item-container (inline-size<=15.25rem){.palette .edit-item select.space{margin:0}}.palette .edit-item .actions-and-warning{flex-direction:row;margin-left:.4rem;display:flex}@container edit-palette-item-container (inline-size<=15.25rem){.palette .edit-item .actions-and-warning{flex-direction:column;justify-content:end;margin-left:min(.4rem,100% - 3.2rem)}}.palette .edit-item .actions-and-warning button{justify-content:center;align-items:center;width:3.2rem;height:1.33333rem}.palette .edit-item .actions-and-warning button.submit{background-color:var(--accent);color:var(--primary)}.palette .edit-item .actions-and-warning button.cancel{color:var(--bg);background-color:#f4f4f3}.palette .edit-item .actions-and-warning .out-of-gamut{align-self:stretch;align-items:center;padding-left:.4rem;display:flex}.palette .edit-item .actions-and-warning .out-of-gamut img{width:1rem;height:1rem}.palette .grid{grid-auto-rows:max-content;grid-auto-flow:column;grid-template-columns:repeat(var(--rows), minmax(10rem, 1fr));width:min(100%, calc(var(--rows) * 20rem));height:fit-content;display:grid}.palette .grid-config{color:var(--secondary);align-items:center;gap:4px;padding:.4rem 0;display:flex}.palette .grid-config label,.palette .grid-config input{color:var(--secondary);align-items:center;font-size:.8rem;line-height:1.2rem;display:flex}.palette .grid-config label{gap:.2rem}.palette .grid-config input{text-align:left;background-color:var(--white);justify-content:start;padding-left:.2rem}.palette{background-color:var(--primary);padding:0 12px}*,:before,:after{box-sizing:border-box;background-repeat:no-repeat}:before,:after{-webkit-text-decoration:inherit;text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;overflow-wrap:break-word;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;line-height:1.5}:where(body){margin:0}:where(h1){margin:.67em 0;font-size:2em}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(nav li):before{content:"​";float:left}:where(pre){font-family:monospace;font-size:1em;overflow:auto}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,select){margin:0}:where(button,[type=button i],[type=reset i],[type=submit i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;margin:0}:where([type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){color:#000;background-color:#fff;border:solid;width:fit-content;height:fit-content;margin:auto;padding:1em;position:absolute;left:0;right:0}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy=true i]){cursor:progress}:where([aria-controls]){cursor:pointer}:where([aria-disabled=true i],[disabled]){cursor:not-allowed}:where([aria-hidden=false i][hidden]){display:initial}:where([aria-hidden=false i][hidden]:not(:focus)){clip:rect(0, 0, 0, 0);position:absolute}@font-face{font-family:Atkinson Hyperlegible Next;font-weight:200 800;font-style:normal;font-variant-numeric:lining-nums proportional-nums;src:url(/assets/AtkinsonHyperlegibleNext-VariableFont_wght-CEpLVe_v.ttf)format("truetype")}@font-face{font-family:Atkinson Hyperlegible Next;font-weight:200 800;font-style:italic;src:url(/assets/AtkinsonHyperlegibleNext-Italic-VariableFont_wght-DtWedsAp.ttf)format("truetype")}@font-face{font-family:Questrial;font-weight:400;font-style:normal;src:url(/assets/Questrial-Regular-BGISleCW.ttf)format("truetype")}@font-face{font-family:Material Icons;font-weight:400;font-style:normal;src:url(/assets/MaterialIconsOutlined-Regular-C9WY0n77.otf)format("opentype")}:root{--brown-100:#fff8e5;--brown-200:#d5c8ae;--brown-300:#ad9a7a;--brown-400:#9a8361;--brown-500:#876d49;--brown-600:#755731;--brown-700:#634217;--brown-800:#3d2412;--brown-900:#1d0d08;--deep-green:#1c6c00;--white:#fff;--blue:#76b9e8;--yellow:#ecc800;--green:#86c23c;--red:#fa793a;--primary:var(--brown-100);--primary-dull:var(--brown-200);--primary-duller:var(--brown-300);--bg:var(--brown-900);--bg-dull:var(--brown-800);--secondary-brighter:var(--brown-500);--secondary-bright:var(--brown-600);--secondary:var(--brown-700);--secondary-dull:var(--brown-800);--accent:var(--deep-green);--add:var(--blue);--delete:var(--red);--edit:var(--yellow);--copy:var(--green);--text:var(--primary);--sans:"Atkinson Hyperlegible Next", Verdana;--heading:"Questrial", Verdana;--mono:"Atkinson Hyperlegible Next", monospace;box-sizing:border-box;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}body{margin:0}#root{text-align:left;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:100vw;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);font-weight:500}h2{margin:0 0 -2px;padding:0;font-size:1.25em;line-height:1.5em}p{margin:0}code{font-family:var(--mono);color:var(--text-h);background:var(--code-bg);display:inline-flex}input,select,button{font-family:var(--sans);border:none;margin:0;padding:0}button{cursor:pointer}.icon{text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;font-family:Material Icons;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}