.jarl-checkbox{position:relative;display:inline-flex;align-items:center;line-height:1;vertical-align:middle;cursor:pointer}.jarl-checkbox .jarl-checkbox__label{font-size:var(--jarl-checkbox-label-font-size,1rem);color:var(--jarl-checkbox-label-color,#111);-webkit-user-select:none;user-select:none;transition:color .12s ease 0s}.jarl-checkbox .jarl-checkbox__checkmark-container{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--jarl-checkbox-checkmark-width,1rem);height:var(--jarl-checkbox-checkmark-height,1rem);-webkit-user-select:none;user-select:none;background-color:var(--jarl-checkbox-checkmark-bg,transparent);border-color:var(--jarl-checkbox-checkmark-border-color,#111);border-style:var(--jarl-checkbox-checkmark-border-style,solid);border-width:var(--jarl-checkbox-checkmark-border-width,1px);border-radius:var(--jarl-checkbox-checkmark-border-radius,.25rem);transition:background-color .12s ease 0s,border-color .12s ease 0s}.jarl-checkbox .jarl-checkbox__checkmark-container .jarl-checkbox__checkmark{display:inline-block;flex-shrink:0;width:100%;vertical-align:middle;transform:scale(.5)}.jarl-checkbox .jarl-checkbox__checkmark-container .jarl-checkbox__checkmark polygon,.jarl-checkbox .jarl-checkbox__checkmark-container .jarl-checkbox__checkmark rect{fill:var(--jarl-checkbox-checkmark-color,#fff);fill-opacity:0;transition:fill-opacity .24s ease 0s,fill .24s ease 0s}.jarl-checkbox .jarl-checkbox__checkmark-container[data-checked=true]{background-color:var(--jarl-checkbox-checkmark-checked-bg,#111);border-color:var(--jarl-checkbox-checkmark-checked-border-color,#111)}.jarl-checkbox .jarl-checkbox__checkmark-container[data-checked=true] .jarl-checkbox__checkmark polygon,.jarl-checkbox .jarl-checkbox__checkmark-container[data-checked=true] .jarl-checkbox__checkmark rect{fill-opacity:1}.jarl-checkbox .jarl-checkbox__checkmark-container[data-invalid=true]{background-color:var(--jarl-checkbox-checkmark-invalid-bg,transparent);border-color:var(--jarl-checkbox-checkmark-invalid-border-color,#e73333)}.jarl-checkbox .jarl-checkbox__checkmark-container[data-invalid=true][data-checked=true]{background-color:var(--jarl-checkbox-checkmark-invalid-checked-bg,#e73333);border-color:var(--jarl-checkbox-checkmark-invalid-checked-border-color,#e73333)}.jarl-checkbox .jarl-checkbox__input{position:absolute;width:100%;height:100%;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}.jarl-checkbox .jarl-checkbox__input:checked~.jarl-checkbox__label{color:var(--jarl-checkbox-label-checked-color,#111)}.jarl-checkbox .jarl-checkbox__input[aria-invalid=true]~.jarl-checkbox__label{color:var(--jarl-checkbox-label-invalid-color,#e73333)}.jarl-checkbox .jarl-checkbox__input[aria-invalid=true]:checked~.jarl-checkbox__label{color:var(--jarl-checkbox-label-invalid-checked-color,#e73333)}.jarl-checkbox[data-position=top]{flex-direction:column-reverse}.jarl-checkbox[data-position=top] .jarl-checkbox__label{padding-block-end:var(--jarl-checkbox-label-spacing,.5rem)}.jarl-checkbox[data-position=bottom]{flex-direction:column}.jarl-checkbox[data-position=bottom] .jarl-checkbox__label{padding-block-start:var(--jarl-checkbox-label-spacing,.5rem)}.jarl-checkbox[data-position=left]{flex-direction:row-reverse}.jarl-checkbox[data-position=left] .jarl-checkbox__label{padding-inline-end:var(--jarl-checkbox-label-spacing,.5rem)}.jarl-checkbox[data-position=right]{flex-direction:row}.jarl-checkbox[data-position=right] .jarl-checkbox__label{padding-inline-start:var(--jarl-checkbox-label-spacing,.5rem)}.jarl-checkbox:has(.jarl-checkbox__input:disabled),.jarl-checkbox:has(.jarl-checkbox__input[aria-disabled=true]){cursor:not-allowed;opacity:var(--jarl-checkbox-disabled-opacity,.5)}.jarl-checkbox:has(.jarl-checkbox__input:focus-visible){outline:var(--jarl-checkbox-focus-outline-width,2px) var(--jarl-checkbox-focus-outline-style,solid) var(--jarl-checkbox-focus-outline-color,#111);outline-offset:var(--jarl-checkbox-focus-outline-offset,4px)}.jarl-checkbox:has(.jarl-checkbox__input:not([aria-disabled]):not(:disabled)):hover .jarl-checkbox__checkmark-container:not([data-checked=true]) .jarl-checkbox__checkmark polygon,.jarl-checkbox:has(.jarl-checkbox__input:not([aria-disabled]):not(:disabled)):hover .jarl-checkbox__checkmark-container:not([data-checked=true]) .jarl-checkbox__checkmark rect{fill:var(--jarl-checkbox-checkmark-hover-color,#111);fill-opacity:var(--jarl-checkbox-checkmark-hover-opacity,.5)}.jarl-checkbox:has(.jarl-checkbox__input:not([aria-disabled]):not(:disabled)):hover .jarl-checkbox__checkmark-container:not([data-checked=true]){border-color:var(--jarl-checkbox-checkmark-hover-border-color,#111)}.jarl-checkbox:has(.jarl-checkbox__input:not([aria-disabled]):not(:disabled)):hover .jarl-checkbox__input:not(:disabled):not([aria-disabled]):not(:checked)~.jarl-checkbox__label{color:var(--jarl-checkbox-label-hover-color,#111)}.jarl-checkbox:has(.jarl-checkbox__input:not([aria-disabled]):not(:disabled)):hover .jarl-checkbox__checkmark-container[data-invalid=true]:not([data-checked=true]){border-color:var(--jarl-checkbox-checkmark-invalid-hover-border-color,#e73333)}.jarl-checkbox:has(.jarl-checkbox__input:not([aria-disabled]):not(:disabled)):hover .jarl-checkbox__input[aria-invalid=true]:not(:disabled):not([aria-disabled]):not(:checked)~.jarl-checkbox__label{color:var(--jarl-checkbox-label-invalid-hover-color,#e73333)}.jarl-input{position:relative;display:flex;flex:1 1;gap:var(--jarl-input-gap,.25rem);align-items:center;height:var(--jarl-input-height,2.5rem);overflow:hidden;background-color:var(--jarl-input-bg,#fff);border-color:var(--jarl-input-border-color,#888);border-style:var(--jarl-input-border-style,solid);border-width:var(--jarl-input-border-width,1px);border-radius:var(--jarl-input-radius,.25rem)}.jarl-input[aria-disabled=true]{color:var(--jarl-input-disabled-color,#111);cursor:not-allowed;opacity:var(--jarl-input-disabled-opacity,.5)}.jarl-input[aria-disabled=true]:has(.jarl-input__field:focus-visible){outline:var(--jarl-input-focus-outline-width,2px) var(--jarl-input-focus-outline-style,solid) var(--jarl-input-focus-outline-color,#111);outline-offset:var(--jarl-input-focus-outline-offset,4px)}.jarl-input[aria-disabled=true]>*{pointer-events:none}.jarl-input:not([aria-disabled]):has(.jarl-input__field:focus-visible),.jarl-input[aria-disabled=false]:has(.jarl-input__field:focus-visible){outline:var(--jarl-input-focus-outline-width,2px) var(--jarl-input-focus-outline-style,solid) var(--jarl-input-focus-outline-color,#111);outline-offset:var(--jarl-input-focus-outline-offset,4px)}.jarl-input:has(.jarl-input__field[aria-invalid=true]){background-color:var(--jarl-input-invalid-bg,#fff);border-color:var(--jarl-input-invalid-border-color,#e73333)}.jarl-input:has(.jarl-input__field:read-only){background-color:var(--jarl-input-readonly-bg,#eee);border-color:var(--jarl-input-readonly-border-color,#888)}.jarl-input .jarl-input__field{display:inline-flex;width:100%;padding-block:var(--jarl-input-py,.375rem);padding-inline:var(--jarl-input-px,.75rem);margin:0;color:var(--jarl-input-color,#333);caret-color:var(--jarl-input-caret-color,#888);outline:none;background-color:transparent;border:none}.jarl-input .jarl-input__field:placeholder-shown{overflow:hidden;text-overflow:ellipsis;color:var(--jarl-input-placeholder-color,#333);white-space:nowrap}.jarl-input .jarl-input__field:read-only{color:var(--jarl-input-readonly-color,#333);cursor:default}.jarl-input .jarl-input__field[aria-invalid=true]{color:var(--jarl-input-invalid-color,#e73333)}.jarl-input-number__stepper{display:flex;flex-direction:column;border-left:var(--jarl-input-number-stepper-border-left-width,1px) var(--jarl-input-number-stepper-border-left-style,solid) var(--jarl-input-number-stepper-border-left-color,#888)}.jarl-input-number__stepper .jarl-input-number__stepper-button{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;padding:0;padding-block:.25rem;margin:0;color:var(--jarl-input-number-stepper-button-color,#333);appearance:none;cursor:pointer;background-color:transparent;border:none}.jarl-input-number__stepper .jarl-input-number__stepper-button:disabled{cursor:not-allowed;opacity:.5}.jarl-input-number__stepper .jarl-input-number__stepper-button:not(:disabled):hover{color:var(--jarl-input-number-stepper-button-hover-color,#333);background-color:var(--jarl-input-number-stepper-button-hover-bg,transparent)}.jarl-input-number__stepper .jarl-input-number__stepper-button:not(:disabled):active{color:var(--jarl-input-number-stepper-button-hover-color,#111);background-color:var(--jarl-input-number-stepper-button-hover-bg,transparent)}.jarl-modal__backdrop{position:fixed;top:0;left:0;z-index:var(--jarl-modal-backdrop-z-index,100);width:100dvw;height:100dvh;background-color:var(--jarl-modal-backdrop-bg,rgba(0,0,0,.4))}.jarl-modal__backdrop[data-state=closed]{opacity:0}.jarl-modal__backdrop[data-state=opened]{opacity:1}.jarl-modal__backdrop[data-state=opening]{animation:fadeInAnimation .3s backwards}.jarl-modal__backdrop[data-state=closing]{animation:fadeOutAnimation .3s forwards}.jarl-modal__body{padding-block:var(--jarl-modal-body-py,.5rem 1rem);padding-inline:var(--jarl-modal-body-px,1rem);overflow:auto}.jarl-button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding-block:var(--jarl-button-py,.375rem);padding-inline:var(--jarl-button-px,.75rem);overflow:hidden;vertical-align:middle;text-align:center;white-space:nowrap;text-decoration:none;appearance:none;-webkit-user-select:none;user-select:none;background-color:var(--jarl-button-bg,#fff);border-color:var(--jarl-button-border-color,#ccc);border-style:var(--jarl-button-border-style,solid);border-width:var(--jarl-button-border-width,1px);border-radius:var(--jarl-button-radius,.25rem);isolation:isolate}.jarl-button[data-disabled]{color:var(--jarl-button-disabled-color,#111);cursor:not-allowed;opacity:var(--jarl-button-disabled-opacity,.5)}.jarl-button:not([data-disabled]){color:var(--jarl-button-color,#111);cursor:pointer}.jarl-button:not([data-disabled]):hover{color:var(--jarl-button-hover-color,#111);background-color:var(--jarl-button-hover-bg,#e9e9e9)}.jarl-button:not([data-disabled]):active,.jarl-button:not([data-disabled])[data-active]{color:var(--jarl-button-active-color,#111);background-color:var(--jarl-button-active-bg,#ddd)}.jarl-button:focus-visible{outline:var(--jarl-button-focus-outline-width,2px) var(--jarl-button-focus-outline-style,solid) var(--jarl-button-focus-outline-color,#111);outline-offset:var(--jarl-button-focus-outline-offset,4px)}.jarl-modal__close-button{--jarl-button-color:var(--jarl-modal-close-button-color,#111);--jarl-button-bg:var(--jarl-modal-close-button-bg,#fff);--jarl-button-py:var(--jarl-modal-close-button-py,.375rem);--jarl-button-px:var(--jarl-modal-close-button-px,.375rem);--jarl-button-border-color:var(--jarl-modal-close-button-border-color,transparent);position:absolute;top:var(--jarl-modal-close-button-top,.75rem);right:var(--jarl-modal-close-button-right,.75rem);bottom:var(--jarl-modal-close-button-bottom,unset);left:var(--jarl-modal-close-button-left,unset);width:var(--jarl-modal-close-button-size,1.25rem);height:var(--jarl-modal-close-button-size,1.25rem)}.jarl-modal__close-button .jarl-modal__close-button-icon{width:100%}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}@keyframes fadeOutAnimation{0%{opacity:1}to{opacity:0}}.jarl-modal{position:fixed;inset:0 auto auto 0;z-index:var(--jarl-modal-z-index,100);display:flex;width:100dvw;height:100dvh;white-space:nowrap;will-change:opacity}.jarl-modal[data-state=closed]{opacity:0}.jarl-modal[data-state=opened]{opacity:1}.jarl-modal[data-state=opening]{animation:fadeInAnimation .3s backwards}.jarl-modal[data-state=closing]{animation:fadeOutAnimation .3s forwards}.jarl-modal[data-align=start]{align-items:start}.jarl-modal[data-align=center]{align-items:center}.jarl-modal[data-align=end]{align-items:end}.jarl-modal[data-justify=start]{justify-content:start}.jarl-modal[data-justify=center]{justify-content:center}.jarl-modal[data-justify=end]{justify-content:end}.jarl-modal .jarl-modal__content{--_marginX:var(--jarl-modal-content-mx,1.25rem);--_marginY:var(--jarl-modal-content-my,1.25rem);position:relative;display:flex;flex-direction:column;max-width:calc(100% - 2 * var(--_marginX));max-height:calc(100% - 2 * var(--_marginY));margin-block:var(--_marginY);margin-inline:var(--_marginX);overflow:auto;color:var(--jarl-modal-content-color,#000);white-space:normal;background-color:var(--jarl-modal-content-bg,#fff);border-color:var(--jarl-modal-content-border-color,#ccc);border-style:var(--jarl-modal-content-border-style,solid);border-width:var(--jarl-modal-content-border-width,1px);border-radius:var(--jarl-modal-content-border-radius,.5rem)}.jarl-modal .jarl-modal__content:focus-visible{outline:var(--jarl-modal-focus-outline-width,2px) var(--jarl-modal-focus-outline-style,solid) var(--jarl-modal-focus-outline-color,#111);outline-offset:var(--jarl-modal-focus-outline-offset,-4px)}.jarl-modal__footer{display:flex;gap:var(--jarl-modal-footer-gap,.5rem);align-items:center;justify-content:flex-end;padding-block:var(--jarl-modal-footer-py,.25rem .5rem);padding-inline:var(--jarl-modal-footer-px,1rem)}.jarl-modal__header{display:flex;flex:0 1;padding-block:var(--jarl-modal-header-py,1rem .5rem);padding-inline:var(--jarl-modal-header-px,1rem 3rem)}.jarl-modal__title{margin-block:var(--jarl-modal-title-py,0);margin-inline:var(--jarl-modal-title-px,0);overflow-wrap:break-word}.toc{flex-shrink:0;width:13.75rem;margin-block-start:1.5rem;.toc__content{position:sticky;top:calc(var(--jarl-header-height) + 1.5rem);display:grid;.toc__content-title{padding:1rem 1rem 0;margin:0;font-size:.875rem;font-weight:700;text-transform:uppercase}.toc__options{padding:1rem 1rem 0;margin:0;list-style:none;.toc__item{margin-block:.5rem;font-size:.875rem;line-height:1.5rem;.toc__item-link{text-decoration:none}}}}}@media screen and (max-width:56.25rem){.toc{display:none}}.color-card{width:5rem;overflow:hidden;cursor:pointer;border:1px solid light-dark(var(--jarl-colors-gray-100),var(--jarl-colors-gray-800));border-radius:.5rem;transition:transform .1s;&.selected{outline:2px solid light-dark(var(--jarl-colors-gray-500),var(--jarl-colors-gray-200))}&.selected,&:hover{transform:scale(1.05)}.color-container{display:block;width:100%;height:4.5rem}.color-info-container{display:flex;flex-direction:column;padding:.5rem;border-top:1px solid light-dark(var(--jarl-colors-gray-100),var(--jarl-colors-gray-800));.color-name{overflow:hidden;text-overflow:ellipsis;font-size:.6875rem;font-weight:500;white-space:nowrap}.color-hex,.color-name{color:light-dark(var(--jarl-colors-gray-600),var(--jarl-colors-gray-200))}.color-hex{margin-top:.25rem;font-size:.625rem}}}.color-popover{.color-popover-banner{width:100%;height:3rem;margin-bottom:.625rem;border:1px solid light-dark(var(--jarl-colors-gray-100),var(--jarl-colors-gray-800));border-radius:.5rem}.color-popover-name{margin:0 0 .125rem;font-size:.8125rem;font-weight:500}.color-popover-hex,.color-popover-name{color:light-dark(var(--jarl-colors-gray-600),var(--jarl-colors-gray-200))}.color-popover-hex{margin:0 0 .625rem;font-family:var(--font-mono);font-size:.75rem}.color-popover-css-var-container{display:flex;gap:.5rem;align-items:center;.color-popover-css-var-name,.color-popover-css-var-title{font-size:.6875rem;color:light-dark(var(--jarl-colors-gray-600),var(--jarl-colors-gray-200))}.color-popover-css-var-name{padding:.25rem;font-family:ui-monospace,monospace;background-color:light-dark(var(--jarl-colors-gray-100),var(--jarl-colors-gray-600));border-radius:.25rem}}}.preview-box{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem;border:1px solid var(--jarl-colors-blue-500);border-radius:.25rem}