.tlb-color-tool,.tlb-color-tool *,.tlb-color-tool :before,.tlb-color-tool :after{box-sizing:border-box}.tlb-color-tool{gap:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-6);flex-direction:column;display:flex}.tlb-color-tool__field{gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-weight-medium);color:var(--color-text);flex-direction:column;display:flex}.tlb-color-tool__row{gap:var(--space-4);flex-wrap:wrap;align-items:flex-end;display:flex}.tlb-color-tool__output-stack{gap:var(--space-3);flex-direction:column;display:flex}.tlb-color-tool__input{min-height:var(--min-touch-target);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);padding-inline:var(--space-4);transition:border-color var(--duration-base) var(--ease-premium), box-shadow var(--duration-base) var(--ease-premium)}.tlb-color-tool__input:hover:not(:disabled){border-color:var(--color-text-faint)}.tlb-color-tool__input:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-tint);outline:none}.tlb-color-tool__input[aria-invalid=true]{border-color:var(--color-destructive)}.tlb-color-tool__input[aria-invalid=true]:focus-visible{box-shadow:0 0 0 4px var(--color-destructive-tint)}.tlb-color-tool__input:disabled{opacity:var(--opacity-disabled);background:var(--color-bg-subtle);cursor:not-allowed}.tlb-color-tool__input--narrow{max-width:12rem}.tlb-color-tool__picker{appearance:none;width:var(--min-touch-target);height:var(--min-touch-target);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-base) var(--ease-premium);background:0 0;padding:0}.tlb-color-tool__picker:hover{border-color:var(--color-text-faint)}.tlb-color-tool__picker:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.tlb-color-tool__swatch{width:var(--min-touch-target);height:var(--min-touch-target);border-radius:var(--radius-md);border:1px solid var(--color-border);flex-shrink:0}.tlb-color-tool__checkbox-row{align-items:center;gap:var(--space-2);min-height:var(--min-touch-target);font-size:var(--text-sm);color:var(--color-text);display:flex}.tlb-color-tool__checkbox-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--color-primary);cursor:pointer}.tlb-color-tool__checkbox-row input[type=checkbox]:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.tlb-color-tool__output-row{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex}.tlb-color-tool__output-value{min-width:0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text);overflow-wrap:break-word;flex:1}.tlb-color-tool__output-row>button{min-width:var(--min-touch-target);min-height:var(--min-touch-target);padding-inline:var(--space-3);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:var(--color-surface);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-base) var(--ease-premium), color var(--duration-base) var(--ease-premium), background var(--duration-fast) var(--ease-premium);flex-shrink:0}.tlb-color-tool__output-row>button:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}.tlb-color-tool__output-row>button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.tlb-color-tool__output-row>button:active{transform:scale(.97)}.tlb-color-tool__error{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-destructive);background:var(--color-destructive-tint);border:1px solid color-mix(in srgb, var(--color-destructive) 35%, transparent);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex}.tlb-color-tool__preview{border-radius:var(--radius-md);border:1px solid var(--color-border);min-height:5rem;padding:var(--space-5);text-align:center;transition:background-color var(--duration-base) var(--ease-premium), color var(--duration-base) var(--ease-premium);justify-content:center;align-items:center;display:flex}.tlb-color-tool__preview p{font-size:var(--text-base);font-weight:var(--font-weight-semibold);margin:0}.tlb-color-tool__preview p.tlb-color-tool__preview-text--large{font-size:var(--text-2xl)}.tlb-color-tool__result{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.tlb-color-tool__ratio{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--font-weight-bold);color:var(--color-text)}.tlb-color-tool__badge{font-size:var(--text-xs);font-weight:var(--font-weight-semibold);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);align-items:center;display:inline-flex}.tlb-color-tool__badge--pass{color:var(--color-success);background:var(--color-success-tint)}.tlb-color-tool__badge--fail{color:var(--color-destructive);background:var(--color-destructive-tint)}.tlb-color-tool__palette-title{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--color-text);margin:0 0 var(--space-3)}.tlb-color-tool__palette-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));align-items:stretch;display:grid}.tlb-color-tool__swatch-card{background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);height:100%;transition:border-color var(--duration-base) var(--ease-premium);flex-direction:column;display:flex;overflow:hidden}.tlb-color-tool__swatch-card:hover{border-color:var(--color-border-strong)}.tlb-color-tool__swatch-large{aspect-ratio:4/3;border-block-end:1px solid var(--color-border);width:100%}.tlb-color-tool__swatch-meta{align-items:center;gap:var(--space-1);padding:var(--space-2);flex-direction:column;flex:1;display:flex}.tlb-color-tool__swatch-label{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center}.tlb-color-tool__swatch-hex{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text)}.tlb-color-tool__swatch-meta>button{width:100%;min-height:32px;padding-inline:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-weight-medium);color:var(--color-primary);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--duration-base) var(--ease-premium), background var(--duration-fast) var(--ease-premium);margin-block-start:auto}.tlb-color-tool__swatch-meta>button:hover{border-color:var(--color-primary);background:var(--color-primary-tint)}.tlb-color-tool__swatch-meta>button:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}.tlb-color-tool__swatch-meta>button:active{transform:scale(.97)}@media (max-width:639px){.tlb-color-tool{padding:var(--space-5) var(--space-4);gap:var(--space-4)}.tlb-color-tool__row{flex-direction:column;align-items:stretch}.tlb-color-tool__output-row{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){.tlb-color-tool__input,.tlb-color-tool__picker,.tlb-color-tool__output-row>button,.tlb-color-tool__preview,.tlb-color-tool__swatch-card,.tlb-color-tool__swatch-meta>button{transition:none}}