#app{padding:20px 10px;margin:0 auto;text-align:center}input{max-width:100%}input[type=text],input[type=number]{color:var(--picker-input-color);box-shadow:var(--picker-input-box-shadow);background-color:var(--picker-input-bg);text-shadow:var(--picker-text-shadow);border-radius:5px;border:none;transition:all .2s}input[type=text]:focus,input[type=number]:focus{outline:3px solid var(--picker-input-focus-ring);outline-offset:0px}input:invalid{background:var(--picker-input-invalid-bg);box-shadow:var(--picker-input-invalid-box-shadow);color:var(--picker-input-invalid-color)}input[data-copied]{background:var(--picker-input-copied-bg);color:var(--picker-input-copied-color)}input[type=text]{text-align:center;padding:8px .6em;font-size:1em}input[type=number]{text-align:right;padding:3px 4px;font-size:.9em}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{display:none}.main{display:grid;gap:12px}.color-picker{display:grid;grid-auto-flow:row;grid-auto-columns:minmax(100px,500px);gap:8px}.color-slider{display:flex;gap:8px;flex-direction:column}.banner{display:grid;gap:8px;text-transform:uppercase;margin:10px 0 15px;font-weight:200}.banner h1{color:#fff;font-size:3.2em;line-height:.8em;margin:-5px 0 5px;font-family:Raleway,serif;font-weight:800;line-height:1em;text-shadow:var(--picker-dynamic-accent-lightened) 0px 1px 0px,var(--picker-dynamic-accent-lightened) 0px 2px 0px,var(--picker-dynamic-accent-lightened) 0px 3px 0px,var(--picker-dynamic-accent-lightened) 0px 4px 0px,var(--picker-dynamic-accent-lightened) 0px 5px 0px,rgba(0,0,0,.2) 0px 5px 1px,rgba(0,0,0,.3) 0px 0px 10px,rgba(0,0,0,.4) 0px 3px 5px,rgba(0,0,0,.5) 0px 6px 5px}.preamble{font-size:1.25em;letter-spacing:.1em;text-shadow:var(--picker-text-shadow)}.preamble:before,.preamble:after{width:4.5em;height:0px;display:inline-block;border-bottom:1px solid currentColor;box-shadow:var(--picker-text-shadow-color) 0 1px 1px;position:relative;top:-.3em;margin:0 .5em}.credit{font-size:.7em;color:#ffffff4d;font-style:normal;display:block;margin:0;text-transform:uppercase;font-weight:400;letter-spacing:.4em;background:var(--picker-dynamic-accent);background-clip:text;-webkit-background-clip:text}@keyframes rainbow-move{0%{background-position:0 0}to{background-position:1000px 1000px}}.credit a{color:#fff9}@media (prefers-color-scheme: light){.credit{color:#0000004d}.credit a{color:#0006}}.credit a:hover{background-image:var(--picker-rainbow);background-repeat:repeat;background-size:100%;text-shadow:none;color:transparent;animation:rainbow-move 15s linear infinite;background-clip:text;-webkit-background-clip:text}@media screen and (min-width: 550px){.banner h1{font-size:3.8em}input[name=hex]{text-align:left}.main{grid-auto-columns:125px 1fr;grid-auto-flow:column}.color-slider{display:grid;grid-auto-columns:minmax(180px,500px) 45px;grid-auto-flow:column;align-items:center}input[type=number]{display:initial}}@media screen and (min-width: 740px){.preamble:before,.preamble:after{content:""}}.slider-choices{display:grid;gap:8px;grid-template-columns:repeat(3,min-content);place-content:center;margin:0 auto 20px}.slider-choices label{cursor:pointer}.slider-choices input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:0;margin:0;height:0;width:0;position:absolute;z-index:-1}.slider-choices input+div{font-size:.9em;background-color:var(--picker-input-bg);box-shadow:var(--picker-input-box-shadow);text-shadow:var(--picker-text-shadow);border-radius:15px;border:none;position:relative;padding:2px 10px 2px 25px;-webkit-user-select:none;user-select:none}.slider-choices input:focus+div{outline:3px solid var(--picker-input-focus-ring);outline-offset:0px}.slider-choices input+div:before{content:"";position:absolute;width:9px;height:9px;border-radius:50%;left:9px;top:8px;box-shadow:0 0 0 2px var(--picker-dynamic-accent);opacity:.6;transition:opacity .2s}@media (prefers-color-scheme: light){.slider-choices input+div:before{mix-blend-mode:multiply}}.slider-choices input:checked+div:before{background-color:var(--picker-dynamic-accent);opacity:1}.color-swatch{position:relative;display:block;background-color:var(--picker-color);box-shadow:var(--picker-slider-box-shadow);border-radius:12px;height:116px;margin-bottom:8px}.color-pickers{display:grid;gap:25px}.color-code{position:relative}.color-code input{width:100%}button.copy-code{position:absolute;right:-1px;top:0;bottom:0;background:transparent;padding:0 10px;font-size:1.6em;border:transparent;cursor:pointer}button.copy-code:focus{outline:3px solid var(--picker-input-focus-ring);border-radius:5px;outline-offset:0px}button.copy-code svg{opacity:.5;fill:currentColor;transition:opacity .2s;transform:translateZ(0);display:block;position:relative}button.copy-code:hover svg{opacity:1}button.copy-code[data-copied] svg{fill:var(--picker-input-copied-color);opacity:1}.slider-track{height:20px;background-image:var(--picker-track-check-gradient),var(--picker-track-check-gradient);background-size:20px 20px;background-position:0px 0px,10px 10px;border-radius:15px;position:relative}.slider-track:after{z-index:-1;background:var(--picker-track-bg);position:absolute;top:-3px;bottom:-3px;left:-4px;right:-4px;border-radius:15px;box-shadow:var(--picker-track-box-shadow)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:var(--picker-slider-box-shadow);height:20px;border-radius:15px;width:100%;margin:0}input[type=range]:focus{outline:none}input[type=range][disabled]{opacity:.5}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-moz-range-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-ms-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;border:none;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:25px;width:25px;border-radius:50%;cursor:ew-resize;transition:box-shadow .2s;box-shadow:var(--picker-thumb-box-shadow)}input[type=range]:hover::-webkit-slider-thumb{box-shadow:var(--picker-thumb-box-shadow-hover)}input[type=range]:focus::-webkit-slider-thumb{box-shadow:var(--picker-thumb-box-shadow-focus);transition-duration:0s}input[type=range]::-moz-range-thumb{-moz-appearance:none;height:25px;width:25px;border-radius:50%;cursor:ew-resize;box-shadow:var(--picker-thumb-box-shadow)}input[type=range]::-ms-thumb{-ms-appearance:none;height:25px;width:25px;border-radius:50%;cursor:ew-resize;box-shadow:var(--picker-thumb-box-shadow)}:root{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--picker-track-bg: rgba(0, 0, 0, .5);--picker-track-check: rgba(255, 255, 255, .2);--picker-track-check-alt: transparent;--picker-track-check-gradient: linear-gradient( 45deg, var(--picker-track-check) 25%, var(--picker-track-check-alt) 25%, var(--picker-track-check-alt) 75%, var(--picker-track-check) 75%, var(--picker-track-check) );--picker-track-box-shadow: rgba(0, 0, 0, .3) 0 1px inset, rgba(255, 255, 255, .2) 0 1px;--picker-slider-box-shadow: rgba(255, 255, 255, .3) 0 1px 1px inset, rgba(0, 0, 0, .6) 0 0 0 1px;--picker-input-box-shadow: rgba(255, 255, 255, .1) 0 1px 0, rgba(0, 0, 0, .8) 0 1px 7px 0px inset;--picker-input-bg: rgba(0, 0, 0, .3);--picker-input-color: rgba(255, 255, 255, .8);--picker-input-invalid-bg: rgba(102, 0, 0, .3);--picker-input-invalid-box-shadow: rgba(255, 127, 127, .1) 0 1px 0, rgba(0, 0, 0, .8) 0 1px 7px 0px inset;--picker-input-invalid-color: #ff0f0f;--picker-input-copied-bg: rgba(10, 102, 0, .3);--picker-input-copied-box-shadow: rgba(140, 255, 127, .1) 0 1px 0, rgba(0, 0, 0, .8) 0 1px 7px 0px inset;--picker-input-copied-color: #27ff0f;--picker-thumb-box-shadow: 0 0 0 3px rgba(var(--picker-red), var(--picker-green), var(--picker-blue), .3) inset, 0 0 0 3px rgba(255, 255, 255, 1) inset, 0 0 0 4px rgb(0 0 0 / .5) inset, 0 0 0 1px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .3);--picker-thumb-box-shadow-hover: 0 0 0 3px rgba(var(--picker-red), var(--picker-green), var(--picker-blue), .1) inset, 0 0 0 3px rgba(255, 255, 255, 1) inset, 0 0 0 4px rgb(0 0 0 / .5) inset, 0 0 0 1px rgb(0 0 0 / .5);--picker-thumb-box-shadow-focus: 0 0 0 3px rgba(var(--picker-red), var(--picker-green), var(--picker-blue), .1) inset, 0 0 0 3px rgba(255, 255, 255, 1) inset, 0 0 0 4px rgb(0 0 0 / .5) inset, 0 0 0 1px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / 1), 0 0 0 4px hwb(var(--picker-hue) 25% 0%), 0 0 0 5px rgb(0 0 0 / .3);--picker-dynamic-accent: hwb( var(--picker-hue) calc(clamp(0, var(--picker-whiteness), 55)*1%) calc(clamp(0, var(--picker-blackness), 15)*1%) );--picker-dynamic-accent-lightened: color-mix( in oklab, #666 30%, hwb( var(--picker-hue) calc(clamp(0, var(--picker-whiteness), 55)*1%) calc(clamp(0, var(--picker-blackness), 50)*1%) ) );--picker-dynamic-accent-footer: hwb(var(--picker-hue) 25% 0%);--picker-input-focus-ring: hwb(var(--picker-hue) 25% 0%);--picker-dark-stripe: rgba(0, 0, 0, .1);--picker-text-shadow-color: rgba(0, 0, 0, .5);--picker-text-shadow: var(--picker-text-shadow-color) 0 2px 1px}*{box-sizing:border-box}a{font-weight:500;color:var(--picker-dynamic-accent);text-decoration:inherit}a:hover{color:#535bf2}html{background-image:linear-gradient(-45deg,var(--picker-dark-stripe) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,var(--picker-dark-stripe) 50%,var(--picker-dark-stripe) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));background-size:80px 80px}body{margin:0;display:grid;min-width:220px;min-height:100vh}footer{text-align:left;text-shadow:var(--picker-text-shadow)}.footer-links{display:flex;gap:10px;margin:2em auto;justify-content:center;align-items:center;font-size:.9em;text-align:center}.footer-links *{opacity:.8}.footer-links a{color:var(--picker-dynamic-accent-footer)}.footer-links a:hover{color:var(--picker-dynamic-accent);opacity:1;text-decoration:underline}.footer-links .divider{opacity:.2;font-size:1.3em}.footer-links button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;font-size:inherit;cursor:help;padding:0;margin:0;text-shadow:var(--picker-text-shadow)}.footer-links button:hover{color:var(--picker-dynamic-accent)}.footer-links button:focus{outline:3px solid var(--picker-input-focus-ring);border-radius:5px;outline-offset:3px}#explainer{max-width:630px}#explainer[data-visible=false]{display:none}code{font-family:system-mono}code,h3{color:var(--picker-dynamic-accent-footer)}abbr{opacity:.8;cursor:help;border-bottom:1px dotted;text-decoration:none}abbr:hover{opacity:1;mix-blend-mode:screen}@font-face{font-family:system-mono;font-style:normal;font-weight:400;src:local(".SFNS-Mono"),local("ui-monospace"),local("Cascadia Mono"),local("Segoe UI Mono"),local("Ubuntu Mono"),local("Roboto Mono"),local("Menlo"),local("Monaco"),local("Consolas"),local("monospace")}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#efefef;--picker-track-bg: rgba(0, 0, 0, .05);--picker-track-check: rgba(0, 0, 0, .2);--picker-track-box-shadow: rgba(0, 0, 0, .3) 0 1px inset, rgba(255, 255, 255, .6) 0 1px;--picker-slider-box-shadow: rgba(255, 255, 255, .3) 0 1px 1px inset, rgba(0, 0, 0, .4) 0 0 0 1px;--picker-input-box-shadow: #fff 0 1px 1px, rgba(0, 0, 0, .2) 0 1px 5px 0px inset;--picker-input-bg: rgba(0, 0, 0, .05);--picker-input-color: rgba(0, 0, 0, .8);--picker-input-invalid-bg: rgba(214 0 0 / .19);--picker-input-invalid-box-shadow: rgba(214 0 0 / .1) 0 1px 0, rgba(138 0 0 / .8) 0 1px 7px 0px inset;--picker-input-invalid-color: #d60000;--picker-input-copied-bg: rgba(21 214 0 / .19);--picker-input-copied-box-shadow: rgba(21 214 0 / .1) 0 1px 0, rgba(14 138 0 / .8) 0 1px 7px 0px inset;--picker-input-copied-color: #11a800;--picker-dark-stripe: rgba(0, 0, 0, .03);--picker-text-shadow-color: rgba(255, 255, 255, 1);--picker-text-shadow: var(--picker-text-shadow-color) 0 1px 1px;--picker-dynamic-accent: hwb( var(--picker-hue) calc(clamp(0, var(--picker-whiteness), 35)*1%) calc(clamp(0, var(--picker-blackness), 45)*1%) );--white-mix-percentage: 50%;--picker-dynamic-accent-footer: hwb(var(--picker-hue) 0% 25%);--picker-input-focus-ring: hwb(var(--picker-hue) 0% 25%)}a:hover{color:#747bff}}