:root{--cc-line-height:1.1;--cc-font-size-label:0.875rem;--cc-font-size-input:1.125rem;--cc-font-size-h2:1.5rem;--cc-font-size-h3:1.125rem;--cc-primary-color:#1d1d1b;--cc-secondary-color:#4f4f4f;--cc-background-color:#ffffff;--cc-accent-color:#007db3;--cc-red:#e00000;--cc-green:#008000;--cc-blue:#0000ff;--cc-spacing-very-small:4px;--cc-spacing-small:10px;--cc-spacing-medium:30px;--cc-spacing-large:40px;--cc-color-box-min-width:300px;--cc-result-box-min-width:250px;--cc-border-radius:8px;--cc-border-thickness:1px;--cc-border:var(--cc-border-thickness) solid var(--cc-secondary-color)}.contrast-calc__wrapper{font-size:1rem;font-family:"Roboto Flex",Arial,sans-serif;color:var(--cc-secondary-color)}.contrast-calc__container{max-width:1080px;margin:0 auto;padding:0 var(--cc-spacing-small)}.contrast-calc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--cc-spacing-medium);padding:var(--cc-spacing-large) 0}.error-inline{display:none;font-size:var(--cc-font-size-label);font-weight:700;line-height:var(--cc-line-height);color:var(--cc-red)}.contrast-calc__box{display:flex;flex-direction:column;flex:1 0 var(--cc-color-box-min-width);min-width:var(--cc-color-box-min-width);gap:var(--cc-spacing-medium);padding:var(--cc-spacing-medium);align-items:stretch;border:var(--cc-border);border-radius:var(--cc-border-radius)}.contrast-calc__section{display:flex;flex-direction:column}.contrast-calc__label,.contrast-calc__legend{display:flex;justify-content:space-between;font-size:var(--cc-font-size-label);line-height:var(--cc-line-height)}.contrast-calc__legend{display:block;text-align:center;font-size:var(--cc-font-size-h2);font-weight:700;color:var(--cc-primary-color)}.contrast-calc__input{box-sizing:border-box;font-size:var(--cc-font-size-input);line-height:var(--cc-line-height);background:var(--cc-background-color)}.contrast-calc__wrapper .contrast-calc__input--hex{padding:var(--cc-spacing-small);border:var(--cc-border);border-radius:var(--cc-border-radius);text-transform:uppercase}.contrast-calc__rgb{display:flex;flex-wrap:wrap;gap:var(--cc-spacing-small)}.contrast-calc__rgb-channel{display:flex;flex:1 0 0;align-items:center;min-width:0;padding:var(--cc-border-thickness);border:var(--cc-border);border-radius:var(--cc-border-radius)}.contrast-calc__rgb-channel--red{background:var(--cc-red)}.contrast-calc__rgb-channel--green{background:var(--cc-green)}.contrast-calc__rgb-channel--blue{background:var(--cc-blue)}.contrast-calc__rgb-label{flex:0 0 30px;text-align:center;font-size:var(--cc-font-size-input);font-weight:700;line-height:var(--cc-line-height);color:var(--cc-background-color);text-transform:uppercase}.contrast-calc__rgb-input{flex:1 1 auto;min-width:0;padding:var(--cc-spacing-small) 0 var(--cc-spacing-small) var(--cc-spacing-small);border:0;border-radius:0 7px 7px 0}.contrast-calc__input--picker{appearance:none;-webkit-appearance:none;width:100%;height:45px;padding:var(--cc-spacing-very-small);border:var(--cc-border);border-radius:var(--cc-border-radius);cursor:pointer}.contrast-calc__input--brightness{border:var(--cc-border);border-radius:var(--cc-border-radius);cursor:grab}.contrast-calc__input--brightness:active{cursor:grabbing}.contrast-calc__swap-button{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;background-color:var(--cc-accent-color);color:var(--cc-background-color);border:var(--cc-border);border-radius:var(--cc-border-radius);cursor:pointer;transition:background-color .2s ease}.contrast-calc__swap-button:hover{background-color:var(--cc-background-color);color:var(--cc-accent-color)}.contrast-calc__icon-swap{width:30px;height:30px}.result-preview{display:flex;flex-wrap:wrap;justify-content:center;min-height:300px;gap:var(--cc-spacing-small)}.result-preview__result{flex:0 0 var(--cc-result-box-min-width);min-width:var(--cc-result-box-min-width);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--cc-spacing-small);border:var(--cc-border);border-radius:var(--cc-border-radius);text-align:center}.result-preview__wcag{display:flex;flex-direction:column;gap:var(--cc-spacing-small);flex:0 0 var(--cc-result-box-min-width);justify-content:center;align-items:stretch;text-align:center}.wcag-rating{display:flex;flex:1;min-width:var(--cc-result-box-min-width);flex-direction:column;align-items:stretch;border:var(--cc-border);border-radius:var(--cc-border-radius);padding:var(--cc-spacing-small)}.result-preview__preview{display:flex;flex-direction:column;flex:1 1 var(--cc-result-box-min-width);min-width:var(--cc-result-box-min-width);justify-content:center;padding:var(--cc-spacing-medium);border:var(--cc-border);border-radius:var(--cc-border-radius)}.result-preview h2{margin:0 0 var(--cc-spacing-small) 0;font-size:var(--cc-font-size-h2);font-weight:700;color:var(--cc-primary-color)}.result-preview__value{font-size:3.5rem;font-weight:700;color:var(--cc-primary-color);margin:0}.result-preview h3{font-size:var(--cc-font-size-h3);font-weight:700}.wcag-rating__heading{margin:0 0 var(--cc-spacing-small) 0;font-size:var(--cc-font-size-h3);font-weight:700;color:var(--cc-primary-color)}.contrast-calc__wrapper ul.wcag-rating__criteria{display:flex;flex-direction:column;flex:1;align-items:stretch;width:100%;list-style:none;padding:0;margin:0}.wcag-rating__item{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--cc-spacing-very-small)}.wcag-rating__criteria-label{display:inline-block;font-weight:700}.wcag-rating__criteria-value{display:inline-block;text-align:right;color:var(--cc-primary-color)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}