.color-converter{gap:var(--space-xl);grid-template-columns:200px 1fr;align-items:start;max-width:720px;display:grid}.color-converter__swatch-wrap{text-align:center}.color-converter__swatch{aspect-ratio:1;width:100%;margin-bottom:var(--space-sm);background-color:#f37021;border:1px solid #ffffff24;border-radius:16px;transition:background-color .1s}.color-converter__native-picker{cursor:pointer;width:100%;height:36px;margin-bottom:var(--space-sm);background:#ffffff0f;border:1px solid #ffffff24;border-radius:8px;padding:2px}.color-converter__native-picker::-webkit-color-swatch-wrapper{padding:0}.color-converter__native-picker::-webkit-color-swatch{border:none;border-radius:5px}.color-converter__native-picker::-moz-color-swatch{border:none;border-radius:5px}.color-converter__name{color:var(--color-text-muted);font-size:.8125rem}.color-converter__name strong{color:var(--color-text)}.color-converter__formats{gap:var(--space-md);flex-direction:column;display:flex}.color-converter__row{align-items:center;gap:.5rem;display:flex}.color-converter__fields{flex:1;gap:.5rem;display:flex}.color-converter__field{flex:1}.color-converter__field-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;text-align:center;margin-bottom:.25rem;font-size:.6875rem;display:block}.color-converter__tw-swatch{border:1px solid #ffffff24;border-radius:4px;flex-shrink:0;width:24px;height:24px}.color-converter__tw-match{color:var(--color-text-muted);flex-shrink:0;font-size:.6875rem}.color-converter__code{color:var(--color-text);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:.875rem}@media (width<=768px){.color-converter{grid-template-columns:1fr}.color-converter__swatch-wrap{gap:var(--space-md);text-align:left;grid-template-columns:120px 1fr;align-items:center;display:grid}.color-converter__swatch{grid-row:1/3;width:120px}.color-converter__native-picker{margin-bottom:0}}