.tool-color-input{align-items:center;gap:.5rem;display:flex}.tool-color-input__picker{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;flex-shrink:0;width:40px;height:40px;padding:2px}.tool-color-input__picker::-webkit-color-swatch-wrapper{padding:0}.tool-color-input__picker::-webkit-color-swatch{border:none;border-radius:5px}.tool-color-input__picker::-moz-color-swatch{border:none;border-radius:5px}.tool-color-input__text{color:var(--color-text);transition:border-color var(--transition-fast);background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;flex:1;padding:.625rem .75rem;font-family:Neue Montreal,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9375rem}.tool-color-input__text:focus{border-color:var(--color-accent);outline:none}.contrast-checker__inputs{align-items:flex-end;gap:var(--space-md);margin-bottom:var(--space-xl);display:flex}.contrast-checker__input-group{flex:1}.contrast-checker__swap{width:40px;height:40px;color:var(--color-text-muted);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast);background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.contrast-checker__swap:hover{color:var(--color-text);background:#ffffff1a}.contrast-checker__ratio{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xl);padding:var(--space-md);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;display:flex}.contrast-checker__ratio-label{font-family:var(--font-alfabet);text-transform:uppercase;letter-spacing:.02em;color:var(--color-text-muted);font-size:.625rem;font-weight:900}.contrast-checker__ratio-value{font-family:var(--font-serif);letter-spacing:-.03em;font-size:2rem;font-weight:400;line-height:1}.contrast-checker__preview{padding:var(--space-xl);margin-bottom:var(--space-xl);transition:background-color var(--transition-fast);border:1px solid #ffffff1a;border-radius:12px}.contrast-checker__preview-large{margin-bottom:var(--space-sm);font-size:1.5rem;font-weight:600;line-height:1.3}.contrast-checker__preview-small{font-size:1rem;line-height:1.7}.contrast-checker__results{margin-bottom:var(--space-xl);grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.wcag-result{padding:var(--space-md);transition:border-color var(--transition-base);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:12px;grid-template-rows:auto auto;grid-template-columns:auto 1fr auto;column-gap:.75rem;display:grid}.wcag-result.pass{border-color:#4ade8066}.wcag-result.fail{border-color:#f8717166}.wcag-result__level{font-family:var(--font-serif);letter-spacing:-.03em;grid-row:1/3;align-self:center;font-size:1.5rem;font-weight:400;line-height:1}.wcag-result__type{color:var(--color-text);font-size:.875rem}.wcag-result__threshold{color:var(--color-text-muted);font-size:.75rem}.wcag-result__status{font-family:var(--font-alfabet);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background:#ffffff0f;border-radius:100px;grid-area:1/3/3;align-self:center;padding:.25rem .75rem;font-size:.625rem;font-weight:900}.wcag-result.pass .wcag-result__status{color:#4ade80;background:#4ade8026}.wcag-result.fail .wcag-result__status{color:#f87171;background:#f8717126}.contrast-checker__fix{align-items:center;gap:var(--space-sm);padding:var(--space-md);background:#facc150f;border:1px solid #facc1533;border-radius:12px;flex-wrap:wrap;display:flex}.contrast-checker__fix[hidden]{display:none}.contrast-checker__fix-label{color:var(--color-text-muted);font-size:.875rem}.contrast-checker__fix-color{align-items:center;gap:.5rem;display:flex}.contrast-checker__fix-swatch{border:1px solid #fff3;border-radius:4px;flex-shrink:0;width:24px;height:24px}.contrast-checker__fix-color code{font-family:Neue Montreal,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem}@media (width<=768px){.contrast-checker__inputs{flex-direction:column;align-items:stretch}.contrast-checker__swap{align-self:center;transform:rotate(90deg)}.contrast-checker__results{grid-template-columns:1fr}}