:root{--alwan-pattern:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'><path fill='%23D0D0D0' d='M0 0h10v10H0Z'/><path fill='%23fff' d='M0 10h10v10H0Z'/><path fill='%23D0D0D0' d='M10 10h10v10H10Z'/><path fill='%23fff' d='M10 0h10v10H10Z'/></svg>")}.alwan{--color:rgba(var(--rgb), var(--a));width:260px;max-width:260px;background:var(--background,#fff);border:1px solid var(--outer-border-color,#ccc);overflow-y:auto}.alwan *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.alwan:not(.alwan--open){visibility:hidden}.alwan:not(.alwan--open)[data-display=block]{overflow:hidden;height:0;border:0}.alwan[data-theme=dark]{--background:#111;--foreground:#ccc;--outer-border-color:#aaa;--button-hover-background:#444;--border-color:#34373a;--thumb-background:#151515;--thumb-hover-background:#242424;--thumb-hover-border-color:#555;--label-color:#d8d8d8;--input-background:#181818;--input-hover-background:#272727;--input-hover-border-color:#484b4d;--swatches-background:#151515}.alwan[data-display=popover]{position:fixed;width:100%;top:0;left:0;z-index:999999;border:0;-webkit-box-shadow:0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);-moz-box-shadow:0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12);box-shadow:0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12)}.alwan__container{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;padding:10px 15px;border-top:1px solid var(--border-color,#ccc)}.alwan__container>*{width:100%}.alwan__palette{overflow:hidden;height:136px;outline:0;-ms-touch-action:-ms-none;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:crosshair;background:-webkit-linear-gradient(top,transparent,#000),-webkit-linear-gradient(left,#fff,hsl(var(--h,0),100%,50%));background:-moz-linear-gradient(top,transparent,#000),-moz-linear-gradient(left,#fff,hsl(var(--h,0),100%,50%));background:-o-linear-gradient(top,transparent,#000),-o-linear-gradient(left,#fff,hsl(var(--h,0),100%,50%));background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,hsl(var(--h,0),100%,50%))}.alwan__palette:focus .alwan__marker{-webkit-box-shadow:0 0 1px 2px#117ce0;-moz-box-shadow:0 0 1px 2px#117ce0;box-shadow:0 0 1px 2px#117ce0}.alwan__marker{position:relative;top:-8px;left:-8px;width:16px;height:16px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;background:rgba(0,0,0,0);border:2px solid#fff;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,.3);box-shadow:0 0 1px 1px rgba(0,0,0,.3);cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;cursor:-webkit-grab}.alwan__preview{width:42px;height:42px;margin-right:15px;border:1px solid var(--border-color,#ccc);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.alwan__preview .alwan__copy-button{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;color:#fff;opacity:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:0}.alwan__preview .alwan__copy-button:focus,.alwan__preview .alwan__copy-button:hover:not(:disabled){opacity:1;z-index:100;background-color:rgba(0,0,0,.6)}.alwan__preview .alwan__copy-button:focus-visible{border:0}.alwan__slider{--hue-track:linear-gradient( 90deg, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000 );--alpha-track:linear-gradient(90deg, transparent, rgb(var(--rgb))), var(--alwan-pattern);display:block;width:100%;height:15px;background-color:rgba(0,0,0,0);margin:0;padding:0;cursor:pointer;outline:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}.alwan__slider:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;cursor:-webkit-grabbing}.alwan__slider::-webkit-slider-runnable-track{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;width:100%;height:15px;border:0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}.alwan__slider::-moz-range-track{width:100%;height:15px;border:0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}.alwan__slider:focus-visible::-webkit-slider-runnable-track{outline:2px solid rgba(17,124,224,.5);outline-offset:2px}.alwan__slider:focus-visible::-moz-range-track{outline:2px solid rgba(17,124,224,.5);outline-offset:2px}.alwan__slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;margin-top:-2.5px;height:20px;width:20px;border:1px solid#999;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;background-color:var(--thumb-background,#fff);-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,.3);box-shadow:0 0 1px 1px rgba(0,0,0,.3)}.alwan__slider::-moz-range-thumb{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;height:20px;width:20px;border:1px solid#999;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;background-color:var(--thumb-background,#fff);-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,.3);-moz-box-shadow:0 0 1px 1px rgba(0,0,0,.3);box-shadow:0 0 1px 1px rgba(0,0,0,.3)}.alwan__slider:not(:disabled)::-webkit-slider-thumb:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;cursor:-webkit-grab;border-color:var(--thumb-hover-border-color,#555);background:var(--thumb-hover-background,#f0f0f0)}.alwan__slider:not(:disabled)::-moz-range-thumb:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;cursor:-webkit-grab;border-color:var(--thumb-hover-border-color,#555);background:var(--thumb-hover-background,#f0f0f0)}.alwan__slider:active:not(:disabled)::-webkit-slider-thumb{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;cursor:-webkit-grabbing;outline:5px solid rgba(17,124,224,.3)}.alwan__slider:active:not(:disabled)::-moz-range-thumb{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;cursor:-webkit-grabbing;outline:5px solid rgba(17,124,224,.3)}.alwan__slider:focus::-webkit-slider-thumb{border-color:#117ce0}.alwan__slider:focus::-moz-range-thumb{border-color:#117ce0}.alwan__slider:disabled{opacity:.5;cursor:default}.alwan__hue{direction:rtl}.alwan__hue::-webkit-slider-runnable-track{background:var(--hue-track)}.alwan__hue::-moz-range-track{background:var(--hue-track)}.alwan__alpha{margin-top:14px}.alwan__alpha::-webkit-slider-runnable-track{background:var(--alpha-track)}.alwan__alpha::-moz-range-track{background:var(--alpha-track)}.alwan__inputs{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.alwan__inputs label{width:100%;text-align:center;margin-right:4px;text-transform:uppercase;color:var(--label-color,#555);cursor:pointer;line-height:1;font-family:system-ui;font-size:13px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.alwan__input{display:block;width:100%;padding:8px 0;text-align:center;color:var(--foreground,#333);font-size:14px;font-family:monospace;border:1px solid var(--border-color,#ccc);margin-bottom:3px;background-color:var(--input-background,#fafafa);line-height:1;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:border-color.2s,background-color.2s;-moz-transition:border-color.2s,background-color.2s;-o-transition:border-color.2s,background-color.2s;transition:border-color.2s,background-color.2s}.alwan__input::-moz-selection{color:#fff;background-color:#117ce0}.alwan__input::selection{color:#fff;background-color:#117ce0}.alwan__input:focus{outline:0;border-color:#117ce0;background-color:var(--background,#fff)}.alwan__input:focus+span{color:#117ce0}.alwan__input:hover:not(:focus,:disabled){background-color:var(--input-hover-background,#f0f0f0);border-color:var(--input-hover-border-color,#a8a8a8)}.alwan__input:disabled,.alwan__input:disabled+span{opacity:.5}.alwan__swatches{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:var(--swatches-background,#f5f5f5);padding:10px 15px 0 15px;max-height:100px;overflow-y:auto;border-top:1px solid var(--border-color,#ccc)}.alwan__button{display:inline-block;width:auto;background:rgba(0,0,0,0);color:var(--foreground,#333);border:1px solid rgba(0,0,0,0);cursor:pointer;padding:8px 4px;-webkit-transition:background-color.2s ease-in-out;-moz-transition:background-color.2s ease-in-out;-o-transition:background-color.2s ease-in-out;transition:background-color.2s ease-in-out;outline:0}.alwan__button:disabled{opacity:.5;cursor:not-allowed}.alwan__button:hover:not(:disabled){background-color:var(--button-hover-background,#f0f0f0)}.alwan__button:focus-visible:not(.alwan__reference){border-color:#117ce0}.alwan__button svg{fill:currentColor;pointer-events:none;vertical-align:middle}.alwan__swatch{width:22px;height:22px;margin:0 5px 10px 5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.alwan__swatch:hover:not(:disabled){-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.alwan__swatch:focus{outline:1px solid var(--color);outline-offset:1px}.alwan__reference{width:26px;height:26px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:3px solid#f5f5f5;outline:1px solid#333;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.alwan__reference:focus,.alwan__reference:focus-visible{outline-color:#117ce0;-webkit-box-shadow:0 0 2px 2px#117ce0;-moz-box-shadow:0 0 2px 2px#117ce0;box-shadow:0 0 2px 2px#117ce0}.alwan__copy-button{margin-right:15px}.alwan__backdrop::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999999999;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;cursor:-webkit-grabbing}.alwan__swatch,.alwan__preview,.alwan__reference{position:relative;background:var(--alwan-pattern);background-clip:padding-box;overflow:hidden;padding:0}.alwan__swatch::before,.alwan__preview::before,.alwan__reference::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color)}.alwan__toggle-button{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;padding:0;height:10px;border-top:1px solid var(--border-color,#ccc);overflow:hidden}.alwan--collapse.alwan__swatches{display:none}.alwan--collapse+.alwan__toggle-button svg{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}