*,:after,:before{box-sizing:border-box}:root{--csstools-color-scheme--light:initial;color-scheme:light dark;--bg-color:Canvas;--text-color:CanvasText;--accent-color:#3986e4;--page-padding:calc(max(.75rem, min(2.5vmin, 2rem)));--gap:calc(max(.75rem, min(2vmin, 1.5rem)));--sidebar-width:calc(max(13rem, min(26vw, 20rem)));--result-width:calc(max(12rem, min(26vw, 20rem)))}@supports(width:1vi){:root{--sidebar-width:calc(max(13rem, min(26vi, 20rem)));--result-width:calc(max(12rem, min(26vi, 20rem)))}}@media(prefers-color-scheme:dark){:root{--csstools-color-scheme--light:  }}body{display:grid;grid-template-areas:"title" "controls" "stage" "result";grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-gap:calc(max(.75rem,min(2vmin,1.5rem)));grid-gap:var(--gap);gap:calc(max(.75rem,min(2vmin,1.5rem)));gap:var(--gap);height:100svb;padding:calc(max(.75rem,min(2.5vmin,2rem)));padding:var(--page-padding);overflow:hidden;background-color:Canvas;background-color:var(--bg-color);color:CanvasText;color:var(--text-color);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}body,h1{margin:0}h1{grid-area:title;font-size:calc(max(1.1rem,min(3vmin,1.5rem)));font-weight:600;text-align:center}.toolbar{display:grid;grid-area:controls;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));grid-gap:.75rem calc(max(.75rem,min(2vmin,1.5rem)));grid-gap:.75rem var(--gap);gap:.75rem calc(max(.75rem,min(2vmin,1.5rem)));gap:.75rem var(--gap);align-content:start;font-size:calc(max(.75rem,min(1.5vmin,.9rem)))}.toolbar label{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name value" "track track";align-items:baseline;grid-gap:0 .5rem;gap:0 .5rem;min-width:0}.toolbar .toolbar__name{grid-area:name;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar output{grid-area:value;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:600}.toolbar input[type=range]{grid-area:track;width:100%;margin:.15rem 0 0;accent-color:#3986e4;accent-color:var(--accent-color)}.toolbar .toolbar__spaces{display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .75rem;margin:0;padding:.25rem .75rem;border:1px solid color-mix(in srgb,canvastext 25%,transparent);border-radius:.5rem}.toolbar .toolbar__spaces legend{padding-left:.25rem;padding-right:.25rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,CanvasText 65%,transparent)}@supports(color:color-mix(in lch,red,blue)){.toolbar .toolbar__spaces{border:1px solid color-mix(in srgb,var(--text-color) 25%,transparent)}.toolbar .toolbar__spaces legend{color:color-mix(in srgb,var(--text-color) 65%,transparent)}}.toolbar .toolbar__spaces label{display:inline-flex;align-items:center;gap:.25rem;cursor:pointer}.toolbar .toolbar__spaces input[type=radio]{margin:0;accent-color:#3986e4;accent-color:var(--accent-color)}.wheel-stage{display:grid;grid-area:stage;align-items:center;justify-items:center;place-items:center;min-height:0;min-width:0;container-type:size}#wheel{width:calc(min(100cqw,100cqb));height:calc(min(100cqw,100cqb));overflow:visible;contain:layout paint}#wheel path{stroke:Canvas;stroke:var(--bg-color);stroke-width:.2;stroke-linejoin:round;cursor:pointer}#wheel path[data-selected]{paint-order:fill stroke;stroke:CanvasText;stroke:var(--text-color);stroke-width:.9}.result{display:flex;grid-area:result;flex-direction:column;gap:.5rem;min-width:0;padding:.75rem;background-color:color-mix(in oklab,Canvas 92%,CanvasText 8%);border:1px solid color-mix(in srgb,canvastext 18%,transparent);border-radius:.75rem}.result .result__title{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,CanvasText 65%,transparent)}@supports(color:color-mix(in lch,red,blue)){.result{background-color:color-mix(in oklab,var(--bg-color) 92%,var(--text-color) 8%);border:1px solid color-mix(in srgb,var(--text-color) 18%,transparent)}.result .result__title{color:color-mix(in srgb,var(--text-color) 65%,transparent)}}.result .result__empty{margin:0;font-size:.85rem;color:color-mix(in srgb,CanvasText 55%,transparent)}.result .result__swatch{display:grid;flex:1 1 auto;align-items:center;justify-items:center;place-items:center;min-height:0;width:100%;overflow:hidden;border-radius:.5rem;background-color:transparent;background-color:var(--swatch,transparent);--tile-gap:0.5rem;--tile-size:calc(max(.75rem, min(12cqb, 2.5rem)));container-type:size}.result .columns{display:flex;flex-direction:column;justify-content:safe center;width:100%;max-height:100%;margin:0;padding:var(--tile-gap);gap:var(--tile-gap);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,CanvasText 45%,transparent) transparent;list-style:none}@supports(color:color-mix(in lch,red,blue)){.result .result__empty{color:color-mix(in srgb,var(--text-color) 55%,transparent)}.result .columns{scrollbar-color:color-mix(in srgb,var(--text-color) 45%,transparent) transparent}}.result .columns__column{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:0;padding:0}.result .columns__label{margin:0;color:#fff;font-size:.55rem;font-weight:600;letter-spacing:.04em;text-align:center;text-transform:uppercase;mix-blend-mode:difference}.result .bands{display:grid;grid-template-columns:repeat(auto-fill,var(--tile-size));justify-content:center;max-width:100%;margin:0;padding:0;grid-gap:var(--tile-gap);gap:var(--tile-gap);list-style:none}.result .band{height:var(--tile-size);background-color:transparent;background-color:var(--swatch,transparent);border-radius:.125rem;outline:1px solid color-mix(in srgb,CanvasText 25%,transparent);outline-offset:-1px}@supports(color:color-mix(in lch,red,blue)){.result .band{outline:1px solid color-mix(in srgb,var(--text-color) 25%,transparent)}}.result .result__value{font-family:ui-monospace,monospace;font-size:.85rem;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:center;word-wrap:anywhere}@media(orientation:landscape){body{grid-template-areas:"title title title" "controls stage result";grid-template-rows:auto minmax(0,1fr);grid-template-columns:calc(max(13rem,min(26vw,20rem))) minmax(0,1fr) calc(max(12rem,min(26vw,20rem)));grid-template-columns:calc(max(13rem,min(26vi,20rem))) minmax(0,1fr) calc(max(12rem,min(26vi,20rem)));grid-template-columns:var(--sidebar-width) minmax(0,1fr) var(--result-width)}h1{text-align:left}.toolbar{grid-template-columns:minmax(0,1fr);align-content:center}.result{overflow:hidden}}@media(orientation:portrait){body{grid-template-rows:auto auto minmax(0,1fr) calc(min(30svb,16rem))}.result{display:grid;grid-template-areas:"title" "swatch" "value";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-gap:.25rem;gap:.25rem}.result .result__empty{grid-column:1/-1}.result .result__swatch{grid-area:swatch;justify-items:stretch;align-items:stretch}.result .result__value{grid-area:value;text-align:center}.result .result__title{grid-area:title}.result .columns{flex-direction:row;justify-content:safe start;width:100%;height:100%;min-width:0;overflow-x:auto;overflow-y:hidden;align-items:center}.result .columns>li{max-height:100%;min-height:0;flex:0 0 auto}.result .columns__column{align-items:center;justify-content:center}.result .columns__label{white-space:nowrap}.result .bands{display:flex;flex-wrap:nowrap;align-items:center;max-height:100%}.result .band{flex:0 0 var(--tile-size);width:var(--tile-size)}}