.swatch-big{height: 160px;border-radius: var(--radius);overflow: hidden;border: 1px solid var(--border)}.swatch-big>div{height: 100%;display: flex;align-items: center;justify-content: center}.swatch-big span{font: 700 1.4rem var(--mono)}.shades{display: grid;grid-template-columns: repeat(auto-fit,minmax(42px,1fr));gap: 4px}.shade{height: 48px;border: 0;border-radius: 6px;cursor: pointer;font-size: 0.62rem;font-family: var(--mono);display: flex;align-items: flex-end;justify-content: center;padding: 4px 2px;transition: transform 0.1s;box-shadow: inset 0 0 0 1px rgba(0,0,0,.06)}.shade:hover{transform: translateY(-2px)}.shade span{opacity: 0;white-space: nowrap;overflow: hidden}.shade:hover span,.shade:focus-visible span{opacity: 1}