:root{--font-base:"Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-code:"Monaspace Argon", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;--body-bg:light-dark(#f8f8f6,#212121);--common-base:light-dark(#f9f9f9,#212121);--common-base-rev:light-dark(#212121,#efeeea);--tooltip-bg-color:light-dark(#f8f8f6,#353535);--modal-bg-color:light-dark(#efeeea,color-mix(in srgb, var(--body-bg) 95%, var(--common-base-rev) 5%));--tooltip-text-color:light-dark(#212121,#ededed);--tooltip-shadow-color:light-dark(#00000015,#00000030);--tooltip-shadow-border:light-dark(#00000040,#00000030);--tooltip-hover:light-dark(#00000012,#00000012);--tooltip-hover-2:light-dark(#00000012,#ededed20);--text-color-0:light-dark(#212121,#f9f9f9);--text-color-1:light-dark(#212121,#ededed);--section-bg-1:light-dark(#21212109,#ededed10);--text-color-2:color-mix(in srgb, var(--text-color-1) 80%, var(--body-bg));--text-color-3:color-mix(in srgb, var(--text-color-1) 50%, var(--body-bg));--text-color-4:color-mix(in srgb, var(--text-color-1) 30%, var(--body-bg));--text-color-5:color-mix(in srgb, var(--text-color-1) 20%, var(--body-bg));--text-color-rev-1:var(--body-bg);--text-color-rev-2:color-mix(in srgb, var(--text-color-rev-1) 80%, #fff);--text-color-rev-3:color-mix(in srgb, var(--text-color-rev-1) 50%, #fff);--text-color-error:#fb423f;--common-border:color-mix(in srgb, var(--text-color-1) 10%, transparent);--common-border-5:color-mix(in srgb, var(--text-color-1) 50%, transparent);--nav-action-hover:light-dark(#2121210f,color-mix(in srgb, var(--common-base-rev) 7%, transparent));--nav-action-hover-2:light-dark(#2121210f,color-mix(in srgb, var(--common-base-rev) 20%, transparent));--border-color-1:light-dark(color-mix(in srgb, #000 10%, var(--body-bg)),color-mix(in srgb, #fff 6%, var(--body-bg)));--border-color-2:light-dark(color-mix(in srgb, #000 10%, var(--body-bg)),color-mix(in srgb, #fff 6%, var(--body-bg)));--border-color-3:light-dark(color-mix(in srgb, #212121 20%, var(--body-bg)),color-mix(in srgb, #fff 30%, var(--body-bg)));--border-color-5:light-dark(color-mix(in srgb, #212121 30%, var(--body-bg)),color-mix(in srgb, #fff 50%, var(--body-bg)));--border-color-6:light-dark(color-mix(in srgb, #212121 35%, var(--body-bg)),color-mix(in srgb, #fff 60%, var(--body-bg)));--border-color-9:light-dark(color-mix(in srgb, #212121 8%, var(--body-bg)),color-mix(in srgb, #fff 90%, var(--body-bg)));--border-color-11:light-dark(color-mix(in srgb, #212121 20%, var(--body-bg)),color-mix(in srgb, #fff 35%, var(--body-bg)));--border-color-12:light-dark(color-mix(in srgb, #212121 40%, var(--body-bg)),color-mix(in srgb, #fff 70%, var(--body-bg)));--border-color-rev-2:light-dark(color-mix(in srgb, #212121 12%, var(--body-bg)),color-mix(in srgb, #fff 20%, var(--body-bg)));--common-accent:light-dark(oklch(70.89% .185 75.67),oklch(76.89% .147 75.67));--default-common-accent:light-dark(oklch(70.89% .185 75.67),oklch(76.89% .147 75.67));--header-bg:color-mix(in srgb, #000 2%, var(--body-bg));--sidebar-bg:light-dark(#efeeea,color-mix(in srgb, #000 20%, var(--body-bg)));--modal-inner-bg:light-dark(#fff,color-mix(in srgb, #000 20%, var(--body-bg)));--input-placeholder:light-dark(var(--text-color-3),var(--text-color-3));--input-bg:light-dark(#21212114,#ffffff1a);--input-bg-focus:light-dark(color-mix(in srgb, #212121 13%, var(--body-bg)),#ffffff18);--dropdown-area-bg:light-dark(color-mix(in srgb, #212121 10%, var(--body-bg)),color-mix(in srgb, #fff 10%, var(--body-bg)));--dropdown-area-hover:var(--nav-action-hover);--dropdown-area-border:light-dark(#00000040,color-mix(in srgb, #fff 70%, var(--body-bg)));--omnibox-backdrop:blur(10px) saturate(60%);--omnibox-bg:light-dark(color-mix(in srgb, var(--common-base-rev) 10%, transparent 95%),color-mix(in srgb, var(--common-base-rev) 10%, transparent 95%));--l-multiplier:1.05;--c-multiplier:1.2;--text-color-accent-0:light-dark(oklch(calc(67.3% * var(--l-multiplier)) calc(.21 * var(--c-multiplier)) 25.039),oklch(67.3% .21 25.039));--text-color-accent-1:light-dark(oklch(calc(57.85% * var(--l-multiplier)) calc(.15 * var(--c-multiplier)) 349.06),oklch(57.85% .15 349.06));--text-color-accent-2:light-dark(oklch(calc(72.4% * var(--l-multiplier)) calc(.16 * var(--c-multiplier)) 19.59),oklch(72.4% .16 19.59));--text-color-accent-3:light-dark(#de9d77,#de9d77);--text-color-accent-5:light-dark(#ffb82e,#ffb82e);--text-color-accent-6:light-dark(#b8b9ee,#b8b9ee);--text-color-accent-7:light-dark(#88d2fc,#88d2fc);--text-color-accent-8:light-dark(oklch(calc(66.3% * var(--l-multiplier)) calc(.08 * var(--c-multiplier)) 200.71),oklch(66.3% .08 200.71));--text-color-accent-9:light-dark(#70d18c,#70d18c);--text-color-accent-10:light-dark(oklch(calc(69.1% * var(--l-multiplier)) calc(.12 * var(--c-multiplier)) 151.34),oklch(69.1% .12 151.34));--text-color-accent-11:light-dark(#5071a7,#5071a7);--promo-accent:light-dark(oklch(59.1% .12 151.34),oklch(69.1% .12 151.34));color-scheme:light dark;--ui-accent:#ccc}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}html{scroll-behavior:smooth}body{font-family:var(--font-base);color:var(--text-color-1);background-color:var(--body-bg);margin:0;font-size:14px;font-weight:700}a{color:var(--text-color-1);text-decoration:none}#app{grid-template-rows:1fr auto;row-gap:20px;height:100dvh;display:grid}header{grid-template-columns:55px 1fr;padding:20px 0 0 20px;display:none;& h1{font-size:2em;font-weight:800}& a{background-color:var(--modal-bg-color);color:var(--text-color-3);border-radius:6px;margin-left:10px;padding:4px 6px;font-size:.8rem;font-weight:500}}#palette{grid-template-columns:repeat(4,1fr);min-height:160px;margin:0;padding:0;list-style:none;display:grid;position:relative;& h2,& h3{text-align:center}& h2{opacity:.9;text-transform:uppercase;margin:0 0 10px;font-size:clamp(24px,3vw,36px);font-weight:900}& h3{opacity:.6;margin:0;font-size:.8rem;font-weight:700}& ul{margin:0;padding:0}& li{align-items:bottom;cursor:pointer;color-scheme:light;color:var(--text-color-1);flex-direction:column;justify-content:center;transition:background-color 50ms;display:flex;position:relative;&:after{opacity:0;content:"Copy to clipboard";pointer-events:none;background:#00000014;border-radius:5px;padding:5px 8px;font-size:11px;position:absolute;top:10px;left:10px}&:hover:after{opacity:1}&.copied{&:after{content:"Copied!"}}}& .lod{color:#fff;& h2{opacity:.97}}&:before,&:after{content:"";background-color:#0000001a;width:100%;height:1px;display:block;position:absolute;left:0}&:before{z-index:10;top:0}&:after{bottom:0}}footer{height:200px;margin:0 20px;& .footerSponsor{display:none}}#actions{border-bottom:1px solid #0000001a;flex-direction:row;margin-bottom:25px;padding-bottom:20px;display:flex;& li{flex-direction:row;align-items:center;margin-right:10px;display:flex;& span{margin-right:10px;font-weight:500;display:inline-block}&.separator{border-left:1px solid #0000001a;padding-left:20px}}& #reset-palette{display:none}& #reset-palette.show{display:flex}& a{border-radius:5px;justify-content:flex-start;align-items:center;height:35px;padding:0 10px;display:flex;&:hover{background-color:color-mix(in srgb, var(--ui-accent) 10%, transparent);text-decoration:none}&:active{background-color:color-mix(in srgb, var(--ui-accent) 20%, transparent)}}& svg{margin-right:6px}& #new-palette{background-color:var(--ui-accent);color-scheme:light;color:var(--text-color-rev-1);&:active{background-color:color-mix(in srgb, var(--ui-accent) 90%, transparent)}}}#adjustments{& li{grid-template-columns:170px 1fr;margin-bottom:20px;display:grid}& strong{font-weight:700}& em{background-color:var(--modal-bg-color);text-align:center;width:30px;color:var(--text-color-1);border-radius:4px;padding:2px 0;font-size:10px;font-style:normal;font-weight:400;display:inline-block}& #range-slider-hue.noUi-target{background:linear-gradient(90deg,#f65050 0%,#ffff5c 17%,#59ee59 33%,#4ae4e4 50%,#3f3fe5 66%,#ee56ee 83%,#f65050 100%)}& #range-slider-saturation.noUi-target{background:linear-gradient(to right, #eee 0%, var(--ui-accent) 80%)}& #range-slider-lightness.noUi-target{background:linear-gradient(90deg,#787878 0%,#eee 60%)}& .rangeSlider{margin-top:7px}& .noUi-target{height:4px;box-shadow:none;background:#eee;border:none;border-radius:0}& .noUi-handle{background:var(--ui-accent);box-shadow:0 0 0 2px var(--body-bg);border:none;border-radius:18px}& .noUi-horizontal .noUi-handle{cursor:grab;width:18px;height:18px;top:-7px}& .noUi-horizontal .noUi-handle:active{cursor:grabbing}& .noUi-handle:after,& .noUi-handle:before{display:none}}.s10{& #app{grid-template-rows:60px 1fr auto;row-gap:20px}& header{align-items:center;display:flex;& h1{align-items:center;margin-left:20px;display:flex}}& footer{grid-template-columns:1fr 320px;gap:20px;display:grid}& .footerSponsor{display:block}& #add-to-jsfiddle{display:none}}#carbon-responsive .carbon-poweredby,#carbonads #carbon-cover .carbon-footer{display:none}#carbon-responsive .carbon-text{font-size:12px;line-height:1.5}#carbon-responsive .carbon-responsive-wrap{background-color:initial;border:initial}#carbon-cover>a:first-child{border-radius:0;flex-flow:column;justify-content:flex-end}#carbon-cover a .carbon-large-image,#carbon-cover a:hover .carbon-large-image{width:25%}#carbon-cover .carbon-tagline{max-inline-size:initial}#carbon-cover .carbon-text{height:initial}#carbon-cover .carbon-logo img{width:40%}#carbon-cover .carbon-description{height:0}#carbon-cover:hover .carbon-description{height:initial;margin-bottom:1em}#carbon-cover .carbon-footer{max-width:max-content;margin:1ex 1ch}